CRA (create-react-app) 로 리액트 어플리케이션 만들기

Framework Vs Library

• 프레임워크 : 개발에 필수적인 기능들을 위해 어느정도 뼈대(구조)를 제공해주는 틀. 그에 맞게 코드 작성한다 ex) 뷰,앵글러
• 라이브러리 : 특정 기능에 대한 도구 or 함수들을 모은 집합. 틀 밖의 기능을 가져와서 사용한다 ex) 리액트

뷰,앵글러 -> MVC : Model(데이터) View(화면) Controller
리액트는 -> View만

REACT

• 리액트 : 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
• 컴포넌트 : 재사용가능한 ui 구성 단위
• jsx : 리액트에서쓰는 자바스크립트 확장문법. 브라우저에서 읽을 수 없기때문에 js로 변환시켜야한다 (babel - CRA에 세팅되어있음)

CRA (create-react-app)

• WHy CRA?? : react 앱을 만들기위한 세팅이 되어있다. 노드기반이라서 node, npm이 먼저 깔려있어야된다.
• Node : 브라우저밖에서도 자바스크립트가 작동가능한 환경을 제공한다.
• Npm : 노드 패키지 매니저. Node.js에서 사용할 수 있는 모듈들을 패키지화하여 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 CLI(Command line interface)를 제공

1. CRA로 프로젝트 생성하기

(업데이트되는 공식문서를 참고하도록 한다)

 npx create-react-app 프로젝트명

2. CRA로 생성되는 세팅

node_modules ㅡ package.json ㅡ .gitignore

• node_modules

패키지가 들어있는 폴더. 패키지의 실제 코드가 담겨있어 용량이 크다

• package.json

프로젝트에 대한 메타데이터들, 
"Dependencies" : {} 
	설치한 라이브러리,패키지의 버전과 이름들이 담긴다.
"scripts" : {} 명령어들이 변수처럼 담겨있다. 
	start: 개발모드 
	build: 배포모드

• .gitignore

git에 올리지않는 파일들이 담긴다. 
/node_modules 를 git에 올리지않는다

git에는 패키지는 올리지않고 package.json만 올려서 Dependencies에서 깔린 패키지들의 이름과 정보만 확인할 수 있또록한다.
npm install 명령어를 통해 로컬에 없는 패키지를 설치할 수 있다.

3. CRA 파일구조

Index.html ㅡ Index.js ㅡ app.js