npm init으로 시작하는 typescript react 프로젝트 (2)

Hoony·2022년 7월 6일
0

이번 글에서는 webpack과 babel을 설치하고 설정한다.

webpack에 대한 설명을 이 시리즈에서 자세하게 다루기는 어렵다.
기본적인 사용법을 안다고 가정한다.

잘 모른다면 아래 링크를 참조하고 보면 좋다. (velog 로 이전예정)
https://honorable-curio-697.notion.site/webpack-880ff2082f5344fb8d5057db39bb637e

transpile vs compile 무슨차이?

React와 관련된 글들을 보다보면 transpile 또는 compile에 말을 들어봤을 것이다.
많은 글들이 혼용하여 사용하고 있는데, 맥락은 이렇다.

컴파일이나 트랜스파일이나 궁극적으로 하는 일은
한 언어를 다른 언어로 변경시켜 주는 것이다.

c++과 같은 컴파일 언어의 코드가 컴파일 될 때
high-level(c++) 언어에서 low-lovel(bytecode)언어로 변경된다.
공부할 때, 컴파일이란 말을 많이 써왔기에 컴파일이란 단어가 익숙하다.

트랜스파일은 비슷한 레벨의 언어로 변경될 때라고 이야기되고 있다.
이해하기 쉽게 설명하자면, typescript나 javascript는 코드를 작성하는 수준이 비슷하다.
여기서 비슷하다는 것을 추상화된 수준이라고 표현하고 있다.
그래서 typescript를 javascript로 변경되는 것이나
javascript의 상위버전에서 하위버전으로 변경하는것을 트랜스파일이라고 부른다.

컴파일과 트랜스파일에 대해서 stackoverflow에서 다양한 의견들을 말하고 있다.
https://stackoverflow.com/questions/44931479/compiling-vs-transpiling

결론적으로 이 시리즈내에서
컴파일, 트랜스파일, 컴파일러, 트랜스파일러라는 용어를 혼용해서 사용할 수 있으며
'다른 언어를 변경한다'라는 의미로 사용한다.

Babel 관련 모듈 install

babel은 상위 javascript 문법으로 작성된 코드를 하위 문법으로 트랜스파일 한다.
타입스크립트 설치하면 같이 설치되는 tsc로 트랜스파일하는 방법도 있지만
babel도 typescript to javascript, 상위 js to 하위 js를 모두 지원하고
다양한 트랜스파일 옵션을 지원하기 때문에 babel을 사용하는것이 더 좋다.

babel v7 이상부터는 @babel/* 형태로 포함되었다고 한다.
따라서, babel-core, babel-cli와 같은 모듈들은 legacy이다.

webpack에서 babel-loader를 통해 빌드할 예정이기 때문에
@babel/cli를 설치 하지 않는다.

npm install -D @babel/core @babel/preset-react @babel/preset-env
npm install -D @babel/preset-typescript @babel/plugin-transform-runtime babel-loader
  • @babel/core babel core module
  • @babel/preset-react react의 jsx를 js로 transpile
  • @babel/preset-env esNext(es6이후)를 es5로 trasnpile
  • @babel/preset-typescript typescript를 javascript로 transpile
  • @babel/plugin-trasnform-runtime codesize를 줄이는 플러그인
  • babel-loader webpack에서 babel을 로드하기 위해 사용

.babelrc 바벨 설정하기

babel 설정 파일은 3가지 방식으로 만들 수 있고, 같은 효과를 낼 수 있다.
그럼에도, 각 파일 형식은 서로 다른 특징들을 가지고 있으니 상황에 따라 달리 사용하면 된다.
이 프로젝트는 .babelrc를 사용하기로 한다.

  • .babelrc 특정 경로에만 적용
  • babel.config.js 루트에서 모든 파일을 동일하게 적용 (API 노출 ?)
  • babel.config.json 루트에서 모든 파일을 동일하게 적용 (캐싱에 복잡?)

https://stackoverflow.com/questions/60288375/when-to-use-babel-config-js-and-babelrc
각 파일별 차이점에 대해서는 위 링크에서 이야기되고 있다.

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react",
        "@babel/preset-typescript"
    ]
}

위에서 설치한 preset들을 "presets"의 Array에 넣어준다.
좀 더 상세한 설정도 있는데 이 프로젝트를 진행하면서 필요하다면 추가하겠다.

webpack 관련 모듈 install

bundler를 webpack으로 정한 이유는
webpack, rollup, parcel 중에서 가장 유명하고 popular하기 때문에 정했다.
최근에 실제로 webpack보다는 rollup이나 parcel을 더 많이 쓴다고 한다.

npm install -D webpack webpack-cli webpack-dev-server
npm install -D css-loader style-loader file-loader
npm install -D html-webpack-plugin clean-webpack-plugin
  • webpack webpack 코어 모듈
  • webpack-cli webpack command 를 위해
  • webpack-dev-server 개발 환경에서 memory에서 번들하기 위해
  • css-loader css 해석 모듈
  • style-loader css 해석 모듈
  • file-loader file 해석 모듈
  • html-webpack-plugin bunlding된 파일을 html에 linking
  • clean-webpack-plugin 이전 파일 제거

webpack.config.js로 webpack 설정하기

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

const path = require('path');

module.exports = {
    mode: 'development',
    entry: './src/index.tsx', // Root File
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.(ts|js)x?$/,
                use: 'babel-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
                use: "file-loader"
            }
        ]
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js" ]
    },
    plugins: [
        new HtmlWebpackPlugin({ template: "./src/index.html"}),
        new CleanWebpackPlugin(),
    ]
}
  • mode 설정은 지금 따로 하지 않는다.
  • entry root file인 /src/index.tsx 로 지정 (경로가 다르다면 변경하면 된다.)
  • output build후 파일들을 ./dist 하위에 생성되게
  • module 일반적으로 js가 아닌 파일들을 어떻게 해석할지 알려준다고 보면된다.
    - 예를들어, scss를 쓴다면 'sass-loader'를 설치하고 추가하면된다.
  • resolve 경로 및 확장자 생략할 수 있는 설정 (ts ,tsx, js를 import시 확장자 붙여주지않아도됨)
  • plugins plugin은 /dist 하위의 포맷을 변경하는데 사용된다고 보면 편하다.

초기 설정 완료

설정을 완료하고 난 후의 프로젝트 구조이다.

잘 실행 되는 것을 확인할 수 있다.

profile
아는 만큼 보인다

0개의 댓글