혼자 적어보는 노트

[React] create-react-app 없이 react 개발환경 세팅 해보기 본문

React

[React] create-react-app 없이 react 개발환경 세팅 해보기

jinist 2022. 3. 9. 16:03

리액트로 무언가를 만들 때 늘 CRA(create-react-app)을 사용하여

개발환경을 구축했었는데 궁금증이 생겨서 CRA없이 환경을 구축해보고 싶었다.

 

몇가지 검색을 해서 블로그 글을 보며 해보긴 했는데

특히나 웹팩 부분에서 각각 다르게 세팅을 해놓아서 뭐가 뭔지 이해하기가 어려웠다.

 

하나씩 이해를 하며 정리를 해보기로 했다.

 

폴더 및 package.json 생성

프로젝트 폴더를 생성하고

package.json 파일을 만들기 위한 초기화를 진행한다

npm init -y

npm init -y 를 사용하면 default값으로 설정 된 pacage.json파일을 생성할 수 있다.

 

 

프로젝트 파일 안에

src, dist, public폴더를 생성한다.

 

src : React로 작업할 폴더

dist : 번들링 결과 폴더

public : 정적 파일 폴더

 

public폴더 안에 index.html을 생성하고

root div를 만들어준다.

 

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

 

src폴더 안에 리액트 컴포넌트들을 렌더링 할

index.js / App.js / App.css 파일을 생성한다.

 

src/index.js

import React from "react";
import ReactDom from "react-dom";
import App from "./App";

ReactDom.render(<App />, document.getElementById("root"));

 

src/App.js

import React from "react";
import "./App.css";

const App = () => {
  return <div>React</div>;
};

export default App;

 

 

패키지 설치

 

리액트의 환경을 구축하기 위한 패키지들을 설치해야 한다.

 

react 설치

npm i react react-dom

 

babel 설치

npm install @babel/core @babel/preset-react @babel/preset-env -D

@babel/core : babel을 사용하기위한 코어

@babel/preset-react : 리액트의 jsx파일을 변환

@babel/preset-env : ES6코드를 ES5코드로 변환

 

babel 설정

루트 경로에서 babel.config.js 파일을 생성하고 아래와 같이 프리셋을 적어준다.

module.exports = {
  presets: ['@babel/preset-react', '@babel/preset-env'],
};

 

webpack 설치

웹팩을 사용하기 위해 패키지들을 설치 해준다.

npm i webpack webpack-cli webpack-dev-server -D

webpack : 웹팩을 사용하기 위한 패키지

webpack-cli : 웹팩을 커맨드 라인에서 사용할 수 있게 해줌

webpack-dev-server: 웹팩을 빌드하여 개발 서버를 구동시켜줌

 

lodder 설치

npm i babel-loader style-loader css-loader file-loader -D

babel-loader : JSX 및 ES6+ 문법 변환
css-loader : CSS 파일을 자바스크립트가 이해할 수 있도록 변환

style-loader : 변환된 CSS 파일을 
file-loader : 이미지 및 폰트 등의 파일 로딩

 

플러그인 설치

npm i html-webpack-plugin clean-webpack-plugin mini-css-extract-plugin -D

html-webpack-plugin : HTML파일에 번들링된 파일을 적용

clean-webpack-plugin : 번들링을 할 때마다 이전에 생성한 번들파일 정리
mini-css-extract-plugin : css 파일을 별도의 파일로 추출

 

webpack 설정

루트경로에 webpack.config.js 파일을 생성한다.

 

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const join = require("path").join;
const path = require("path");
module.exports = {
  entry: join(__dirname, "/src/index.js"),
  mode: "development",
  devtool: "source-map",
  devServer: {
    port: 8080,
    hot: true,
    devMiddleware: {
      writeToDisk: true,// 번들링된 파일을 생성할 것인지 설정
    },
  },
  output: {
    filename: "main.js",
    path: path.resolve(__dirname, "./dist"),
  },
  resolve: {
    extensions: [".js", ".jsx"], // 확장자 생략해도 인식 가능 
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.(scss|css)$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new MiniCssExtractPlugin({
      filename: "style.css",
    }),
    new HtmlWebpackPlugin({
      template: join(__dirname, "/public/index.html"),// 번들링 폴더로 복사할 대상 html
    }),
  ],
};

entry : 웹팩을 적용시킬 대상의 파일

mode : development / production 두가지의 모드로 설정

devtool : 에러 발생 시 에러발생 위치를 확인할 수 있는 도구

output: 번들링한 결과물 정보

rules: 모듈에 적용할 로더와 옵션 설정

plugin: 적용시킬 플러그인

 

package.json script 설정

  "scripts": {
    "dev": "webpack-dev-server --progress & open http://localhost:8080/",
    "build": "webpack --pregress"
  },

 

script에 설정해 놓은대로

npm run dev 후 해당 포트에 접속하면 실행되는 것을 확인할 수 있다.

'React' 카테고리의 다른 글

[React] useRef() 여러 개 한번에 관리하기  (0) 2022.03.11
더미데이터(dummy data) 만들기 / 더미 이미지 사이트  (0) 2022.03.10
[React] 정규표현식을 이용하여 텍스트 안에서 해시태그 분리하기  (0) 2022.03.06
[React] styled-component  (0) 2022.03.06
[React] input type="file" 커스터마이징 하기  (0) 2022.03.03
'React' Related Articles more
Comments