[React] CRA 없이 React 개발 환경 구축하기

CRA(Create React App)

CRA로 리액트 개발 환경을 구축하는 방법은 여기서 볼 수 있다.

단번에 TypeScript 설정까지 끝낼 수 있는 아주 간편한 방법이다. 

이번에는 CRA 없이 개발 환경을 구축해보려 한다.

 

React 설정

yarn init
yarn add react react-dom

TypeScript 설정

타입스크립트가 전역으로 설치되어 있다면  tsc --init 을, 해당 프로젝트에만 설치되어 있다면 경로를 직접 명시한다.

yarn add -D typescript @types/react @types/react-dom
node_modules/.bin/tsc --init

init을 하면 tsconfig.json 파일이 하나 생기는데, 여기서 자신이 원하는 대로 설정을 하면 된다.

나는 다음과 같이 설정했다.

{
  "compilerOptions": {
    "target": "ES5",                                     
    "lib": ["dom", "ES2015", "ES2016", "ES2017", "ES2018", "ES2019", "ES2020"],                                        
    "jsx": "react-jsx",                                
    "module": "commonjs",                                
    "moduleResolution": "node",                     
    "baseUrl": "./",                                  
    "allowJs": true,                                  
    "sourceMap": true,                                
    "outDir": "./dist",                                  
    "isolatedModules": true,                          
    "allowSyntheticDefaultImports": true,             
    "esModuleInterop": true,                             
    "forceConsistentCasingInFileNames": true,            
    "strict": true,                                      
  }
}

아래 글을 참고해서 설정을 마쳤다.

https://velog.io/@tnehd1998/tsconfig.json-%EB%82%B4%EC%9A%A9-%EC%A0%95%EB%A6%AC

tsconfig.json 내용 정리

Babel 설정

바벨은 ES6+ 버전 이상의 자바스크립트 코드를 하위 버전의 자바스크립트 문법으로 변환시켜준다.

다음과 같이 패키지를 설치한다.

yarn add babel-loader @babel/core @babel/preset-env --dev
yarn add @babel/preset-react @babel/preset-typescript

이후 babel.config.js 파일을 생성한 후 다음과 같이 작성한다.

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

@babel/preset-react

JSX로 작성된 코드들을 createElement 함수를 이용한 코드로 변환해 주는 바벨 플러그인이 내장되어 있음 (리액트를 변환하기 위한 프리셋)

@babel/preset-env

preset-env는 ECMAScript2015+를 변환할 때 사용한다. 바벨 7 이전 버전에는 연도별 프리셋을 제공했으나 지금은 env 하나로 합쳐짐. (IE 지원을 위한 프리셋)

@babel/preset-typescript

원래 바벨과 타입스크립트는 따로 작업이 되었지만 해당 플러그인을 통해 타입스크립트와 바벨이 조화롭게 병합하여 사용하게 됨. (타입스크립트를 변환하기 위한 프리셋)

Webpack 설정

다음 패키지들을 설치한다.

yarn add webpack webpack-cli webpack-dev-server webpack-merge --dev
yarn add html-webpack-plugin ts-loader clean-webpack-plugin --dev

webpack, webpack-cli

webpack을 사용하기 위해 기본적으로 필요한 패키지

webpack-dev-server

빠른 실시간 리로드를 가능하게 하는 개발 서버

webpack-merge

webpack을 dev, prod 모드를 편안하게 분리하여 구축할 수 있게 해줌

html-webpack-plugin

html 파일을 템플릿으로 생성할 수 있게 해줌

ts-loader

타입스크립트를 자바스크립트 코드로 변환

 

이후 webpack.config.js 파일을 생성한 후 다음과 같이 작성한다.

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const path = require("path");

module.exports = {
  entry: "./index.tsx",
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: ["babel-loader", "ts-loader"],
        exclude: /node_modules/,
      },
      {
        test: /\.jsx?$/,
        use: {
          loader: "babel-loader",
        },
        exclude: /node_modules/,
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [
          {
            loader: "file-loader",
          },
        ],
      },
    ],
  },
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
    new CleanWebpackPlugin(),
  ],
};

webpack.dev.js 파일과 webpack.prod.js 파일도 각각 생성해 아래와 같이 작성한다.

 

webpack.dev.js

const {merge} = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common, {
    mode: "development",
    devtool: "eval",
    devServer: {
        historyApiFallback: true,
        port: 3000,
        hot: true,
    },
});

webpack.prod.js

const {merge} = require("webpack-merge");
const common = require("./webpack.common.js");

module.exports = merge(common, {
    mode: "production",
    devtool: "hidden-source-map",
});

package.json 수정

...
"scripts": {
    "dev": "webpack-dev-server --config webpack.dev.js --open --hot",
    "build": "webpack --config webpack.prod.js",
    "start": "webpack --config webpack.dev.js"
  },
  ...

 

 

참고

https://adjh54.tistory.com/83 

https://velog.io/@kmlee95/CRA%EC%97%86%EC%9D%B4-React%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0

https://velog.io/@tnehd1998/CRA%EC%97%86%EC%9D%B4-ReactTypeScript-%ED%99%98%EA%B2%BD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0