· 
React 환경을 쉽게 구축할 수 있도록 보일러 플레이트인 create react app 를 사용하면 쉽게 환경을 찍어낼 수 있을지는 몰라도 원초적인 메커니즘을 이해하지 못하면 트러블 슈팅의 어려움, 불필요한 라이브러리 사용으로 오버헤드 유발 등 다른 문제를 유발할 수 있다.
물론 CRA에는 포편적으로 필요한 기능이 잘 녹아져 있다.
CRA 는 내부에서 어떤 것을 사용하여 구현되어 있는 것일까? 궁금하니 직접 React 환경을 만들게 될 때 사용되는 라이브러리에 대해 알아보도록 하자
info
아래의 글을 참고하여 작성되었습니다.
note
CRA를 안 쓰고 직접 구현하는 만큼 필요한 의존성을 선택하여 추가할 수 있습니다.
아래에 서술된 리스트는 그래도 개발을 위해서 필수적으로 사용되는 standard 한 친구들에 대해서 나열해 놓았습니다.
라이브러리 심플 설명
| 라이브러리 | 설명 |
|---|---|
| webpack | |
| webpack-cli | 1. cli으로 webpack을 사용할 수 있도록 도와줌 2. webpack4 부터 필요함 |
| webpack-dev-server | server를 열어줌 |
| @babel/core | |
| @babel/preset-env | 함께 사용되어야 하는 Babel 플러그인을 모아 둔 것 |
| @babel/preset-react | Babel react 프리셋 |
| babel-loader | |
| react-hot-loader | hot으로 변경된 부분만 새로고침 없이 업데이트를 할 수 있지만 react의 state가 죽어버리므로 이 문제를 해결하는 라이브러리 이다. |
| react | react component를 사용할 수 있게 도와줌 |
| react-dom | react를 렌더링 시켜줌 |
| html-loader | 1. 웹팩이 html 파일을 읽어서 html 파일을 빌드할 수 있게 도와줌 2. 웹팩에서 html으로 loader해서 빌드하면 장점은 html에 자동으로 빌드된 js가 추가되는점 또한 최적화 인것같다 |
| html-webpack-plugin | |
| css-loader | 웹팩이 css 읽도록 도와줌 |
| mini-css-extract-plugin | 웹팩의 빌드 결과물인 css를 html에 삽입할 때 사용됨(css를 파일로 추출) |
| clean-webpack-plugin | 1. 기본적으로이 플러그인은 성공적으로 다시 빌드 한 후 webpack의 output.path 디렉토리에있는 모든 파일과 사용하지 않는 모든 웹팩 자산을 제거합니다. 2. {} 으로 묶어서 사용 |
라이브러리 딥 설명
webpack
webpack 4 이상으로 버전이 올라가면서 기본적인 환경설정이 추가되었다.
대부분이 webpack 가이드가 v4 이하로 설명되면서 혼란스러운 부분이 몇가지 있다.
가장 중요한 부분은 webpack 실행 전 mode 옵션을 필수로 추가해야만 한다.
때문에 webpack 으로 trans된 파일을 실행 시 process.env.NODE_ENV 환경변수 값이 undefined 에러가 발생한다.
v4부터는 실행 시 아래와 같이 mode를 지정해야 한다.
| 모드 | 명령어 |
|---|---|
| 개발 | webpack --mode development |
| 제품 | webpack --mode production |
tip
- config에 mode를 넣어줘도 된다.
- config 지정 시
.js확장자를 지정해야 함webpack --config ./config/webpack.config.prod.js - mode에서 none는 안 되는 것으로 확인된다.
이외에도 기본적인 config가 내장되어 있는 등 변경된 부분이 많다.
위의 문제는 기존 레퍼런스 중에서 가장 많이 발생할 수 있는 문제라 서술되었다.
실패 시 사진
webpack-cli
버전업이 되면서 더 이상 webpack-dev-server 가 실행되지 않는다. webpack serve 으로 호출해야한다.
하지만 위와 같이 호출해도 똑같이 환경변수에 대한 문제가 발생한다.
config에서 mode를 설정하지 않으면 webpack serve --mode development --env development 으로 호출한다.
참조
webpack-dev-server
React는 babel으로 trans된 파일이 webpack을 통해 합쳐진 상태로 렌더링 되어야 합니다.
VSCode의 익스텐션인 Live Server와 같이 선행 작업으로 Webpack의 컴파일러를 거치지 않은 HTML을 출력하게 하면 수정된 내용이 반영되지 않습니다.
그렇기 때문에 파일이 변경되면 webpack build → server 의 과정을 거쳐야하는데 webpack-dev-server 를 사용하면 편리하게 구현할 수 있습니다.
react-hot-loader
적용방법은 아래와 같습니다.
yarn add --dev react-hot-loader설치- devServer에
hot: true설정
- 최상위 컴포넌트에
import { hot } from "react-hot-loader";와export default hot(module)(App);추가
신기하게 babel에 plugins을 지정하지 않아도 동작한다.
이전의 export 구분
마무리
CRA 대비 직접 구현해 보면 알 수 있지만 React 환경에 거의 필수인 Babel, Webpack에 대해 알게 된다.
특히 Webpack 의 기능은 무궁무진하다. 해당 메커니즘을 알게 되면 React 환경 이외에도 JS 프로젝트에서 아주 많은 곳에서 사용되므로 CRA 대신 바닥부터 만들어보면서 생긴 경험치는 나중에 많은 도움이 될 것이다.
원래는 실제로 구현한 프로젝트 코드와 구현 방법까지 설명하려고 했지만 구현 당시 프로젝트가 독립된 Repo가 아니라서 해당 글을 고려하지 않은 바탕으로 여러 번 리펙토링 되면서 해당 글만을 위한 코드로 뽑아오기가 애매해졌다.
그래서 아쉬운 마음에 구현하면서 사용된 의존성 리스트와 트러블 슈팅 내역에 대해 공유하게 되었디.
처음 구현할 땐 의존성 끼리 오류가 너무 많아서 고생했습니다ㅠㅠ
읽어주셔서 감사합니다 :)