[TIL] CRA를 사용하지 않고, 직접 react, react-dom, babel, webpack, HMR(hot-module-replacement)를 세팅해보자!

React 앱을 만들기 위해 필수적인 개발 도구들 : Babel, Webpack, HMR(hot-module-replacement)...

---

Babel

현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ 코드를 이전 버전의 JavaScript로 변환하는 데 주로 사용되는 도구 체인입니다. 다음은 Babel이 할 수 있는 주요 작업입니다.

• Transform syntax
• Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js)
• Source code transformations (codemods)

https://babeljs.io/docs/en/

Babel · The compiler for next generation JavaScript

또한 babel은 jsx 문법도 convert 해준다.

---

Babel 패키지 설치

npm i -D @babel/core @babel/cli @babel/preset-react

@babel/preset-react : react 관련 코드들을 compile 해준다.
@babel/cli : 터미널에서 명령을 통해 babel을 적용시킬 수 있도록 도와주는 패키지.
@babel/core : babel을 사용하기 위해서 필수적으로 필요한 패키지.

-D를 해주면 설치한 패키지들이 아래의 빨간 박스처럼 devDependencies에 추가된다.
-D를 넣지 않으면, 초록 박스의 dependencies에 추가됨.

---

Babel로 JSX complie

npx babel 뒤에 컴파일을 원하는 파일명을 붙이고, 다운로드한 preset패키지를 --presets=@babel/preset-react를 작성해주어 해당 파일을 컴파일해보자.
나의 경우에는 index.js 와 GreetingText라는 파일을 컴파일 돌려보았다.

 

기존의 JSX문법에서는 나타나지 않았던, pure JavaScript의 문법으로 컴파일된 것을 볼 수 있음.

---

babel.config.json

babel을 조금 더 간편하게 작동시키기 위해서, babel.config.json 파일을 생성해보겠다.
configure babel 카테고리에 들어가서 JavaScript버전의 코드를 복사하였음.
https://babeljs.io/docs/en/configuration

나는 presets에 기존의 preset-react와 더불어 preset-env를 설치해주었고, plugin는 설치한 것이 없어서 빈칸으로 두었음.

module.exports = function (api) {
    api.cache(true);

    const presets = ["@babel/preset-env", "@babel/preset-react"];
    const plugins = [];

    return {
        presets,
        plugins,
    };
};

이렇게  babel.config.json을 생성해주면 긴 명령어를 사용하지 않고 npx babel 만으로도 작동을 시킬 수 있다!

npx babel src/components/GreetingText.js

아까 preset-react를 했을 때와는 또 다르게 preset-env까지 더해서 컴파일하였더니,
const가 var로 변경되었고, useState부분도 인덱스로 나뉜 문법으로 나타내 졌다.
또한, 애로우 펑션도 펑션으로 바뀐 것을 볼 수 있다.

---

webpack

babel이 컴파일러라면, webpack은 번들러이다.

번들러(Bundler)란?
분리된 JavaScript와 CSS 모듈 코드를 브라우저에 최적화된 여러 개의 파일로 결합한다.
React 애플리케이션에서 널리 사용되는 번들러에는 Webpack과 Browserify가 있다.

https://webpack.js.org/

React는 SPA로 하나의 JS파일을 HTML에서 로드함으로써 유저들에게 보이는데,
여기서 webpack이 하나의 JS파일을 만드는 과정을 도와주게 된다.

---

과정을 잠깐 보면 webpack.config.js에서 dist라는 폴더 안에 bundle.js라는 파일을 생성하고 실행하면,
내 경우에는 page.html 대신 index.html에서 script를 로드해, SPA를 만들 수 있게 되는 것이다.

---

Webpack 패키지 설치

npm i -D webpack webpack-cli babel-loader html-webpack-plugin

webpack : webpack을 실행하기 위한 필수적인 패키지
webpack-cli : 터미널에서 webpack을 작동시키기 위한 패키지
babel-loader : webpack이 파일을 불러들일 때도 jsx를 읽어야 되는데 webpack은 jsx를 못 읽기에,
                       번들러 하는 과정에서도 babel을 실행시킬 수 있는 패키지.
html-webpack-plugin : bundle.js를 index.js에 적용을 해서, 최종적인 html 파일로 만들어 주는 역할을 한다.

---

webpack.config.json

webpack을 실행하기 위해 필요한 환경설정들을 해주자.

디렉터리 최상단에 webpack.config.json 파일을 생성하고

const path = require("path");

module.exports = {
    mode: "development",
    entry: "./src/index.js",
    
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js",
    },

    module: {
        rules: [{ test: /|.js$/, use: "babel-loader" }],
    },

    optimization: { minimizer: [] },
};

path : dist 폴더가 만들어지고, 그 안에 output 된 결과가 나오게 됨
filename : output 된 결과의 filename 지정
rules : /|.js$/ 은  모든 js파일들을 읽겠다는 뜻.
optimization : webpack은 기본적으로 js파일을 압축하기로 되어있음.
                       하지만 babel이 제대로 작동하는지 봐야 하기 때문에 일단은 빈 배열로 생성.

---

webpack을 실행해보면, dist 폴더 안에 bundle.js이 생성된 것을 볼 수 있다.

npx webpack

bundle.js에서는 내가 작성했던 코드들을 다 합쳐놓은 결과물을 볼 수 있다.

---

webpack.config.js 파일에 mode 옵션을 추가해주면 에러가 해결된다.

---

마지막으로 html-webpack-plugin 패키지를 추가해보자.

webpack.config.js의 최종 코드

---

추가 후, 다시 실행해보면 dist폴더 안에 index.html 파일도 생성된 것을 볼 수 있음.

npx webpack

또한 나머지는 그대로이고, bundle.js가 더해져서 script형태로 나타나, 최종적인 html 파일이 만들어졌다.

해당 html 파일을 열면, 제대로 작동하는 것을 볼 수 있다.

---

HMR(Hot-Module-Replacement)

어떤 코드를 수정한다면 다시 번들링을 해주어야 최종 파일에 코드들이 반영되는데,
해당 기능을 사용한다면 모든 종류의 모듈을 새로고침 할 필요 없이 런타임에 업데이트할 수 있다.
https://webpack.js.org/concepts/hot-module-replacement/

npm install -D webpack-dev-server

webpack.config.js에 아래의 옵션을 추가해준다.
dist 파일에 업데이트가 발생할 때마다 런타임으로 업데이트가 실행된다.

 

터미널에 명령어를 실행시키고,

npx webpack serve

다른 코드들을 수정한 후 다시 따로 번들링 하는 것 없이 Loopback의 포트번호로 들어가면, 제대로 잘 적용되어 있는 것을 볼 수 있다.

---

React로 작지만 소중한 여러 개의 프로젝트를 해보았지만 늘 CRA로 간단하게 환경설정을 해서,
CRA를 사용하지 않는 환경설정이 이렇게 복잡한 줄은 몰랐다.
현업에서는 보통 CRA를 쓰지 않을 것 같은데...ㅠ
생각보다 더 많은 부분을 고민하고, 의논해서 결정해야 한다는 것을 느껴볼 수 있는 시간이었다.

또한 CRA의 단점을 구글링 하다가, 다른 환경 설정들이 더 있다는 것을 보았는데 특히 vite..!
ESbuild는 빠른 JS 빌드 툴이고, vite는 ESbuild를 기반으로 만들어진 프런트엔드 빌드 툴이다.
빌드가 매우 빠르다고 하여, 다음번에 각 잡고 한번 공부해보고, 내 프로젝트에 도입해볼 수 있는 기회가 있다면 좋을 것 같다. 아직 환경 설정 관련으로는 모르는 단어들 투성이지만, 천천히 알아가 보자.

---

[출처 : 제로베이스 react 이론,

 https://ko.reactjs.org/docs/glossary.html

React 기술 용어 모음 – React

https://webpack.js.org/

webpack

https://babeljs.io/docs/en/

]