React(2)-CRA

개미는뚠뚠·2022년 9월 9일

목록 보기

2/4

CRA(creat-React-APP)

리액트 프로젝트 시작 전 필요한 개발환경을 세팅해주는 도구이다. CRA를 이용하면 하나의 명령어로 리액트 개발환경을 구축할 수 있기 때문에 처음 리액트를 접하거나 SPA(Single Page Application)환경을 구축할 때는 CRA를 통해서 리액트를 시작하도록 공식문서에서도 서술하고 있다.

CRA를 통한 프로젝트 구축

1.터미널에서 프로젝트를 시작하고자 하는 폴더에 진입.

$ cd [프로젝트를 구축하고자 하는 폴더]

2.프로젝트 설치
프로젝트를 시작하고자 하는 폴더에 있는지 확인(pwd 또는 ls 등의 명령어로 내 위치, 파일경로 확인) 후, 아래와 같은 명령어를 입력하여 리액트 프로젝트를 설치. 프로젝트 이름은 대문자로 작성하거나 ~'!()*^등의 일부 특수문자를 포함하면 에러가 생기기 때문에 소문자(kebab-case naming convention으로 작성하는 것이 일반적)로 작성하여 프로젝트를 설치.

$ npx create-react-app [프로젝트명]

3.로컬에 서버 기동
리액트 프로젝트의 로컬 서버를 가동시키기 위해 생성된 프로젝트 폴더에 진입하여 npm start 명령으로 통한 서버를 기동.

$ npm start

4.http://localhost:3000 이라는 로컬 서버주소를 확인

[초기 로컬 서버 기동 시 나오는 리액트 페이지]

CRA 디렉토리 및 파일의 구성

1.node_modules

npm으로 다운받은 패키지들의 소스 코드가 존재하는 폴더로 CRA에서 개발 환경에 필요한 패키지를 설치해주기 때문에 이미 여러 가지 패키지 디렉토리가 존재

2.gitignore

.gitignore 파일에는 용량, 보안 등 여러가지 문제로 Github 에 올리지 않아야 하는 파일을 추가

3.package.json

CRA 기본 패키지 외에 추가로 설치된 라이브러리 혹은 패키지의 종류, 버전 등의 정보가 기록되는 파일로 npm으로 설치하면, package.json의 dependencies에 라이브러리 혹은 패키지의 정보가 자동으로 추가됨.

3-1 dependencies
npm을 통해서 설치한 모든 패키지 리스트와 버전 확인이 가능하며, 관련된 패키지의 실제 코드는node_modules 폴더
3-2 scripts
리액트 프로젝트를 실행하기 위해서 사용할 수 있는 명령어를 관리
3-3 package-lock.json
npm을 사용해서 패키지를 설치하거나 업데이트하면 자동으로 생성되거나 수정되는 파일

4.public/index.html

리액트는 SPA(Single Page Application)로 하나의 index.html이 존재하며, 실제 웹 브라우저에 보여지는 파일이다. 리액트에서는 index.html 파일을 직접 수정하는 것이 아니라, index.js 파일을 통해 index.html 파일의 id가 root인 div 내부에 코드를 추가하여 화면에 그려지게 됩니다.
[public]CRA를 배포했을 때 실제 서버에 배포되는 디렉토리로, 서버 주소를 통해 접근하면(개발 서버의 경우는 http://localhost:3000) public 폴더에 들어가는 것과 동일하다.

5.index.js