react build

이번 포스팅에서는 react 최적화 방법 중 하나인 build에 대해서 다루고자 합니다.

react build

Production Build?

여기서 build는 production build입니다.

(client에서 실행되는 프로그램을 build 합니다.)

 

컴퓨터 언어는 크게 두 가지로 나눌 수 있습니다.

인터프리터 언어와 컴파일 언어입니다.

(물론 하이브리드 등 세부 분류가 있지만..)

 

그리고 우리가 쓰고 있는 JS는 인터프리터 언어입니다.

인터프리터 언어의 기본 concept는 source code를 interpreter로 바로 실행하는 것입니다.

그와 반대로 컴파일 언어는 source code를 compile 하여 object file 또는 immediate code 등을 만든 후 그것을 실행합니다.

 

그런데 인터프리터 언어인 JS가 source code를 build 한다니 무언가 이상하게 들릴 수도 있습니다.

하지만, JS에서 말하는 build는 컴파일 언어의 compile과는 다릅니다.

 

JS에서 build는 JS source code를 또 다른 JS 코드로 변환하는 것입니다.

(이것을 transpile이라고 부르기도 합니다.)

이것은 source code가 immediate code로 변환되는 compile과는 다릅니다.

 

JS code를 왜 다시 같은 JS code로 transpile 하는 이유는 뭘까요?

Build 하는 이유 

build 하는 이유에는 몇 가지가 있습니다.

 

CRA(Create React App)의 github readme에는 다음과 같이 설명합니다.

Builds the app for production to the build folder.It correctly bundles React in production mode andoptimizes the build for the best performance.The build is minified and the filenames include the hashes. Your app is ready to be deployed.

 

1. 성능 최적화 : 성능을 최적화합니다.

• bundling
• code minify(경량화)(css 포함) - 버그로 이어질 만한 부분을 경고해주는 검증 코드들을 제거합니다.
• css, image 등 resource extracting

2. 코드 난독화 : 인터프리터 언어는 compile을 하지 때문에 배포 시에 코드 유출이 되어 보안이나 저작권의 위험이 있을 수 있습니다. 이런 상황에서, 사람이 이해할 수 없는 변수 이름 바꾸는 등의 난독화를 통해 이런 위험을 방지할 수 있습니다.

 

3. 특수 문법(또는 라이브러리) 지원 : 라이브러리 및 특수 문법을 transpile 하여 바닐라 JS로 변환합니다.

(실제 브라우저 엔진(v8)이 이해하는 건 바닐라 JS 뿐입니다.)

다음은 특수 문법 또는 라이브러리의 예시입니다.

• React
• JSX
• TypeScript

4. 호환성, 의존성 : 다양한 브라우저를 위해 라이브러리를 downgrade 하거나, 이전 JS 문법으로 고칩니다.

Build tool

이전에 포스팅했듯이 대표적으로 babel과 webpack이 있습니다.

웹팩과 바벨 개념과 역할

CRA에서 build 하는 법

그저 터미널에 다음과 같이 명령하면 됩니다.

npm run build

그러면 /build에 빌드된 react 앱이 생성됩니다.

 

Development build

development에서도 code를 transpile 하여 Node.JS의 v8엔진으로 돌립니다.

(chrome 브라우저도 v8엔진 기반입니다.)

그러나 transpile 된 code는 disk에 저장되지 않습니다.

 

facebook/create-react-app

성능 최적화 – React