CRA

• React를 이용해 웹 애플리케이션을 개발하기 위해서 필요한도구들을 모아놓운 "툴체인"
  • 툴체인?
  • 여러가지 도구등을 연결해둔 것
    React는 UI를 구축하기 위한 자바스크립트 라이브러리이기 때문에 UI외의 많은 기능들을 위해 다른패키지가 필요
  • 필요한 패키지를 다운로드 받고 서로 호환성을 맞추고 환경설정을 하는 것은 숙련자에게도 꽤나 번거롭고 초심자에게는 힘든일
  • 이러한 이유들로 React와 필요한도구들을 미리 조합해서 설정해둔 "툴체인"을 만들어두고 이를 이용해서 환경구축
    

Node_modules

• NPM으로 설치한 패키지들이 실제로 저장되는 공간

.gitignore

• git으로 관리하지 않을 파일, 폴더들을 기입하는 파일
• node_modules는 gitignore에 등록해 git으로 관리하지않음

package.json

• 프로젝트의 정보가 기입된 파일
• dependencies 항목에 설치한 패키지들의 정보가 기입되어 있음
• npm install 명령어를 통해서 dependencies 항목에 기입된 패키지들을 모두설치 할 수 있음

요약

• cra는 페이지가 하나인 spa (single page application)으로 구성되어 있다
• HTML -> public/index.html
  • 여기서 유일한 HTML파일이 바로 public폴더안에 index.html이라고 볼수있다
• id root DIV
  • 이안에는 단순히 id가 div tag하나만 들어가있다
• javascript component UI DEmo ->App.js App Component
  • react는 html이 아닌 자바스크립트를 이용해서 만든 컴포넌트로 ui를 구성하고 cra에서 최초로 만들어져 있는 데모용 컴포넌트가 바로 js에 있는 App.js 컴포넌트라고 볼수있다
• index.html <-> Component : index.js
  • index.html과 우리 react의 컴포넌트를 연결해주는 중간다리 역할을 하는 것이 바로 index.js에서 하고 있는 역할이다라고 볼수있다