0. 레거시

이 글은 개발 글이 아닌 삽질에 대한 기록만 있습니다.

 

## 결론

1. CRA는 react-scripts다.

2. CRA의 버전이 오래되면 그 하위의 모듈들도 모두 낙후된 모듈일 것이다.

3. 마이그레이션을 할 때에는 공식문서나 공식 깃헙의 CHANGELOG나 migration guide라는 키워드로 찾아보자.

4. 모듈들의 버전을 너무 오랫동안 방치하지 말아야 한다.

 

## 인트로

빌드 최적화라는 주제로 글을 작성해보려고 합니다.

제가 일하는 곳은 B2B SaaS 플랫폼으로 하나의 웹앱에 7개의 큰 모듈로 구성되어 있습니다.

모노레포로 관리하고 있어 프로젝트의 크기가 가볍지는 않습니다.

밑의 이미지를 보시면 최적화를 하기 전에 배포하는데 5분 22초 정도가 소요되고 있었습니다.

배포 뿐만 아니라 개발 시 한번 스크립트를 실행시키는 데에도 10초정도 기다려야 하는 불편함이 있었습니다.

[깃헙 액션의 테스크는 패키지 점검, eslint 체크 및 빌드, ui 테스트로 구성되어 있습니다.]

예전에 작업했던 것을 복습삼아 어떻게 최적화를 했는지 글을 남겨보도록 하겠습니다.

(제가 한 방법은 구글링과 테스트를 통해 주먹구구식으로 했기 때문에 문제가 있을 수 있습니다.

 혹시 문제가 있는 곳이 있다면 공유 부탁드리곘습니다. :)

 

## CRA(Create-React-App) 

현재 저희 서비스는 CRA 보일러 플레이트를 사용해서 개발세팅을 구성되어 있습니다.

제가 속한 팀이 갖고 있는 문제를 말하기 앞서 먼저 간략하게 CRA에 대해서 설명드리겠습니다.

(제가 처음에 보일러 플레이트라는 용어가 너무 어려웠고, CRA가 무엇인지도 몰랐었기 때문에 정리해봅니다 ..ㅎㅎ)

 

플레이트라는 말이 어려워 보이는데 그냥 쉽게 '종합 패키지'라고 생각해주시면 이해하기 쉬울 것 같습니다.

'종합 패키지'를 사용하면 리액트를 사용하기 위한 환경을 구성 및 유지/보수로 부터 시간을 아낄 수 있습니다.

(종합 패키지이기 때문에 사용하지 않는 불필요한 모듈들이 존재합니다. 그 부분이 보일러 플레이트의 단점입니다.)

 

## 낙후된 모듈 버전.. : )

제가 최적화 업무를 맡았을 당시 모듈의 버전은 무려 2.1.8 이었습니다.

(CRA 버전은 package.json의 react-script 버전을 보시면 확인하실 수 있습니다.)

빌드 최적화에 왜 CRA에 대해서 이야기 하냐고 궁금해 하시는 분들이 있을 수 있는데,

위에서 말씀드린 것 처럼 CRA는 리액트 앱을 구성하기 위해 필요한 모듈들이 세트로 묶여있는 패키지 입니다.

CRA 버전이 오래되었다는 것은 CRA를 구성하고 있는 모든 모듈들의 버전이 낙후되었다는 것을 의미합니다.

2018.12.29일에 배포된 webpack 4.28버전

대부분의 소프트웨어는 급변하는 환경에 맞춰 업데이트를 하는데, 저희 서비스는...ㅎ 오래 멈춰 있었...ㅎ.

모듈 번들러인 webpack의 버전은 4.28버전 이었습니다.

가장 먼저 웹팩 빌드 퍼포먼스 공식문서를 찾아 보니 항상 문제 개선을 하고 있으니 퍼포먼스를 원하면
업데이트 하라고 나와 있었습니다.

사실 이 업무를 맡기전까지 위에서 말씀드린 것 처럼 CRA에 대해서 잘 모르고 있어 단순히 번들러의 버전만 업데이트 해주면 해결 될 거라고 생각했습니다. webpack의 버전만 업데이트 하고 실행시켜보니 이전과 아무런 차이가 없었습니다.

 

그렇게 방황을 하고 있는 도중 옆에 계신 팀장님께서 CRA를 업데이트 해야한다고 말씀해주셨습니다.

npx create-react-app <project name> 커맨드만 알고 있었던 저는 구글링을 통해 react-scripts가 CRA의
라는 것을 알게 되었습니다.

CRA 공식문서를 가면 렌딩 페이지에 대놓고 react-scripts가 cra다 라고 말해주고 있습니다...ㅎ

 

 

##  Migration guide & CHANGELOG 

저는 한치의 망설임도 없이 react-scripts를 최신버전으로 업데이트 했습니다.

그 후 애플리케이션을 실행시켜보니 에러들이 출력되었습니다.

(출력된 에러들을 캡처해서 보관하고 있었어야 했는데.. 중요한걸 남겨놓지 않았습니다..ㅠ)

에러들을 하나하나 검색해보니 더 이상 사용하지 않는 모듈들을 사용하고 있다는 메세지 내용들이 있었고,

그렇게 타고타고 검색을 하다보니 결국 각 모듈들의 공식문서로 돌아오게 되었습니다.

Create React App GIthub

(공식문서가 이해 안된다고 다른 블로그들을 찾고 계시다면 그냥 공식문서를 보시라고 추천드립니다. 가장 친절합니다.ㅠㅠ)

migration guide라는 문서들이 나왔고 그곳에서 업데이트 시 변경되거나 삭제된 내용이 있다면 CHANGELOG에 기록되어 있다는 것을

처음 알게 되었습니다.

 

마이그레이션을 할 때 어떤 문서를 봐야하고, 무엇을 해야하는지 가이드를 찾았으니 다음 글 부턴 어떻게 마이그레이션을 했는지 글을 작성해 보겠습니다.