Create React App(CRA)란

• React 프로젝트를 손쉽게 생성할 수 있도록 도와주는 '보일러플레이트(Boierplate)'
• 수많은 React용 보일러플레이트가 있지만 메타(이전의 페이스북)에서 직접 만들어서 관리하는 Create React App이 가장 많이 쓰임
• 프로젝트 생성에 필요한 다양한 기능을 Command로 제공함

📌 CRA의 장점

1. 개발자가 온전히 React App 개발에 집중할 수 있도록 함

• 상대적으로 덜 중요한 코드는 노출되지 않음
• 강력한 Command 지원으로 하위의 파일들이 자동으로 생성됨
  
  node_modules : 프로젝트에 필요한 Package File List
  
  package.json : 프로젝트의 상세 내용을 기록해 둔 명세서
  
  .gitignore : git으로 관리하지 않을 파일들을 설정
  -> node_modules의 package들은 용량이 너무 크고, 각자 컴퓨터에서 npm install로 쉽게 설치할 수 있기 때문에, gitignore에 넣어둠
  
  index.html : 프로젝트의 첫 페이지. 즉, 사용자가 보게되는 html의 Entrypoint
  → body에는 root div 1개만 넣어놓음
  
  index.js : html과 React Component를 연결해주는 중간다리로 JS의 Entrypoint
  → index.html에 App.js 의 내용을 그려주기 위해서 필요한 파일들을 import하고 ReactDOM.render()함수로 index.html의 root에 App.js의 내용을 랜더링한다.
  
  App.js : 실제 화면에 보여지는 내용을 작성하는 Component 파일
  → function or class 방식으로 컴포넌트를 생성하여 return 안에 필요한 내용을 작성한다.
  - 가져올 파일을 import한다.
  - 내보내기 위헤서는 반드시 export를 한다.
  - 파일명, 컴포넌트명은 일치시키고, 대문자로 시작한다.

2. (대부분의) 모든 브라우저에서 해석될 수 있도록 transcompile 지원

• Babel 내장되어 있음
  - Babel : JavaScript 코드를 변환하는 데 널리 사용되는 도구이다. 주로 최신 JavaScript (ES6 이상)를 오래된 버전의 JavaScript (ES5)로 변환하는 데 사용된다. 이를 통해 최신 문법과 기능을 사용한 코드가 구형 브라우저에서도 작동할 수 있게 한다.

  • 주요기능
  1. 코드 변환 : 최신 JavaScript 문법을 구형 JavaScript로 변환
  2. 브라우저 호환성 : 다양한 브라우저 환경에서 동일한 코드의 실행을 가능
  3. 플러그인 시스템 : 다양한 변환 플러그인을 사용해 맞춤형 변환 설정을 제공

  사용방법

	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">...</script>

babel cdn을 불러오고, type으로 'text/babel'을 넣는다.

• 배포 시 코드 번들링(Webpack) 내장되어 있음
  - Webpack : 모듈 번들러로, 주로 웹 애플리케이션의 자산(JavaScript 파일, CSS, 이미지 등)을 번들링 하는데 사용된다. 번들링은 여러 파일을 하나의 파일로 결합하는 과정을 의미한다.
  
  
  • 주요 기능
  1. 모듈 번들링 : 다수의 파일을 단일 파일로 결합하여 네트워크 요청을 최소화
  2. 로더 시스템 : CSS, 이미지 등 다양한 자산을 JavaScript 모듈로 변환
  3. 플러그인 : 번들링 과정을 사용자 정의하고 확장할 수 있는 플러그인 시스템을 제공
  4. 개발 서버 : 개발 중 실시간으로 변경 사항을 반영하는 개발 서버 기능을 제공

---

Create React App으로 React 프로젝트 시작 시 Node.js 개발 환경을 제공하므로 Node.js와 NPM에 대해서도 알아둘 필요가 있다.

Node.js

• 주로 서버 프로그래밍에 사용되는 JavaScript 기반의 소프트웨어 플랫폼
• 프론트엔드 개발자의 접근성이 높음
• HTTP 통신 관련 라이브러리 내장
• NPM을 통한 방대한 라이브러리 제공
• Create React App으로 프로젝트 생성 시 개발 환경 및 테스트 서버로 이용됨

그렇다면 앞서 언급한 NPM은 무엇일까?

NPM(Node Package Manager)

• Node.js 환경에서 사용하는 각종 패키지들을 관리하는 저장소
• Node.js 설치 시 함께 설치됨
• 패키지 관리 뿐만 아니라 서버 실행 및 관리에 필요한 다양하고 편리한 명령어를 제공
• React 관련 모듈들을 NPM에서 배포함