create react app을 하지 않고 직접 npm 모듈들을 설치해서 앱을 만드는 이유는 보통 불필요한 모듈들을 설치하지 않기 위해서라고 들었다. 그러나 CRA를 막상 해보면 설치되는 모듈들은 생각보다 적다. 그렇다면 CRA를 하는 것이 더 적은 모듈들을 설치해서 앱을 만드는 것인가?
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"실상 그렇지 않다. react-scripts 에 대해 간단히 알아보면 앱을 빌드하기 위해서 많은 모듈(webpack, vite)들을 설치해야 한다. 여기서 중요한 점은 설치가 문제가 아니다. 많은 모듈들이 빠르게 탄생하고 없어지는 프론트엔드 시장에서는 최대한 많은 사용자들을 사용하게 하기 위해서는 편리하고 유용한 기능, 적은 용량, 빠른 속도를 제공해야 한다. 그러기에 모듈들의 버전은 업그레이드를 반복하고 모듈에서 제공하는 기능들은 빠르게 변경될 가능성이 크다. 이러한 변경에 대비해야 하기 때문에 react-scripts 는 이러한 번거로움을 해결해준다. npm 사이트에 들어가서 react-scripts를 찾아보면
48개의 Dependencies와 14808개의 Dependents가 종속되어 있는 것을 확인할 수 있다. 수많은 모듈들이 react-scripts 를 설치하면 따라오는 것이다.
그리고 개발자가 원하는대로 빌드할 수 없다는 단점도 있다. 빌드 파일의 용량이 커질수록 앱의 속도는 저하하게 된다. 왜냐 앱을 실행할 때 빌드한 파일을 통신을 통해 받아오는데 파일 용량이 클수록 느릴 수 밖에 없다. 왜냐 통신을 통해 받아오는 파일의 크키가 커진다면 이 파일을 쪼개서 서버에서 보내준다. 파일을 쪼개는 시간과 이 쪼갠 파일을 다시 합치는 시간이 추가되기 때문에 파일의 용량이 커질수록 속도가 느려지는 것이다.
빌드할 때의 설정(webpack에서는 devtool source-map 설정 )을 통해 빌드할 파일을 Base64 VLQ로 인코딩하여 파일의 크기를 더욱 줄일 수 있다. Base64 VLQ로 인코딩하는 것이 왜 파일 크기를 줄일 수 있는 것인가?
VLQ는 Base64 값이며, 여기서 가장 중요한 비트(6번째 비트)가 연속 비트로 사용되며, "자리"는 가장 중요하지 않은 문자열로 먼저 인코딩되며, 그리고 첫 번째 숫자의 가장 중요하지 않은 비트가 부호 비트로 사용된다.
비트로 인코딩되므로 용량이 줄어든다.
참고
Decoding and Encoding Base64 VLQs in Source Maps - Lucidchart
