[React] 개발환경 설정

📌 참고 📌

https://www.youtube.com/watch?v=Vjbpzvt4l1k&list=PLuHgQVnccGMCRv6f8H9K5Xwsdyg4sFSdi&index=3

node.js 설치

안정적인 LTS 버전의 node.js 를 설치

https://nodejs.org/en/

설치 확인 명령어

npm -v

npm 과 npx 의 차이점

npm

• 노드 js 로 만들어진 응용 프로그램을 쉽게 설치하는 명령어
• 프로그램을 컴퓨터에 설치한다.

npx

• 프로그램을 임시로 설치하여 한 번만 실행 후 삭제한다.
• 컴퓨터의 공간을 낭비하지 않음
• 실행할 때마다 다운로드 하기 때문에 항상 최신상태를 유지한다.
  
  

Tool Chain(툴체인)

리액트로 앱을 개발할 때
필요한 여러 개발 환경을 모아서 제공해주는 편리한 도구
툴체인의 종류 중 하나인 Create React App 을 사용한다.

create-react-app 설치

컴퓨터 어디에서든 실행할 수 있는 옵션(-g)으로 리액트에 관련된 환경을 설치

npm install -g create-react-app

권한이 없어서 설치에 오류가 발생했을 경우 (code EACCES)

sudo npm install -g create-react-app

create-react-app 설치 확인

create-react-app -V

디렉토리 생성

디렉토리에 리액트를 개발할 수 있는 환경을 설정

create-react-app .

. : 현재 디렉토리를 의미

이름을 react 로 하면 특수한 문자이기 때문에 create-react-app 에서 거부된다.

create-react-app 실행

서버가 동작하게 되면서 index.html 파일을 실행

npm start 또는 npm run start

실행중인 node 서버를 종료

ctrl+C

실행중인 node 서버를 전체 강제 종료

Taskkill /IM node.exe /F

create-react-app 배포

create-react-app은
개발의 편의성을 위해 여러 가지 기능을 설치했기 때문에 파일의 용량이 무겁다.
이미 가지고있는 index.html 파일의 공백과 같은 불필요한 요소를 없앤 작업을 수행하여 용량을 줄여 build 라는 폴더가 생성된다.
파일의 용량이 크기 때문에 build 를 이용하여 용량을 줄여 배포한다.

npm run build

npm 을 통해 설치할 수 있는 간단한 웹 서버
컴퓨터 어디에서나(-g) serve 명령어를 통해 웹 서버를 설치할 수 있다.

npm install -g serve

실행시킬 때 build 라는 디렉토리를
웹 서버가 문서를 찾는 최상위 root 로 설정한다.

npm serve -s build

또는 한 번만 실행시킬 웹 서버를 다운로드 받아서
실행시킬 때는 npx 명령어를 이용한다.

npx serve -s build

App.js

creaet-reate-app 을 설치하면 생성되는 App.js
public 파일을 찾는 document 루트
public → index.html 파일에서 로드하는 자바스크립트 파일

// react 라이브러리에서 Component 클래스를 로딩
import React, { Component } from 'react';

class App extends Component {
  render(){
    return(
      <div className="App>
      </div>
    );
  }
}

// 클래스를 외부에서 사용할 수 있게 허용
export default App;

render() 함수를 호출하는 방식
render(){ } 함수를 정의하는 방식으로 return 값이 필요하다.

App 이라는 클래스는 REACT 가 가지고 있는 컴포넌트 클래스를
상속 받아서 생성되며 render() 라는 메소드를 갖고 있다.
class 안에 소속되는 함수는 funtion 을 생략한다.

최상위 태그

<div className="App>
</div>

컴포넌트를 생성할 때는 반드시 하나의 최상위 태그가 존재해야 한다.

jsx

태그를 그대로 사용할 수 있도록 페이스북에서 만든 컴퓨터 언어
create-react-app 이 자바스크립트 코드로 컨버팅 해준다.