CRA

CRA(Create React App) 방식으로 프로젝트를 생성하는 방식에 대해서 살펴본다.

React Project

npm을 이용하여 React Project Template 프로젝트를 생성할 수 있다.

이를 위해서는 NodeJS가 PC에 설치되어 있어야 한다. 설치 방법은 하단 문서를 참고한다.

pageNodeJS

설치 확인은 다음과 같은 명령으로 한다.

npm --version

프로젝트 생성

프로젝트 생성은 터미널에서npx 명령을 사용한다.

npx create-react-app 프로젝트이름

npx는 npm 5.2+ 버전의 패키지 실행 도구이다.

프로젝트 실행

생성한 프로젝트 폴더로 이동하여 프로젝트를 실행한다.

cd 프로젝트명
npm start

별도의 설정이 없는 한 3000번 포트에서 실행하며, 만약 3000번 포트가 사용중이라면 경고 메세지가 나오며 Y를 누를 경우 겹치지 않는 포트번호를 찾아 실행한다(3001, 3002, ...)

Git 관련 설정 해제

create-react-app으로 생성된 프로젝트는 자동으로 Git 프로젝트로 설정되기 때문에 별도의 저장소를 사용할 경우 이를 해제해야 한다.

프로젝트 생성 명령 뒤에 --skip-git 옵션을 추가하여 해결한다.

npx create-react-app 프로젝트이름 --skip-git

프로젝트 구조

프로젝트 폴더

• node_modules - npm으로 설치한 모듈의 위치

• public - 프로젝트에 포함될 정적 파일의 위치

• src - 프로젝트 소스 파일의 위치

  • App.css - 메인 컴포넌트 CSS 파일

  • App.js - 메인 컴포넌트 JS 파일

  • App.test.js - 메인 컴포넌트 테스트 파일

  • index.css - index.js에서 불러오는 기초 CSS 파일

  • index.js - 프로젝트 진입점

  • reportWebVitals.js - 프로젝트 상태 확인 및 서드파티(ex : 구글 애널리틱스) 연동 파일

  • setupTests.js - 테스트를 위한 JEST 설정 파일

• .gitignore - Git 제외 명단 작성 파일

• package-lock.json - 프로젝트 의존성 및 버전 관리용 파일

• package.json - 프로젝트 의존성 및 버전 관리용 파일

• README.md - 사용 설명서