NoN CRA로 React 프로젝트 시작하기

CRA를 사용하지 않으려는 이유

CRA(Create-React-App)을 사용하면 빠르게 React 프로젝트를 설정할 수 있다. npm create-react-app my-app 명령어 한줄로 프로젝트에 필요한 기본 패키지가 모두 설치되고 설정 파일이 모두 자동으로 생성되고 기초 파일까지 생성된다.

 

이렇게 편한 사용법을 이유로 지금까지 진행했던 프로젝트에서 많이 사용했다.

 

하지만 분명 편리한 방법이지만 한계점이 분명히 존재한다. 프로젝트의 방향성에 따라 프로젝트의 기존 설정을 변경해야할 때가 존재할 수 있다. CRA를 이용해 생성된 React 앱은 하나의 build 의존성을 갖고 모든 패키지와 설정 정보를 다른 곳에 보관하고 있다. 이로 인해 Webpack, Babel, Typescript 등의 설정을 커스터마이징 하고싶을 때는 npm run eject 명령어를 사용해야 한다. eject 명령어를 사용하면 CRA가 의존하고 있는 패키지들을 현재 앱의 dependency에 추가하고 설정 파일을 복사해 앱에 추가한다. 이러한 방식은 다시 원래대로 돌아갈 수 없는 단방향 작업을 실행하는 것이다.

 

심지어 설정할 방법이 생겼다 하더라도 CRA는 개발자의 상상 이상으로 많은 설정을 해주고 있었기 때문에 개발자 마음대로 커스터마이징 하려면 어느 곳을 수정해야 하는지 파악하기 쉽지 않을 것이다.

 

이러한 점을 미루어 보아, 개인이 개발하는 프로젝트에서는 CRA를 이용해 프로젝트를 시작해도 문제는 없을 수 있으나, 규모가 큰 프로젝트 혹은 많은 커스터마이징 설정이 필요한 경우는 CRA를 이용하지 않고 앱을 생성해서 설정하는 방향이 더 좋을 수 있다.

 

 

진행 방향성

이번에 새롭게 진행할 프로젝트에서 다음과 같은 방향성을 갖고 React 앱을 설정할 생각이다.

1. React와 React-Dom 패키지를 다운
   실제 React를 구성하는 중요한 패키지를 우선 설치
2. React 기반으로 작성된 코드를 번들링할 번들러 설치 및 설정
   가장 많이 사용하고 나도 사용한 경험이 있는 Webpack 번들러를 설치하여 설정할 예정이다.
3. 번들러에서 Jsx나 Tsx로 작성된 코드를 일반 JS로 변환시켜주는 트랜스파일러 설치 및 설정
   Webpack같이 많이 사용하고 사용한 경험이 있는 Babel을 이용할 것이다.
4. 강한 타입 지향 언어인 Typescript를 이용하기 위해 Typescript 설치 및 설정
5. 코드 작성 스타일을 정의할 수 있는 Prettier와 코드를 검사해 버그를 방지하는 ESLint를 설치 및 설정

 

아마 이 글을 포함해서 3~4개의 글로 이번 Non CRA 프로젝트를 정리할 예정이다.