React JS로 웹서비스 만들기 #1 Setup

#1.0 Creating your first React App

브라우저가 우리가 기깔나게 쓴 자바스크립트를 이해하게 만들려면, 슬프게도 이걸 브라우저가 이해하는 못난 자바스크립트로 바꿔줘야 한다. 그래서 쓰는게 Webpack과 Babel. 그 다음에 React 코드를 Compile 해야 한다. 

 

-> 이거 CRA(Create React App)으로 단순화 가능. 하나의 명령 실행해서 React Web App을 셋업해준다. 

 

1. 설치

npx create-react-app movie_app 

관련 문서: https://github.com/facebook/create-react-app

facebook/create-react-app

2. 해당 폴더로 가서 README.md description 수정. 

 

3. package.json에서 내가 쓸 스크립트(start, build)만 남기기.

    "test": "react-scripts test",

    "eject": "react-scripts eject" 삭제

 

4. npm run start

 Local: http://localhost:3000/  >> 컴퓨터에서 테스트
 On Your Network:  http://192.168.123.112:3000/ >> wi-fi상으로 테스트

 

#1.1 Create a Github Repository

1. 새로운 깃 레파지토리 만들기. 

 

2. git remote add origin https://github.com/JoyDaheeCha/movie_app 콘솔창에 입력.

뒤에 url부분은 본인 프로젝트 레파지토리 주소. 

 

3. 깃에 커밋

git commit -m "init project"

git push origin master

 

#1.2 How does React work?

 

1. app.js 와 index.js 남겨두고 src 하위항목 지우기

 

2. index.js 수정

3. app.js 수정

저장시 자동으로 브라우저 반영해준다. 매 저장마다 껐다켜고 그거 안 하려고 nodemon 설치하던 과거를 생각하면 이건 정말 개꿀인 기능. 

내가 쓰는 모든 요소 만들어내고 <div id="root"></div>에 해당 엘리먼트 모두 밀어 넣는 역할을 한다. 

-> 어플리케이션의 로딩을 빠르게 하는 요인. .

즉, 어플리케이션을 로딩할시, 빈 html을 로딩 하고 react가 component에 작성해뒀던 것들을 밀어넣는다. 

 

새로운 개념 : virtual DOM (virtual document object model)

버츄얼 -> 존재하지 않는다. 즉 소스코드에는 존재하지 않음. react가 이를 만들어냄. 

 

#질문: 후에 넣어줘도 결국 로딩한다는 사실은 변함이 없는데, 어떻게 속도가 다를 수 있지? 

자세히 알아보자.