Create React App은 단일 페이지 React 애플리케이션을 생성하는 공식 지원 도구다. 별도의 설정 없이 최신 빌드 환경을 제공한다.
빠른 시작
React 앱을 빠르게 시작하려면 다음 명령을 사용한다. npx는 npm 5.2 이상 버전에 포함되어 있다. 이전 버전에 create-react-app을 전역으로 설치했다면 최신 버전을 사용하기 위해 npm uninstall -g create-react-app 또는 yarn global remove create-react-app 명령어로 제거하는 것을 권장한다.
npx create-react-app my-app
cd my-app
npm start명령 실행 후 http://localhost:3000/ 에서 앱을 확인할 수 있다. 배포 준비가 완료되면 npm run build 명령어로 최적화된 번들을 생성한다.
npm run build앱 생성
로컬 개발 환경에는 Node.js 14 이상 버전이 필요하다. (서버에는 필수가 아니다.)
npx 사용
npx create-react-app@latest my-appnpm 사용
npm init react-app my-appYarn 사용
yarn create react-app my-app템플릿 선택
앱 생성 시 --template [template-name] 옵션을 추가하여 템플릿을 선택할 수 있다. 템플릿을 선택하지 않으면 기본 템플릿이 사용된다. 템플릿 이름은 cra-template-[template-name] 형식이지만, [template-name]만 제공하면 된다.
npx create-react-app my-app --template [template-name]예시: TypeScript 앱 생성
npx create-react-app my-app --template typescript패키지 매니저 선택
CLI는 create-react-app을 실행하는 도구에 따라 npm 또는 Yarn을 사용하여 의존성을 설치한다.
# npm 사용 시
npx create-react-app my-app
# Yarn 사용 시
yarn create react-app my-app출력 결과
위 명령어를 실행하면 현재 폴더 안에 'my-app'이라는 이름의 디렉터리가 생성된다. 이 디렉터리 안에는 초기 프로젝트 구조와 필요한 의존성이 설치된다.
my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
└── src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js설치 완료 후 프로젝트 폴더로 이동한다.
cd my-app주요 스크립트
새로 생성된 프로젝트 내에서 다음 내장 명령어를 실행할 수 있다.
npm start 또는 yarn start
개발 모드로 앱을 실행한다. 브라우저에서 http://localhost:3000 을 열면 앱을 볼 수 있다. 코드 변경 시 페이지는 자동으로 새로 고침된다. 빌드 오류 및 린트 경고는 콘솔에서 확인 가능하다.
npm test 또는 yarn test
대화형 모드에서 테스트 와처를 실행한다. 기본적으로 마지막 커밋 이후 변경된 파일과 관련된 테스트를 실행한다.
npm run build 또는 yarn build
배포용 앱을 build 폴더에 빌드한다. 프로덕션 모드에서 React를 올바르게 번들링하고 최상의 성능을 위해 빌드를 최적화한다. 빌드 결과물은 축소(minified)되며 파일 이름에 해시가 포함된다. 앱은 배포할 준비가 된다.
댓글
댓글 쓰기