TIL: 2022-11-24

⚙️ 오늘 배운 주제

webpack으로 리액트 개발 환경 구축하고 빌드하기

 

🐹 오늘의 기분

어제는 html, css, javascript로만 구성된 프로젝트를 webpack으로 빌드해보는 연습을 했다. 오늘은 이 webpack을 리액트에 사용해보는 연습을 했다. 이번에도 전에 만났던 페어분과 매칭이 되어서 편하게 할 수 있었다. 여러 오류를 만난 끝에 빌드와 깃헙페이지 배포까지 했다. 시간이 약간 남아서 오랜만에 머리도 좀 식힐 겸(?) 섹션 3에서 만들어뒀던 투두리스트 프로젝트를 손대보았다. 

버튼 클릭 말고 input 필드에서 엔터를 눌렀을 때에도 태스크가 추가되도록 하고 싶었는데, 이상하게 한글 입력 후 바로 엔터만 누르면 

 

🗝 키워드

bable, react-dom, react

 

🗣 스스로에게 설명

TIL: 2022-09-28

이 날 썼던 TIL에서 리액트 개발을 더 쉽게 하기 위해 사용되는 커맨드가 create-react-app이라고 써놓았다.

오늘은 이 create-react-app, 이하 CRA 없이 리액트 개발환경을 구축하는 법을 배웠다.

 

CRA는 개발자가 어떤 도구를 쓰는지 모르기 때문에 필수적이라고 간주되는 다수의 라이브러리를 알아서 설치해준다.

이 말인 즉슨, 현재 내 프로젝트에 필요하지 않은 라이브러리도 설치될 수 있다는 말이다.

이는 빌드 시 파일을 불필요하게 무겁게 만들 수 있어 일부 개발자들은 webpack을 따로 사용하게 됐다고 한다.

 

[Webpack] Webpack을 이용한 React 개발 - googy-blog

 

Webpack과 Babel을 이용한 React 개발 환경 구성하기

 

[React] 웹팩으로 빌드하고 깃허브 페이지 배포하기

위 세 링크를 참고하여 환경을 만들었다.

output의 파일 이름을 bundle.[hash].js로 하면 파일이름의 [hash] 부분에 해시함수가 적용된 일종의 암호가 붙는다.

이렇게 번들 파일명을 동적으로 설정하면 빌드할 때마다 번들 파일이 새롭게 생성되면서 기존 파일을 따로 삭제해줘야하는 번거로움이 생길 수 있다. 

그럴 때 webpack.config.js 파일의 output 부분에서 clean 옵션을 지정해줄 수 있다.

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    filename: "bundle.[hash].js",
    // true로 설정하면 번들 파일이 새로 생성될 때마다 기존 파일이 삭제된다.
    clean: true,
  },

 

바벨 관련 플러그인을 설치한 후 .babelrc 파일을 만들어 아래와 같이 입력한다.

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

혹은 babel.config.js를 만들어 이렇게 쓸 수도 있다.

module.exports = {
  presets: [
    ['@babel/preset-env'],
    ['@babel/preset-react', { runtime: 'automatic' }],
  ],
};

 

html-webpack-plugin의 역할이 무엇인지 어림잡아 알 수 있게 되었다.

  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src", "index.html"),
    }),
  ],

이렇게 쓰면, 번들링 시 src 폴더의 index.html이라는 파일을 템플릿 삼아 index.html 파일을 만들겠다는 뜻으로 이해했다. 

로더에 비해 플러그인의 역할은 너무 다양해서 한 번에 알기가 어려웠는데 쓸 때 그 용도를 잘 파악해야한다는 게 중요하다는 걸 느꼈다.

괜히 필요해보인다고 아무거나 갖다썼다가 더 무겁게 만들 수도 있겠다는 생각이 들었음...

 

🔍 공부가 더 필요한 부분

path 모듈을 왜 쓰는지, resolve와 join의 차이