리액트 빌드하기

빌드 관련해서 글을 하나 더 써봤다. 초보에게는 도움이 될 지 모르겠지만 키워드라도 알아가면 좋겠다. 고수는 피드백 환영이다!
이것도봐봐

 

빌드란

react는 개발자의 소스코드 상태에서는 무겁기도 하고 웹브라우저는 jsx파일을 알아듣지를 못합니다. 그래서 자신의 소스코드를 사람들에게 배포를 하기 전 불필요한 데이터를 없애고 html로 바꾸는 작업이 필요한데 이때 빌드를 하게 됩니다.

---

빌드하는 방법

프로젝트마다 상황은 다르겠지만 기본적으로 빌드는 아래 명령어를 터미널에 입력하는 것만으로도 끝이 납니다.

npm run build

 

---

예시 파일

파일생성

작동이 되는 것을 보기 위해 리액트 앱을 하나 생성 하도록 하겠습니다

npx creat-react-app build-app

다른 기능은 필요하지 않고 빌드로 얻는 장점만 하나 보기 위해 앱은 생성된 그대로를 쓸 계획입니다.

CRA로 앱을 생성하게 되면 다음과 같이 리액트앱이 만들어지게 되는데 gitignore만 제가 추가하고 나머지는  자연(?) 상태 그대로입니다.

---

빌드 전 속도

 

빌드를 하기 전과 후의 앱의 속도가 어떤지 비교를 할 예정이므로 npm run start로 브라우저에 띄워보겠습니다

npm run start

명령어를 띄우고 저는 3000번 포트에 열렸기 때문에, 로컬호스트 3000 포트에 접속하면 아래처럼 화면이 나오게 될 텐데요.
개발자도구로 확인해 봤을 때 리소스가 1.7MB인걸 알 수 있습니다.

`

---

빌드

확인을 해 봤으니 이제 빌드를 통해 얼마나 효과가 생기는지 테스트해보겠습니다.
위에서 먼저 말씀드렸다시피 빌드는 간단하게 npm run build 명령어로 진행할 수 있습니다.

npm run build

위와 같이 Compiled successfully가 나온다면 정상입니다

---

빌드를 하고 나면 build폴더가 생길 텐데요. 이 폴더에서 index.html을 보시면 원래의 코드와도 다르게 줄 바꿈 같은 것들이 모두 제거되어 있는 걸 보실 수 있습니다. 이렇게 빌드를 통해 불필요한 걸 제거한 폴더가 생기게 된 것이고 이를 배포하게 된다면 사용자는 보다 쾌적하게 서비스를 이용할 수 있게 됩니다.

---

이어서, 빌드가 완성되었으니 이 파일을 확인해 볼 차례입니다. 위의 npm run build를 하고 난 후의 사진을 보시면
npm install -g serve와 server -s build를 찾으실 수 있으실 텐데요. 이걸 통해 빌드한 파일을 브라우저에 띄워보려 합니다

npm install -g serve
npx serve -s build

주의하실 점으로 serve -s build에서는 CRA때와 마찬가지로 npx를 사용했다는 점입니다!
명령어를 입력하고 나면 y 눌러주시고 저와 같은 화면을 터미널에서 보신다면 다 되었습니다

 

비교

<- 빌드 전 / 빌드 후 ->

---

결론

기능을 넣지 않고 CRA에서만 비교를 해 봐도 많은 리소스 절약을 확인할 수 있었습니다. 이렇게 리액트 전체가 서버에서 작동되는 것이 아닌 빌드를 통해 불필요한 데이터를 없애고 배포를 하면 사용자는 보다 쾌적하게 서비스를 이용할 수 있게 됩니다.

 

 

참고링크