cra없이 리액트 프로젝트 생성하기 두번째 파일구성 알아보기

 

cra없이 react 프로젝트 설정하기(feat. webpack,babel)

저번 글에서 우리는 cra없이 리액트를 세팅했습니다. 하지만 글이너무 길어져 각 파일의 구성에 대해선 알아보지 못했는데요. 이번글에선 각 파일들의 내용에 대해 분석해보고 알아가보겠습니다.

 

webpack.config.js

저번 글에서 우리가 만들었던 webpack.config.js의 코드는 이렇습니다.

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const webpack = require("webpack");
const mode = process.env.NODE_ENV || "development";

module.exports = {
  mode,
  devServer: {
    historyApiFallback: true,
    port: 3000,
    hot: true,
  },
  entry: {
    app: path.join(__dirname, "./src/index.tsx"),
  },

  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"],
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: ["babel-loader", "ts-loader"],
      },
    ],
  },

  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js",
  },

  plugins: [
    new webpack.ProvidePlugin({
      React: "react",
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
};

module.export의 전체적인 구성은

mode, devServer,entry,resolve,module,output,plugins로 되어있습니다.

 

mode : production모드인지 development모드인지 확인합니다.

production모드일경우 build할경우 주석이 사라지며 build되지만 development의 경우 build할경우 주석이 사리지지 않습니다.

 

devServer : localhost서버를 띄워 결과물을 제공하며 hot reloading같은 것을 적용해줍니다. 보통 react나 vue같은 spa개발을 할 때 devServer를 사용합니다.

• historyApiFallback - 히스토리 API를 사용하는 SPA 개발 시 설정하며 404에러가 발생하면 index.html로 리다이렉트 한다.
• hot - webpack의 HMR기능을 활성화 합니다. 전체 새로고침 없이 모든 종류의 모듈을 런타임 시점에 업데이트 되게 해줍니다.
• port - 포트번호

entry : 웹팩은 기본적으로 여러개의 자바스크립트 모듈을 하나의 파일로 묶어내는 번들러입니다. 따라서 최상위 자바스크립트 파일이 어디에 있는지 알아야하며 우리는 이 파일을 entry로써 명시합니다.

 

module : 프로젝트 내의 여러 유형의 모듈들을 처리할 방법을 결정합니다. ts-loader와 babel-loader를 명시하며 test로 loader를 적용시킬 파일들을 정규식으로 명시합니다.

 

output : 번들화 된 파일을 export할 경로와 파일명을 설정합니다. cra를 하면 파일이름이 /build로 되어있습니다. yarn build로 build 명령어를 수행하면 react의 파일들을 /dist폴더에 index.html와 bundle.js파일이 생기게됩니다.

 

 

 

babel.config.js

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

@babel/preset-react :  JSX로 작성된 코드들을 createElement함수를 이용한 코드로 변환해주는 바벨 플러그인을 내장합니다.

@babel/preset-typescript : 타입스크립트를 변환하기 위한 프리셋

@babel/preset-env : preset-env는 ES6+를 이전 버전으로 만들어주는 프리셋입니다. IE 지원을 위한 프리셋입니다.

 

 

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist",
    "target": "es5",
    "module": "esnext",
    "jsx": "react",
    "noImplicitAny": true,
    "allowSyntheticDefaultImports": true,
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": ["src"],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

compilerOptions : 컴파일 옵션을 지정해줍니다. 자세한 설명들은 아래 docs에서 확인해주세요.

TSConfig Reference - Docs on every TSConfig option

 

include : 지정한 폴더안에 있는 파일을 컴파일해줍니다.

 

exclude : include에 지정한 파일이나 패턴을 제외시킬 수 있습니다. 주의할 점은 include에 지정하지 않은 파일은 적용되지 않는다는 점입니다.

 

 

dist

dist는 distribution(유통시키다. 배포하다.)의 약자입니다.

dist폴더는 webpack.config.js의 설정에 맞게 번들화 시킨 파일들이 모여있습니다. yarn build를 하면 생성이 되며 이 파일은 배포할 때 사용하게 됩니다.

 

react파일들을 하나의 파일로 컴파일한 js 파일이라고 생각하시면 됩니다.

 

우리가 개발했던 모든 react 코드들이 ES6이전의 문법들로 변환되어 저장됩니다.

 

나중에 깃허브에 gh-pages를 통해 배포하는 글을 작성할 텐데요. 그때 dist폴더를 build로 변경한 후 배포해줘야합니다. 관련글에서 자세한 설명을 작성하겠습니다.