#1. SETUP

1. npx로 CRA(Create-React-App) 설치

콘솔창에 다음 명령어 입력.

npx create-react-app movie_app

 

npx란?

 

최근 npm으로 설치하는 모듈들은 자바스크립트 개발시 사용하는 단순한 모듈 라이브러리의 개념을 넘어 Tool 그 자체의 성격도 지니게 된 듯하다. INTRO에서 언급한 CRA나 vue-cli 처럼 프로젝트 생성도구 처럼 말이다.

 

그리고 사실 실제 개발이나 테스트를 하다보면 global 설치보다는 devDependency에 설치하는 경향이 더 많은 것 같다. 

 

그리고 하루가 멀다하고 개선되고, 업데이트되는 이런 툴이나 의존성 라이브러리들을 한번 전역으로 설치해 PC에 남기고, 변경사항이 있으면 다시 삭제 후 설치하는게 번거로울 수 있다.

 

그리고 테스트가 빈번하게 일어나는 상황에서 일일이 설치, 실행, 필요없을 시 제거를 반복하기보단 1회성으로 실행하기 위한 도구가 있으면 좋겠다의 취지에서 나온 것이 'npx' 이다!

 

[출처] https://yunzema.tistory.com/270

2. VSC에서 만들어진 폴더(movie_app)를 연다.

1) README.md 내용 모두 삭제 후 다음을 입력 후 저장

Movie App

React JS Fundamentals Course

2) package.json에서 "scripts" 부분의 "test", "ejects"는 사용하지 않을거라 삭제 후 저장

3) npm start 를 해보면 다음 내용이 터미널에 뜸

Local:     http://localhost:3000/
On Your Network:    http:192.168.~~.~~:3000/

이때 Local은 우리 컴퓨터에 있고 O.Y.N는 내 PC가 접속했던 WiFi에 접속하면 누구나 들어갈 수 있다. 

 

3. GitHub에 나의 Repository 생성

1. 터미널에 다음을 입력

git init

2. Github에서 Repository 생성 후 그 창의 URL 복사 후 터미널에 다음을 입력

git remote add origin (복사한 URL)

3. git add, commit, push

git add .
git commit -m "커밋 내용"
git push origin master

4. 실질적인 React 프로그램 만들기 전 설정

1) index.js를 다음과 같이 만들어 줌.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

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

2) src에서 App.js와 index.js를 제외하고는 나머지 파일들(아래 해당 파일들)을 모두 삭제.

logo.svg
reportWebVitals.js
setUpTests.js
index.css
App.test.js
App.css

3) App.js에서 다음 내용 삭제.

import logo from './logo.svg';
import './App.css';

4) App.js에서 App component를 다음과 같이 만듦

function App() {
	return <div> Hello!!!!!(이 곳에 입력하는 내용이 localhost:3000에 흰 바탕 배경으로 출력됨.) <div/>;
}

5) 출력되는 내용에 대해 검사를 진행하면 개발자 도구에 다음처럼 나옴.

<div id="root">
  <div>Hello!!!!!</div>
</div>

하지만 <div id="root"></div>가 적힌 public/index.html에 가보면 div id root사이엔 아무것도 안 적혀있음.

-> React는 Javascript를 활용하여 사용할 요소들을 작성하고 그걸 HTML에 전달해줌.

 

App.js의 App 컴포넌트에서 작성한 내용을 index.js에서 ReactDOM.render로 root라는 요소를 가진 index.html에 보내주는 것임.

 

즉, React는 소스코드에 처음부터 HTML을 작성하지 않고, HTML에서 HTML을 추가하거나 제거하는 방법을 사용한다.

 

6) root 대신 potato로 입력해도 됨.

<index.html>

<div id="potato"></div>

<index.js>

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