🎥 생활코딩 YouTube

1. 공부전략

📕 Coding
: 개발 환경 설정 및 코드 작성

📗 Run
: 작성된 코드를 실행하여 결과 확인

📘 Deploy
: 소비자에게 전달

2. 개발환경의 종류

1) 온라인 플레이 그라운드

• 웹에서 바로 코딩하여 결과를 확인할 수 있음
• 예) CodeSandbox

2) 웹사이트에 React를 추가하기

• 개발 중 부분적으로 React를 사용하고 싶은 경우
  🔗 [React] Official web site
• But, 초급자에게는 사용하기 까다롭다.

3) 새 React 앱 만들기

• 툴 체인(Toolchain)
  : 개발에 필요한 도구를 모아둔 것
• Create React App
  : React 앱을 편리하게 만들 수 있게 도와주는 프로그램
  ❗ 이 문서에서는 여러 가지 툴 체인 중 Create React App 이라는 툴 체인을 사용!
  🔗 [React] GitHub

3. npm을 이용해서 Create React App 설치

• ❓ npm : Node.js로 만들어진 프로그램을 쉽게 설치해주는 일종의 앱스토어
  : node.js를 사용하여 개발한 앱들을 명령어를 사용하여 손쉽게 설치할 수 있는 프로그램

1) Node.js 설치

• node.js 공식 홈페이지에서 내려받기
  🔗 [Node.js] Official web site

npm -v : 설치 확인

2) Create React App 설치

npm install -g create-react-app@2.1.8

-g : global의 약자. 컴퓨터 어디서든 해당 프로그램 사용 가능

• @2.1.8 : 설치하고자 하는 버전 명시. 생략 시 최신 버전 설치

• 맥이나 리눅스에서는 관리자 권한으로 실행해야 하므로 명령어 앞에 sudo 명시

• create-react-app 명령 시 다음과 같은 결과가 출력되면 성공!

:: Success!

D:\develop\react-app>create-react-app
Plese specify the project directory:
	create-react-app <project-directory>
    
For example:
	create-react-app my-react-app
    
Run create-react-app --help to see all options.

4. Create React App 을 이용해서 개발환경 구축

• 기본 Directory로 설정할 위치에 react-app 폴더를 생성해준다.
  ❗ 문자 혹은 react라는 Folder Name 지정시에 Error 발생

cd [생성한 경로]
2. create-react-app .
: 현재 폴더에 Create React App 설치

5. React 샘플 웹앱 실행

• Visual Studio Code 에디터 설치
  : 에디터 내에서 Terminal 및 내부적으로 컴퓨터를 제어할 수 있어서 유용
  ( View 👉 Appearance 👉 Show Panel )
  해당 설치과정은 Google, Naver 검색

react-app 폴더 열기
2. Terminal에서 npm run start
: 성공 시 자동으로 아래와 같은 화면이 출력됨
3. Ctrl + C : 실행종료

6. 디렉토리 구조 파악

1) public

• React 앱 실행 시 첫 화면
• 모든 React 컴포넌트는 <div id="root"> </div> 태그 사이에 삽입
  (Create-React-App이 약속한 값)
  👉 실제 웹상에서 F12 개발자 도구를 사용하여 Element를 확인하여보면 <div id="root"></div> 내에 내용이 존재하는 것을 확인할 수 있음

2) src

• React 앱의 Entry 파일
• 실질적인 코딩 영역이 담겨 있음

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

document.getElementById('root') : index.html에서 id가 root인 엘리먼트를 가리킨다.

• <App /> : import App from './App' 에서 삽입된 App.js 파일

👀 해당 강의 내에서는 App.js File을 function type이 아닌 class type으로 사용할 것이므로 App.js를 수정한다.

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
        </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
        </a>
        </header>
      </div>
    );
  }
}

export default App;

3) css

import './App.css'와 같은 명령으로 App.js, index.js 에 css 파일 삽입

7. 배포

1) build

npm run build

• 이전에 없었던 build Folder가 react-app 내에 생성된 것을 확인할 수 있다.
• 생성된 파일은 내가 만든 파일들에 대해 불필요한 공백이나 정보들을 '살균' 시킨 파일들이다.
• 배포 시에는 build 내의 파일을 배포하면 된다.

2) 서버 설치 및 실행

npm serve -s build

-s build : build 폴더를 document root 로 지정

• npx를 사용하여 현재 build 디렉토리를 '일회성'으로 사용할 수 있다. 즉, 단 한 번 설치하고 삭제하도록 한다.