[React] React 프로젝트 빌드하기

작성한 React 코드를 배포하기 위해서는 웹 서버가 문제 없이 사용할 수 있도록 알맞은 형식으로 빌드해야 합니다.

1. 프로젝트 빌드하기

아래 명령어를 입력하면 빌드가 진행됩니다.

npm run build

빌드가 정상적으로 완료되면 아래와 같은 문구를 볼 수 있습니다.

빌드가 완료되면 프로젝트 폴더 내에 build 폴더가 새로 생성됩니다.

이 build 폴더는 프로젝트에서 작성한 코드(CSS, JS, HTML 등)들과 사용된 자원(이미지, 영상 등)들이 포함되어 있습니다.

2. 로컬환경에서 실행하기

빌드한 프로젝트를 배포하기 전에, 코드가 잘 동작하는지 로컬환경에서 웹서버를 실행해볼 수 있습니다.

아래 명령어는 npm 저장소에서 serve라는 프로그램을 내려받고, build라는 폴더에서 serve를 실행합니다.

npx serve build

serve를 처음 실행한다면 먼저 serve를 설치해야 하므로, 다음과 같은 안내문이 나옵니다.

y를 눌러 진행할 수 있습니다

설치가 완료되고 serve가 실행되면, 다음과 같이 local ip 주소와 network ip 주소 두 가지가 표시됩니다.

 

Local 주소는 현재 로컬 작업환경에서 접속해 웹 페이지를 시험할 수 있습니다.

 

Network 주소는 다른 사람의 컴퓨터에서 웹페이지에 접근할 수 있게 합니다.

 

이 상태는 아직 인터넷에 공개되지 않았으므로, 같은 공유기에 접속중인 다른 기기들과만 통신이 가능합니다.