CRA란?

CRA 공식 홈페이지에선 이렇게 설명하고있다. https://create-react-app.dev/docs/getting-started
싱글 페이지 리액트 앱을 만들기 위해 공식적으로 지원되는 방법. 이것은 현대적인 빌드 셋업을 다른 환경설정없이 제공한다.

한 마디로, CRA는 리액트로 앱을 만드는 많은 방법 중 하나이며, 그 중에서도 쉽게 리액트 앱을 만드는 방법인 것이다.

CRA 시작하기, 아래의 코드를 터미널에서 작성하면 된다.

npx create-react-app my-app
cd my-app
npm start

//npm이나 yarn으로 시작할 수 있지만 추천하지 않는다고한다.

npm init react-app my-app

yarn create react-app my-app

공홈에선 이미 설치 되어있다면 npx로 가장 최신 버전을 사용하기위해 npm install -g create-react-app 을 이용해 언인스톨하라고 적혀있다.
정확한 이유는 모르겠으나 아래 사이트에선 3가지 이유로 추천하지 않는다고한다.
1. 모듈이 업데이트 되었는지 안되었는지 확인이 불가능 합니다
2. 업데이트를 진행했을 때 변동사항이 생겨 다른 프로젝트에도 영향을 끼칠 수 있습니다.
3. create-react-app 같은 보일러플레이트에는 치명적입니다.

주로 모듈의 버전과 업데이트와 관련된 이슈였고, 이를 해결하기위해 npx 를 사용해 '모듈을 로컬에 저장하지않고, 매번 최신 버전의 파일만을 임시로 불러와 실행시킨후에, 다시 그 파일은 없어지는 방식을 쓴다.'

한 마디로, npx를 쓰면 항상 최신버전을 사용하기때문에 어떤 버전을 쓰는지 신경쓸 필요가 없어진다.

출처 : https://ljh86029926.gitbook.io/coding-apple-react/undefined/npm-npx

템플릿 사용하기

cra또한 귀찮은 작업들을 대신 해줘 React프로젝트를 쉽게 생성할 수 있도록 해주는 보일러플레이트 인데, 템플릿은 여기에 한 발 더 나아가 CRA 후 자주 사용하는 라이브러리나 프레임워크를 적용시키거나 불필요한 파일 삭제등을 해놓은 커스텀 설정같은것이다.

한 마디로, CRA후 다른 설정을 할 필요없이 바로 개발을 시작할 수 있는 것이다.

시간나면 나만의 템플릿을 만들어서 배포해보자.
https://mesh.dev/front-end-engineering/cra-custom-template