리액트 프로젝트 생성 및 실행 방법
프로젝트 생성
프로젝트 생성 명령 설치하기
1 | npm install -g create-react-app |
위 명령으로 리액트 프로젝트를 생성하는 create-react-app명령을 설치했다. -g옵션이 주어졌기 때문에 시스템 공통 폴더에 설치된다. 따라서 프로젝트를 새로 생성할 때마다 위 명령을 반복할 필요가 없다.
프로젝트 생성하기
1 | create-react-app [프로젝트이름] |
create-react-app명령을 실행하여 프로젝트를 생성할 수 있다. 프로젝트 이름으로 영어 대문자는 사용이 불가능하다.
프로젝트 실행
생성한 프로젝트 폴더에 들어가기
1 | cd [프로젝트이름] |
프로젝트 실행하기
1 | npm start |
해당 프로젝트 폴더에서 npm start명령을 실행하면 node.js에서 해당 프로젝트가 실행된다.
프로젝트 실행 결과
npm start명령을 입력한 후 잠시 기다리면 위와 같이 웹브라우저 창이 뜬다.
실행 과정
- 웹브라우저가
http://localhost:3000/주소의 서버에 http request를 전송 - node.js 서버가 그 전송을 받아서 우리가 생성한 프로젝트를 실행
- 우리가 생성한 프로젝트의 실행결과가 웹브라우저로 전송
- 웹브라우저가 창에 우리가 생성한 프로젝트의 실행결과가 출력