[React] npm으로 react 프로젝트 생성하기

react

1. Node.js 를 설치하여 npm 라이브러리 설치하기

앞선 글에서 Node.js 를 설치하여 npm 및 관련 라이브러리들을 설치하는 방법을 작성했으므로 아래 글을 참조한다.

https://chuun92.tistory.com/13

[Node.js] Node.js 및 npm 설치하기

 

2. React 컴파일 환경 만들기

create-react-app 을 설치하여 개발환경을 구축할 수 있다.

$npm install -g create-react-app

 

3. create-react-app으로 프로젝트 생성하기

$npx create-react-app hello

터미널에 create-react-app 프로젝트 명을 입력하면 아래와 같이 관련 프로젝트 파일 및 폴더들이 생성된다.

react 프로젝트 생성

$cd hello
$npm start

hello 폴더로 이동한 후 npm start로 실행한다. 아래와 같은 화면이 뜨면 정상적으로 실행된 것이다.

react 실행 화면 결과

실행되는 첫 화면을 변경해본다. App.js는 index.html 페이지에서 수행되는 index.js에서 사용되는 App Component를 정의해 놓았으므로 아래와 같이 변경하면 실행페이지의 내용이 변경된다.

App.js 수정

App.js 변경 후 실행 화면

 

4. react 프로그램 공개하기

작성된 프로젝트를 웹에 공개한다. 이 때 해당 프로젝트를 build하여 공개 전용 파일을 생성한다.

$npm run build

build 결과

build가 잘 되었는지 확인하기 위해 웹서버가 필요하므로 아래 명령어로 serve 모듈을 설치한다.

$npm install -g serve

설치가 완료되면 서버를 실행한다.

$npx serve -s build

server 실행

서버 실행 후 위 URL 두가지로 접속하면 마찬가지로 제작된 프로젝트 페이지가 뜨는 것을 확인할 수 있다!!