INTRO
일반적으로 리액트 기반 프로젝트를 세팅할 때
CRA(Create React App)를 자주 사용할 것이다.
CRA에는 개발에 조금 더 빠르게 집중할 수 있도록 Webpack이나 Babel과 같은 설정들이 포함되어있는데,
이 설정들이 어떻게 숨겨져있는지에 대해 포스팅해본다.
1. CRA의 숨겨진 설정들
- React v18 기준, CRA로 프로젝트를 생성했으면, package.json -> scripts 에 다음과 같이 eject라는 스크립트가 있는 것을 볼 수 있는데, 이 스크립트는 CRA 의 숨겨진 설정들을 본인의 프로젝트로 꺼내오는 동작을 수행한다.
- 우선 어떻게 숨겨놓았는지부터 알아보자.
- 아래는 eject 를 수행한 뒤 새로 추가되거나 변경 된 파일들이다.
- CRA와 함께 설치되는 라이브러리인 react-scripts를 node_modules에서 찾아보면, 위에서 추가 된 파일들을 가지고 있는 것을 볼 수 있다.
- eject는 여기 있는 파일들을 가져와 프로젝트에 추가해주는 명령이다.
- 또한 package.json을 보면 의존성들도 상당히 많이 추가되는 것을 볼 수 있는데,
- 마찬가지로 react-scripts의 package.json에서 가져오는 것을 확인할 수 있다.
- 이제 가져온 설정들이 어떤 역할을 하는지 살펴보자.... 는 너무 많은 설정들이 있어서 일일히 정리하기는 힘들지 않나 싶다.
중요 사항들만 살펴보면
1. env.js : .env 파일에서는 보통 환경변수나 Secret key를 관리하는데, 이와 관련한 dotenv 라이브러리의 설정들을 가지고 있다.
2. getHttpsConfig.js : https 설정에 필요한 설정을 가지고있다.
3. modules.js, paths.js : jsconfig, tsconfig와 같은 설정 파일들에서 path alias를 가져와 baseURL과 매핑하여 결과를 반환하는 등 로컬에 있는 파일/모듈을 웹팩과 Jest, 나중에는 Storybook등이 어떻게 가져다가 사용할지와 확장자를 매핑하는 등의 역할을 수행한다. 수동으로 이런 작업을 해주는 경우 굉장히 귀찮은 작업이다.
이외에도 build시 동작하는 웹팩 설정, dev 서버를 띄웠을 때의 웹팩 설정, babel/css/file 에 대한 transform 설정 등의 파일이 있는 것으로 보인다.
전부 다 외우고 있을 필요는 없고, 실무에서는 필요할 때 적절한 설정을 찾아보고 빠르게 적용하는 능력이 요구된다.
2. 추가적인 내용
- 그래서 CRA는 숨겨진 설정들이 많고, 이 설정들이 참조하는 의존성들 중 deprecate 되거나 버그로 인해 변경되는 경우 많은 Contributer들과 facebook에서 대응하고있다.
(현재 버전은 5.0.1이고, 마지막 업데이트는 2022년 4월이다. 대응이 빠르진 않아보인다.)
따라서 CRA 를 eject해서 사용하지 않는 개발자는 유지보수를 덜 할 수 있게 된다.
- 그런데 만약 이 설정들을 추가/변경해야 할 경우가 생겨 eject를 하게 된다면, 유지보수는 개발자의 몫이 된다. 물론eject를 하지 않고 override해서 사용하는 방법도 있다. react-app-rewired, customize-cra를 찾아보면 된다.
- 그러나 언제까지나 만들어진대로 사용할 수는 없는 법이다.
예를 들어 최적화 과정에서 본인이 진행하는 프로젝트에서는 필요가 없는 설정의 경우는 제거가 필요하며,
webpack, babel 간 연동되는 설정들도 프로젝트의 목적 | 고객의 요구사항 등.. 에 맞게 수정되어야 할 경우가 있을것이다.
- 그래서 실무 레벨에서는 아무래도 CRA의 초기 세팅 그대로 사용하기에는 무리가 있을 것 같다.
-퍼가실 때는 출처를 꼭 같이 적어서 올려주세요!
'Dev > [React.js]' 카테고리의 다른 글
| [Next.js] husky와 lint-staged를 사용하여 버그를 줄여보자. (0) | 2023.06.23 |
|---|---|
| [React] JSX(TSX) 를 사용하는 방법 (0) | 2023.03.09 |
