React 1) 개발환경

♩ 내가 애정하는 생활코딩 수업중, React 입문 수업을 듣고 정리하는 노트.

---

React 입문 수업

React 를 사용하는 이유 

1. 가독성
2. 재사용성
3. 유지보수

---

- npm 으로 create -react-app 설치하기 

create-react-app 이라는 보일러 플레이트를 사용하면, 명령어 1줄만 입력해서 리엑트 개발을 바로 시작할 수 있다.
다시 말해 create-react-app은 리엑트 개발을 바로 시작할 수 있도록 프로젝트 구조 작업, 설정작업 등을 자동으로 진행해주는 도구이다.
이전에는 웹팩, 바벨과 같은 도구가 필요했고, 이 도구로 리액트를 모든 브라우저가 이해할 수 있도록 컴파일해야만 했었다.

$> sudo npm install -g create -react-app

잠깐!) npm 설치하는 방법

 

---

- create-react-app을 이용해서 개발환경 구축

1> 우선 기본폴더 생성

$> mkdir react-app ("react" 만으로 폴더명을 사용할 수 없다!)

 

2> react-app 을 기본폴더로 create-react-app 설치

$> cd react-app

$> create -react-app . ( . 으로 현재 폴더를 기본폴더로 지정하여 설치한다.)

 

 

---

- 실행하기

$> cd react-app

$> npm run start

 

---

- build 하기

$> cd react-app

$> npm run build

npm run build

이렇게 build 를 하면,

지금까지 작성한 개발소스를 하나로 압축?정리? 되어 "build" 라는 폴더가 만들어 진다!

build 라는 디렉토리가 생성됨 확인.

build 된 소스를 서비스에 배포하면 된다~

---

- 배포하기

serve라는 명령어로 웹서버를 설치하여 우리가 만든 build 를 배포한다.

먼저 serve 를 설치한다.

npm을 통해서 설치할 수 있는 간단한 웹서버 "serve"

 

$> sudo npm install -g serve

npm을 이용해서 serve를 설치한다, 이 컴퓨터 어디에서나 실행할 수 있도록 -global 옵션으로.

 

serve 로 build 배포하기.

$> serve -s build

우리가 생성한 build라는 디렉토리를  document root로 하겠다. 라는 뜻의  -s 옵션으로 실행

---

끝-!

---

 

참조)

react

https://ko.reactjs.org/

https://reactjs.org/

https://opentutorials.org/module/4058/24666

npm

2020/05/29 - [web 일반] - npm 설치하기