CRA없이 리액트 프로젝트 만들기

CRA 없이 react, typescript, babel, webpack 등을 설치하고 웹에서 실행해보자.

참고: https://velog.io/@skdusdl8804/React-React-Typescript-Webpack-초기-셋팅하기1
https://ryuhojin.tistory.com/19
https://wnsah052.tistory.com/186

React 설치

npm i react react-dom

• react ^18.2.0

TypeScript 설치

npm i -D @types/react @types/react-dom typescript

ts는 개발할 때만 필요하니까 -D 옵션 사용

tsconfig.json 설정

typescript를 글로벌로 설치했다면 tsc --init으로 tsconfig.json파일을 만들수 있다. 그냥 파일생성으로 만들어도 무관함

{
  "compilerOptions": {
    "sourceMap": true,
    "target": "es5",
    "lib": ["dom", "ES2015"],
    "allowJs": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "module": "commonjs",
    "isolatedModules": true,
    "jsx": "preserve",
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "outDir": "./dist",
    "moduleResolution": "node"
  },
  "exclude": ["node_modules"],
  "include": ["src/**/*.ts", "src/**/*.tsx"]
}

Babel 설치

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

• @babel/core: 바벨을 사용하는데 필요한 코어 패키지
• @babel/preset-env: ES6+를 ES5로 변환하는데 필요한 패키지
• @babel/preset-react: React를 변환하는데 필요한 패키지
• @babel/preset-typescript: TypeScript를 변환하는데 필요한 패키지

npm i -D @babel/runtime @babel/plugin-trasform-runtime

.babelrc 설정(babel.config.js)

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ],
    "@babel/preset-typescript"
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ]
}

• regenerator 옵션은 async/await을 사용할 수 있게 해준다고 함.

Webpack 설치

npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin @svgr/webpack webpack-merge webpack-bundle-analyzer clean-webpack-plugin

• webpack: 웹팩 기본
• webpack-cli: 웹팩을 터미널 cli 명령어로 사용할 수 있는 패키지
• webpack-dev-server: 웹팩을 이용한 웹서버를 구동시킬 수 있고, live reloading 도 제공
• html-webpack-plugin: webpack으로 번들된 html파일을 단순화하는 패키지. 번들된 js 를 html에 script태그로 알아서 넣어준다.
• @svgr/webpack: svg파일을 사용할 수 있는 패키지
• webpack-merge: webpack config 파일들을 묶을 수 있는 패키지
• webpack-bundle-analyzer:
• clean-webpack-plugin: webpack 번들링 시 이전 빌드된 파일들 삭제시켜주는 패키지

npm i -D css-loader style-loader sass sass-loader

• css-loader: .css 파일을 웹팩이 인식할 수 있는 로더
• style-loader: 번들링한 css 파일을 style태그로 넣어주는 로더
• sass-loader: Sass를 사용한다면 필요한 로더

Webpack 설정

webpack.common.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.export = {
  entry: path.resolve(__dirname, "..", "./src/index.tsx"),
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "..", "./src/")
    },
    extensions: [".js", ".jsx", ".ts", ".tsx", ".css", ".scss", ".json"]
  },
  output: {
    path: path.resolve(__dirname, "..", "./dist"),
    filename: '[name].bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.(ts|js)x?$/,
        exclude: /node_modules/,
        loader: ["babel-loader", "ts-loader"]
      },
      {
        test: /\.s?css$/,
        use: ["style-loader", "css-loader", "sass-loader"]
      },
      {
        test: /\.(png|jpe?g|gif)$/,
        use: [{loader: "file-loader"}]
      },
      {
        test: /\.svg$/,
        use: ["@svgr/webpack"]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: "true",
      template: path.resolve(__dirname, "..","/public"),
      /* fileName: path.resolve(__dirname, "/dist") */
    })
  ]
}

webpack.dev.js

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

module.exports = merge(common, {
  mode: "development",
  devtool: "inline-source-map",
  devServer: {
    open: true,
    hot: true,
    compress: true,
    port: 3030,
    historyApiFallback: true,
    liveReload: true
  }
});

package.json에 script내용 추가

"scripts": {
  "build": "webpack --config config/webpack.dev.js --stats verbose",
  "start": "webpack serve --config config/webpack.dev.js --node-env development",
}