[React] 리액트 개발환경 구축 (webpack + babel)

혜린·2022년 5월 27일

목록 보기

5/18

CRA 없이 개발환경 구축하기

1. 프로젝트 생성

프로젝트 폴더에 들어가 terminal 실행한다.
npm init 명령어를 입력한다.
➡ package name, author, license을 작성한다.
아래와 같은 내용의 package.json 파일이 생성된다.

📄 package.json

{
  "name": "lecture",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "hyerin",
  "license": "MIT"
}

2. 웹팩 설치

npm i -D webpack webpack-cli

웹팩이란 최신 프런트엔드 프레임워크에서 가장 많이 사용되는 모듈 번들러(Module Bundler)이다.
모듈 번들러는 웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다.

webpack : webpack

webpack-cli : webpack과 관련된 명령어를 사용할 수 있게 해주는 패키지

3. 리액트 패키지 설치

npm i react react-dom

4. 바벨 설치

npm i -D @babel/core @babel/preset-env @babel/preset-react babel-loader

바벨은 ES6+ 버전 이상의 자바스크립트나 JSX 코드를 현재 및 과거의 브라우저와 같은 환경에서 호환되는 버전으로 변환하는데 주로 사용되는 도구이다.

babel/core : babel 기본 요소

babel/preset-env : 유저의 환경에 맞게 최신 문법을 옛날 문법으로 바꾸어줌

babel/preset-react : JSX 지원

babel-loader : babel과 웹팩 연결

5. 웹팩 설정

root 경로에 웹팩 설정 파일인 webpack.config.js 파일을 생성한다.

📄 weback.config.js

const path = require("path"); 

module.exports = {
  name: "wordrelay-setting",
  mode: "development", 
  devtool: "eval",
  resolve: {
    extensions: [".js", ".jsx"],
  },

  entry: { // 입력
    app: ["./client"],
  },

  module: {
    rules: [
      {
        test: /\.jsx?/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env", "@babel/preset-react"],
          plugins: ["@babel/plugin-proposal-class-properties"],
        },
      },
    ],
  },

  output: { // 출력
    path: path.join(__dirname, "dist"), 
    filename: "app.js",
  },
};

mode
development : 개발용
production : 실서비스

entry
웹팩이 파일을 읽어들이기 시작하는 부분

output
결과물의 파일 경로
filename : 웹팩으로 빌드한 파일이름
path : 해당 파일의 경로