[React] create-react-app으로 쉽게 리액트 프로젝트 시작하기

리액트/JSX 컴파일 환경을 구축할 때 "create-react-app"이라는 애플리케이션을 사용한다.

이는 리액트를 개발한 페이스북에서 제공하는 애플리케이션이다.

이 애플리케이션을 사용하면 간단하게 리액트 개발 환경을 구축할 수 있다.

 

ceate-react-app 설치하기

$ npm install -g ceate-react-app

* -g 옵션 : 전역 모듈로 설치하여 어떤 디렉터리에서든 사용 가능하다.

 

hello라는 이름의 리액트 애플리케이션 만들고 실행하기

$ create-react-app hello

$ cd hello

$ npm start

 

ceate-react-app으로 만들어진 리액트 애플리케이션 디렉터리 구조

+ <node_mdules> ... 설치한 Node.js의 모듈이 들어있는 디렉터리

+ <src> ... 프로그램의 컴파일 이전의 소스코드

+ <public> ... 기본 골격 파일 (index.html 파일 포함)

 

프로그램 공개하기

$ npm run build

명령어를 실행하면 <build>라는 디렉터리가 생성되며, 빌드가 되었는지 확인하려면 웹 서버가 필요하다.

 

웹 서버 설치하고 실행하기

$ npm install -g serve

$ serve -s build

 

가장 처음 읽어 들이는 HTML 파일은 public 디렉터리 내부에 있는 index.html 파일이다.

index.html 파일에서 리액트 메인 파일인 src/index.js를 읽어 들인다.

src/index.js에서 src/App.js를 읽어 들인다.

따라서 리액트 기본 애플리케이션은 src/App.js를 변경해서 메인 화면의 내용을 변경하게 된다.

 

리액트 사이트 build & Github Pages로 배포해보기

리액트로 만든 사이트를 배포하려면 그냥 작업하던 App.js 파일 그대로 올리는게 아니라 

build용 파일을 생성한 후 그걸 올려야한다. 

웹브라우저는 HTML CSS JS 이 세개의 언어만 해석할 수 있다. 리액트의 이상한 state, JSX 이런거 전혀 못알아듣는다. 

그래서 리액트 프로젝트를 build 라는걸 하면 브라우저 친화적인 HTML CSS JS 파일로 바꿔준다.

그리고 그걸 웹에 올려야 사용자들이 내가 만든 사이트를 구경할 수 있다. 

 

build를 해본 후 무료로 HTML 파일을 호스팅해주는 Github Pages를 이용해 배포까지 할 수 있다.

 

혹은 웹서버를 가지고 있다면?

리액트는 HTML 이쁘게 만들어주는 툴일 뿐이다.

그래서 리액트로 열심히 프로젝트 만들고 build 하면 index.html 파일이 생성된다.

그리고 "어떤 놈이 [접속 url] 으로 접속하면 build/index.html 파일 전송해라"

라고 서버 API를 작성하면 간단한 배포가 끝난다.