CRA 없이 React 앱 설정하기 (+ TS, Eslint/Prettier) — (0) 동기와 방향성

5 min readJul 3, 2022

시리즈

(0) 동기와 방향성
(1) Babel과 Webpack
(2) TypeScript와 React
(3) Eslint와 Prettier

Create React App을 사용하지 않고 앱을 설정하는 이유

React 프로젝트를 만들 때 가장 간편하고 빠르게 앱을 설정하는 방법은 Create React App(이하 CRA)을 활용하는 방법이다. npx create-react-app my-app 명령어 한 줄로 필요한 모든 패키지가 설치되고 필요한 설정파일이 자동으로 생성되며 시작하기 위해서 필요한 기본 파일까지 자동으로 생성된다. 게다가 공식 문서에서 제공하고 있는 Custom Template을 이용하면 추가적으로 이용하고자 하는 스택에 따라서 자동으로 설정을 해주기까지 한다. 이 모든 이유 때문에 React의 공식 문서에도 새로운 앱을 만드는 설명 중 가장 첫 번째로 등장하는 것이 CRA이다.

이렇게 편리한 도구이지만 그 한계점이 명확하다. 어떤 템플릿을 선택하더라도 프로젝트의 진행방향에 따라서 기존의 설정 값을 변경해야만 할 때가 발생할 수 있다. CRA는 CRA를 통해서 생성된 React 앱이 단 하나의 build 의존성을 가지도록 하면서 의존하고 있는 모든 패키지와 그의 설정 정보를 다른 곳에 보관하고 있다. 따라서 추가적으로 설정을 개인화하고 싶다면 npm run eject 명령어를 사용해야한다. 해당 명령어를 실행하면 CRA가 의존하고 있는 패키지들을 모두 현재 앱의 dependency에 추가하고 설정 파일을 복사해서 앱에 추가한다. 따라서 이 명령어는 한 번 실행하면 되돌아 갈 수 없는 단방향 작업을 실행시킨다.

하지만 추가적으로 설정할 수 있는 방법이 생겼다고 해서 그 설정이 편리한 것은 아니다. CRA는 (내가) 상상하는 것보다 훨씬 더 많은 설정을 해주고 있기 때문에 내가 원하는 설정을 위해서 어느 곳을 수정해야 하는 지 파악하기 상당히 어렵다. 그래서 평소에 간단한 앱을 만들고 배포하기 위해서는 고민하지 않고 CRA를 활용해서 앱을 만들겠지만, 좀 더 큰 프로젝트, 다시 말해서 확실히 더 많은 개인화 된 설정이 필요한 프로젝트라면 자체적으로 앱을 생성하고 설정해서 더 개인화 된 환경을 만들 필요가 있다.

참고 자료

우선 아래 두 글에서 가장 많은 도움을 받고 방향성을 정했다.

Creating a React App… From Scratch.

React 공식 문서에서 링크하고 있는 앱 설정 튜토리얼 글이다. 2018 년에 작성된 글이기 때문에 그 동안 수 많은 변화가 있었기 때문에 있는 그대로를 적용하기는 어렵지만 8천 개의 육박하는 좋아요를 받은 글인만큼 전체적인 설정 과정과 그 의미와 필요성에 대해서 자세하게 설명하고 있다.

doonguk/webpack-boilerplate

이 Github Repo는 앞의 글처럼 공신력이 높은 글은 아니지만 한글로 된 글이고 각 과정을 좀 더 쉽고 이해가는 말로 설명했을 뿐 아니라 좀 더 다양하고 세부적인 설정 (이미지 파일에 대한 처리, 절대경로 설정, 개발 서버와 실 서버 환경 분리 등)을 설명하고 있어서 참고하기에 좋았다.

그 외의 자잘한 부분들을 설명하고 있는 여러 글을 참고했지만 결국 가장 많이 참고한 것은 다른 개발자가 작성한 2차 자료가 아니라 1차 자료라고 할 수 있는 공식 문서이다. CRA를 활용하지 않는 이유 중 하나는 CRA가 내가 알지 못하고 사용할 생각이 없는 많은 설정들을 하고 있기 때문이었는데, 직접 설정하면서 공식 문서에서 제공하는 설명을 토대로 각 설정이 내 앱에 필요한 설정인지를 공부하고 파악하면서 추가했다.