소개
Create React App (CRA)는 리액트 애플리케이션을 쉽게 생성하고 구성할 수 있는 공식적인 도구입니다. CRA를 사용하면 개발 환경 설정과 빌드 프로세스를 자동으로 처리하여 개발자가 더욱 효율적으로 리액트 앱을 시작할 수 있습니다. 이번 포스트에서는 CRA의 특징, 설치 방법, 사용법, 그리고 몇 가지 유용한 팁과 트릭에 대해 알아보겠습니다.
특징
CRA는 다음과 같은 주요 특징을 가지고 있습니다:
- 간편한 프로젝트 생성: 단 한 줄의 명령어로 리액트 앱 프로젝트를 생성할 수 있습니다.
- 개발 환경 설정 자동화: 개발 서버 설정, Babel 컴파일러, 웹팩 설정 등을 자동으로 처리합니다.
- 최신 기술 사용 지원: 최신 버전의 리액트, 자바스크립트, CSS, JSX 문법을 사용할 수 있습니다.
- 다양한 스크립트 제공: 개발, 빌드, 테스트 등을 자동화하는 스크립트를 제공합니다.
설치 및 사용법
CRA를 사용하기 위해서는 Node.js와 npm (또는 yarn)이 설치되어 있어야 합니다. 아래는 CRA를 설치하고 새로운 리액트 앱 프로젝트를 생성하는 단계입니다:
npm
npm 은 Node Packaged Manager의 줄임말로 Node로 만들어진 pakage 들을 관리해주는 툴입니다. 파이썬으로 생각하면 pip와 유사합니다.
마찬가지로 다음과 같이 버젼 확인이 가능합니다.
npm -v
6.13.6
npm 은 nodejs 를 설치 할 때 함께 설치되기 때문에 따로 설치할 필요 없습니다.
npx
npx 는 npm의 5.2.0 버젼부터 새로 추가된 도구입니다.
npx 가 존재하지 않았을 경우에는 npm을 통해 react app 을 생성했습니다.
npm install -g create-react-app
-g 를 통해 전역적으로 create-react-app 가 설치됨으로서 여러 문제점을 야기합니다.
CRA의 무거운 의존성 라이브러리들이 컴퓨터에 남는다.
CRA 버전 업데이트 시, 전역적으로 설치된 CRA를 재설치 해야 한다.
npx 를 사용하면 이러한 문제점들을 해결할 수 있습니다.
우선 npx 도 마찬가지 방법으로 버전 확인을 통해 설치 유무를 판단할 수 있습니다.
npx -v
6.13.6
설치하기 위해서는 npm 을 통해서 설치 가능합니다.
npm install npx -g
아래서 다시 보겠지만 npx 를 설치했다면 npx 를 통해 react app 을 생성할 수 있습니다.
npx create-react-app {app 이름}
최신 CPA 패키지가 다운로드가 되고 설정들을 세팅한 후에 CRA 패키지는 제거됩니다.
그렇기 때문에 무거운 의존성 라이브러리들도 남지 않고 함께 제거되는 이점이 있습니다.
설치가 완료되었다면 터미널에 입력합니다.
npm run start
개발 서버가 실행되고 http://localhost:3000에서 앱을 확인할 수 있습니다
