1. Node.js 및 npm 라이브러리 설치하기
https://nodejs.org/ko/download/
Node.js — Node.js® 다운로드
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.
nodejs.org
해당 사이트에서 본인 환경에 맞게 설치를 합니다.
2. React 컴파일 환경 만들기
$npm install -g create-react-app
명령 프롬포트(cmd)를 관리자 권한으로 실행하여 create-react-app 을 설치합니다.
3. create-react-app으로 프로젝트 생성하기
$npx create-react-app <프로젝트명>
필자는 프로젝트명이 fe_bis이기 때문에 npx create-react-app fe_bis 를 입력하였다.
아래는 cmd 화면이다.
터미널에 create-react-app 프로젝트 명을 입력하면 아래와 같이 관련 프로젝트 파일 및 폴더들이 생성된다.
$cd <프로젝트명>
$npm start
프로젝트명의 폴더로 이동한 후 npm start로 실행합니다.
아래와 같은 화면이 뜨면 정상적으로 실행된 것입니다.
필자는 명령 프롬포트에서 d:\project\repo_bis 경로에서 새로 만들었습니다.
따라서 명령어를 입력할 때의 경로에 프로젝트명 폴더로 간 후, npm start를 해야 합니다.
새로 만든 프로젝트를 npm start 하면 아래 화면과 같습니다.
명령어를 입력한 후, 명령 프롬포트에는 이렇게 뜹니다.
새로운 창이 자동으로 뜨며, localhost:3000 페이지로 이런 화면이 뜨면 정상적으로 프로젝트가 생성되었습니다.
다음은 리액트 프로젝트 빌드 방법에 대해서 알아보겠습니다.
빌드를 하기 위한 테스트 코드를 작성해보겠습니다.
App.js에서 간단한 js 코드를 작성하였습니다.
코드를 작성 후, 저장을 합니다.
저장을 하면 localhost:3000 화면이 다음과 같이 변경됩니다.
App.js는 index.html 페이지에서 수행되는 index.js에서 사용되는 App Component를 정의해 놓았으므로 실행 페이지의 내용이 변경됩니다.
이제 코드를 작성했으니 코드를 빌드하려고 합니다.
$npm run build
이 명령어를 입력하면 빌드가 됩니다.
빌드가 완료되면 프롬포트에는 이와 같은 명령어가 뜹니다.
빌드가 완료되면 다음과 같이 build 폴더가 생깁니다.
build가 잘 되었는지 확인하기 위해서 웹 서버가 필요하므로 아래 명령어로 serve 모듈을 설치합니다.
$npm install -g serve
설치가 완료되면 다음과 같이 명령 프롬포트에 뜹니다.
이제 웹 서버를 설치 완료했으니 서버를 실행합니다.
$npx serve -s build
서버 실행 후 위 URL 두가지로 접속하면 마찬가지로 제작된 프로젝트 페이지가 뜨는 것을 확인할 수 있습니다.