React 4. 리액트 프로젝트 만들기 - 리액트 프로젝트 생성 / 빌드(배포) 모드

2. React 프로젝트 만들기

 

드디어 React 프로젝트를 하나 생성했다.

기존의 rcp - ch01 폴더 내에 ch01_5라는 프로젝트명으로 프로젝트를 생성했다.

앞서 설명했듯이 npm보다 npx가 낫다고 판단을 하여 npx를 사용하여 프로젝트를 생성했다.

 

npx create-react-app ch01_5 --template typescript

 

React 프로젝트는 기본적으로 Node.js 프로젝트이다.

모든 Node.js 프로젝트는 '루트 디렉토리(ch01_5)'에 항상 package.json 파일이 있다.

 

이제 프로젝트를 실행해야 하는데, 실행시키기 위해서는 터미널에 명령어를 입력해야 한다.

package.json 폴더 내에 "script" 항목에서 이와 관련된 명령어들을 확인할 수 있다.

 

npm run start
=> 프로젝트를 개발 모드로 실행한다.
=> 실제로는 react-scripts starts 명령이 실행된다.

npm run build
=> 프로젝트를 빌드(배포, 프로덕션) 모드로 실행한다.
=> 실제로는 react-scripts build 명령이 실행된다.

 

- 웹팩과 번들 파일

 

원래 리액트 앱을 처음 실행하기 위해서는 webpack이나 babel 같은 것을 설정하기 위해서

엄청나게 많은 시간이 걸렸다고 한다.

하지만 이제는 create-react-app Command로 바로 리액트 프로젝트를 실행할 수 있다.

=> create-react-app _____

 

여기서 webpack과 babel이 무엇인지 알아보자.

 

먼저, babel. 바벨이라고 읽는다.

babel이란 최신 자바스크립트 문법을 지원하지 않는 브라우저들을 위하여

최신 자바스크립트 문법을 구형 브라우저에서도 볼 수 있게 변환시켜두는 것이다.

 

 

두 번째로, webpack. 웹팩이라고 읽는다.

웹팩은 프론트엔드 프레임워크에서 사용하는 대표적인 모듈 번들러이다.

웹 애플리케이션은 자바스크립트, 이미지, CSS, HTML 파일로 구성되는데,

웹팩에서는 이처럼 애플리케이션이 동작하는데 필요한 파일을 모듈이라고 한다.

 

웹팩은 다양한 입력 모듈을 결합하여 훨씬 단순한 형태의 모듈로 변환해주는 역할을 한다.

이러한 웹팩의 결과물을 번들이라고 한다.

 

 

앞서 리액트 프로젝트 구조에서 여러 종류의 파일 확장자를 보았는데,

이 파일들은 react-scripts 프로그램이 실행하는 웹팩의 입력 모듈이다.

그런데 웹팩은 빌드 모드일 때와 개발 모드일 때의 동작 방식이 서로 다르다.

 

이제 위에 쓰여 있는 명령어대로 빌드 모드와 개발 모드를 각각 실행시켜 보도록 하겠다.

 

 

- 빌드(배포, 프로덕션) 모드로 실행하기

 

먼저, 빌드 모드로 실행시켜 보도록 하겠다.

ch01_5 프로젝트를 "npm run build" 명령어를 사용하여 빌드 모드로 실행한다.

 

처음에 나는 왜 이 명령어를 npx로 대신하지 못할까 생각을 했었는데,

npx는 node.js 패키지 실행용 프로그램이고

프로젝트 안에 있는 것을 실행시키고 싶을 때는 npm으로 명령어를 만들어서 사용한다.

 

이렇게 빌드 모드로 실행을 하면

웹팩이 프로젝트 디렉토리의 파일을 모두 모아

이름에 main이나 chunk라는 단어가 있는 번들 파일을 만들어 준다.

 

build 디렉토리가 새로 생겼으며, build 디렉토리 내에 index.html 파일이 들어 있는 것도 볼 수 있다.

빌드 모드로 실행했을 때, 웹팩은 다양한 파일들을 입력하여 번들 파일을 몇 개 생성한 다음

public 폴더 안에 있는 index.html 파일을 바탕으로 번들 파일들을 반영한 새로운 index.html

파일을 build 디렉토리에 만들어 준다.

 

 

이제 웹 서버를 가동하고 웹 브라우저에서 리액트 프로젝트를 실행시켜 보겠다.

개발 환경과 실제 배포 환경은 다를 수 있으며, 이러한 이유로 웹 서버를 사용하는 경우가 많다.

웹 서버를 가동하는 명령어는 이러하다.

npx serve -s build

 

server -s build : build 디렉토리의 정적 파일을 서빙한다.

-s 옵션은 SPA(Single Page Application) 모드를 활성화하며, 모든 요청을 index.html로 리디렉션 한다.

 

사실 책에는 "npm install -g serve", "serve -s build" 명령어를 사용하고 있지만,

이렇게 하면 전역적으로 serve를 설치해야 하기 때문에 npx를 사용하는 것을 추천한다.

 

 

npx를 사용하면 패키지를 전역으로 설치하지 않고도 실행할 수 있지만,

필요할 때 일시적으로 해당 패키지를 다운로드하고 설치하는 과정이 필요하다.

이 과정에서 일시적으로 패키지를 설치하여 실행한다.

그래서 npx로 어떤 패키지를 처음 사용할 때 "패키지 설치가 필요하다"는 메시지가 뜰 수 있다.

 

[ npx 과정 ]
- 패키지 검색 : 로컬과 전역에 해당 패키지가 존재하는지 확인.
- 패키지 설치 : 패키지가 없으면, 일시적으로 해당 패키지를 설치.
- 패키지 실행 : 설치된 패키지를 실행.
- 패키지 정리 : 실행 후 일시적으로 설치된 패키지는 자동으로 정리.

 

 

- 웹 서버

 

이번에는 웹 서버에 관하여 한 번 알아보도록 하겠다.

나는 원래 웹 서버에 관하여 잘 몰랐다.

특히나 빌드 모드를 실행하게 되면,

그 후에는 npm run start 명령어를 사용하여 웹 브라우저에서 리액트 프로젝트를 실행하는 줄 알았다.

 

내가 지금까지 그렇게 사용할 수 있었던 이유는,

package.json 파일 내에서 커스텀 스크립트를 사용하여

npm run start가 배포용으로 작동하도록 설정해뒀기 때문인 것 같다.

 

ex)
{
  "scripts": {
    "start": "node server.js",
    "build": "react-scripts build"
  }
}

 

일반적으로 create-react-app을 사용하여 생성된 기본 리액트 프로젝트에서는

npm run start 명령어가 개발 서버를 실행하는 역할을 하며, 이는 배포 목적에 적합하지 않다.

내가 이 부분을 착각을 하고 있었던 것 같다.

 

그렇다면 빌드 모드에서 웹 브라우저에서 리액트 프로젝트가 실행되게끔 하려면 어떻게 해야 할까?

그것은 바로 "웹 서버"를 사용하는 것이다.

빌드 모드에서 웹 서버를 사용하는 이유는 무엇일까?

 

=> 정적 파일 제공 :
- 빌드된 파일들은 정적 파일이다.
이를 서빙하기 위해서는 정적 파일을 제공할 수 있는 웹 서버가 필요하다.
- server는 간단한 정적 파일 서버로, 빌드된 파일들을 쉽게 제공할 수 있다.

=> 실제 배포 환경과 유사한 테스트 :
- 웹 서버를 사용하면 로컬 개발 환경에서 실제 배포 환경과 유사한 조건을 테스트할 수 있다.
- 이는 배포 전 빌드된 파일이 제대로 동작하는지 확인하는데 유용하다.

 

여기서 개발 환경과 배포 환경을 한 번 비교해보고 가겠다.

 

개발 환경	배포 환경
npm run start 명령어는 개발 서버를 살행한다. 이는 개발 중에 코드 변경 사항을 실시간으로 반영해주는 핫 리로딩 기능을 제공한다,	배포할 때는 코드를 빌드하여 정적 파일로 변환한다. 이를 통하여 브라우저가 직접 실행할 수 있는 HTML, CSS, Javascript 파일을 생성한다.
개발 서버는 주로 webpack-dev-server나 create-reat-app이 제공하는 개발용 서버를 사용한다.	이 파일들은 실제 웹 서버에 배포되어야 한다. 이는 보통 Nginx, Apache와 같은 정적 파일을 서빙할 수 있는 웹 서버를 사용한다. (애플리케이션을 사용자에게 바로 서비스할 수 있다.)