CRA란?

Create React App의 약자이다
React를 이용해 웹 애플리케이션을 개발하기 위해서 필요한 도구들을 모아놓은 툴체인 이다

툴체인 : 여러가지 도구(Tool)등을 연결해 둔 것

React는 UI를 구축하기 위한 자바스크립트 라이브러리이기 때문에, UI외의 많은 기능들을 위해 다른 패키지가 필요하다
필요한 패키지를 다운로드 받고, 서로 호환성을 맞추고, 환경설정하는 것은 너무 번거로운 일이다.
그래서 React와 필요한 도구들을 미리 조합해서 설정해둔 툴체인을 만들어 두고 이를 이용해서 환경을 구축하는 방식을 사용한다.

추천 툴체인

• React를 배우고 있거나 새로운 싱글페이지 앱(SPA)을 만들고 싶다면 Create React App
• 서버 렌더링 Node.js 웹사이트를 만들고 싶다면 Next.js
• 고정적인 콘텐츠 지향적 웹사이트를 만들고 싶다면 Gatsby
• 컴포넌트 라이브러리 혹은 이미 있는 코드 베이스에 통합을 하고 싶다면 더 유연한 툴체인

CRA를 통해 구축한 프로젝트는 SPA라는 특징을 갖고 있다

• Single Page Applicaiton
• Page === HTML
• 즉, HTML이 하나인 웹 애플리케이션을 의미한다고 볼 수 있다
• 여러 HTML을 이동하면서 화면을 변경하는 것이 아니라 하나의 HTML안에서 자바스크립트를 이용해 모든 처리를 다 함

CRA를 이용해 React 실행환경을 구축하고
해당 폴더를 vscode에서 열면 다음과 같은 폴더들이 생성된것을 볼 수 있다

node_modules : NPM으로 설치한 패키지들이 실제로 저장되는 곳
.gitignore : 버전관리 시스템인 git에서 사용하는 특별한 파일로 이 파일안에 기록된 파일이나, 폴더들은 git으로 관리되지 않는다. (용량이 크고 따로 소스 코드의 변화를 관리할 필요가 없는 node_modules 등이 포함되어 있음)

CRA를 이용해 프로젝트 환경을 구성하면 기본적으로 git init 과정이 실행됐기 때문에 명시적으로 git init 등의 명령어를 실행할 필요가 없다

package.json : 프로젝트의 정보가 기입된 파일

사진을 보면 dependencies항목을 볼 수 있다.
여기에는 설치한 패키지들의 정보가 기입되어 있다
터미널에서 npm install 명령어를 실행하면 npm이 package.json의 dependencies항목을 분석해서 필요한 패키지들을 모두 설치할 수 있다

public 폴더 안 index.html : SPA특징에 기반한 유일한 html파일 (id="root"인 div 태그 하나만 존재한다)
src 폴더 안 index.js : react컴포넌트인 App.js와 html페이지인 index.html을 연결하는 중간다리 역할을 한다
src 폴더 안 App.js : 리액트는 html이 아닌 자바스크립트를 이용해서 만든 컴포넌트로 UI를 구성하는데, App.js는 CRA에서 최초로 만들어져 있는 데모용 컴포넌트이다
README.md : CRA뿐만 아니라 모든 프로젝트에 포함할 수 있는 파일로 일종의 프로젝트에 대한 설명을 작성해 두는 파일이다.
markdown 문법을 통해서 작성하며 정해진 양식은 없으므로 프로젝트에 대한 설명을 자유롭게 작성하면 된다.