Do it 클론 코딩 영화 평점 웹서비스 - 1장 2장

1장 2장

1. 안녕 리액트

1.1 개발환경 세팅

Node.js 공식 사이트에서 LTS 버전을 내려받아 설치한다.
터미널에서 node -v 실행하여 설치 확인하기
Node.js를 설치하면 노드 패키지 매니저(npm)도 함께 설치된다. npm -v
npx는 1회성으로 최신 버전의 노드 패키지를 내려받아 설치시켜주는 노드 패키지이다. npm install npx -g, npx -v
VSCode 설치
git 설치 git --version
크롬 웹스토어에서 React Developer Tools 설치
저자가 만든 영화 앱 사이트{:target=“_blank”} 살펴보기

2. 리액트로 클론코딩 시작하기

2.1 create-react-app

create-react-app 라는 보일러 플래이트를 사용하여 리액트 개발을 바로 시작한다.
터미널 > npx create-react-app movie_app_2021
README.md 파일 수정하기 > 전부 삭제한다.
package.json 파일 수정하기 > scripts의 test, eject 명령어 삭제
리액트 앱 시작 npm start
리액트 앱 종료 Ctrl + C

2.2 깃헙에 리액트 앱 업로드

업로드를 해보세요.
git add .
git commit -m 'initial commit'
git remote add origin https://github.com/yournick/yourrepo.git
git push -u origin mater

2.3 리액트 앱 살펴보고 수정하기

생성한 프로젝트의 폴더를 살펴본다. node_module폴더는 앞으로 만지지 않을거다.
public, src폴더가 앞으로 자주 만질 폴더다.
public 폴더에 favicon.ico파일이 있다.
index.html 파일은 기본적인 내용만 있고 앞으로 볼 일 없다.
src 폴더에 수많은 파일이 있지만 App.js, index.js 파일만 남기고 삭제한다.

// index.js 파일 내용을 수정한다.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

// App.js 파일 내용을 수정한다.
import React from 'react';

function Potato() {
  return <h3>Potato !!!!</h3>
}

function App() {
  // return <div className="App"/>;
  return (
    <div>
      <h1>Hello!!!</h1>
      <Potato/>
    </div>
  )
}

export default App;

‘Hello!!!’가 화면에 어떻게 표시되는지 살펴본다.

// index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

// body 앨리먼트 주변을 보면 <div id="root">와 </div>사이에 아무것도 없다.
// 개발자 도구에서는 코드가 들어 있었다.

2.4 리액트 동작 원리 살펴보기

App.js, index.js 파일들을 리액트가 받아와서
해석하고 만든 결과물을
index.html에 끼워 넣는다.

// index.js
// 아이디가 'root'인 엘리먼트에 App 컴포넌트를 그린다.
ReactDOM.render(<App />, document.getElementById('root'));

비어있는 index.html에 엘리먼트를 추가해 나간다.
처음부터 모든 html을 그리지 않으니까 빠른 거다.