React + TypeScript + Webpack + Babel (CRA와 npm init -y의 차이)

React + TypeScript + Webpack + Babel 환경 구축 공부 정리를 해보겠다.

우선 가장 첫번째로 프로젝트를 만들어야 하는데 나는 보통 프로젝트를 시작할때 CRA(creat-react-app)를 터미널에 적어서 시작을 하는 편이다.
아직 큰 프로젝트를 경험해보지 못했기 때문에 이 방법이 맞는것 같지만 다른 고수분들의 블로그 글을 보니 cra가 아닌 npm init -y로 시작해서 package.json에 따로 설정을 해주길래 이게 무슨 차이가 있을까 하고 찾아보았다.

CRA

보통 리액트를 시작하면 가장 먼저 배우는것 CRA(creat-react-app)은 React 프로젝트를 빠르게 초기설정하고 구성할 수 있게 해준다.
초보자나 가벼운 프로젝트에 알맞으며 복잡한 빌드 요구사항이 있는 프로젝트에는 제한적일 수 있고 표준 설정을 벗어나는 커스텀 설정이 어려울 수 있다.
(CRA는 초기 구성을 추상화하여 제공하므로 사용자 정의 설정을 쉽게 추가하기 어려울 수 있다.)

npm init -y

우선 npm init과 npm init -y의 차이를 알아보자
npm init과 npm init -y는 package.json 파일을 초기화하고 생성하는 npm 명령어의 두 가지 버전인데 이들 간의 주요 차이는 초기화 프로세스에서 사용자 입력을 필요로 하는가(npm init) 아니면 기본값을 사용하느냐(npm init -y)에 있다.
찾아본 결과 npm init후 설정을 전부 기본값으로 하면 npm init -y와 같은 결과를 얻을 수 있다.

그러므로 npm init -y로 시작하는 프로젝트는 완전히 사용자 정의할 수 있으며, 필요한 설정과 의존성을 원하는 대로 추가하고 구성할 수 있다.
이는 더 많은 유연성과 컨트롤을 제공하지만 초기 설정에 시간이 더 소요될 수 있다.

요약 : 가벼운 프로젝트는 CRA, 복잡한 프로젝트(커스텀)는 npm init -y