바야흐로 json에 데이터가 너무 많이 들어가 js의 크기가 500kb가 넘었던 시절이 있었다.

그때 이 녀석은 나에게 꾸준히 파일이 너무 크다
나쁜 꼴을 면치 못한다.
라고 했었다.

어찌어찌 다른 기능을 리팩토링 하다보니 그 파일들이 필요가 없어져서
그 때의 위기는 넘겼으나

문제

이번에 다시 500에 육박하려한다.

원인

원인은 단연코

{
  "recho": {
    "title": "Recho",
    "subtitle": "음악으로 나를 알리는 플랫폼",
    "description": "음악인들이 자유롭게 교류하고, 합주를 함께하고, 악기 중고 거래와 숏폼 영상을 통해 자신을 표현할 수 있는 음악 커뮤니티 플랫폼입니다.\n\n스마트폰의 리소스를 활용하여 합주 영상을 직접 편집할 수 있도록 React Native 기반 앱과 웹뷰 구조로 제작하였습니다.",
    "overview": {
      "projectType": "팀 프로젝트",
      "introduction": "음악인들이 소통할 수 있는 커뮤니티 플랫폼",
      "features": "커뮤니티, 합주 모집, 악기 중고 거래, 숏폼 기능",
      "role": "백엔드, 프론트엔드, ERD 설계, ffmpeg 활용, AWS 서버 구축"
    },
    "summaries": {
      "development": {
        "title": "구현 기능 및 개발 과정",
        "parts": [
          ["ffmpeg를 활용한 비디오 편집 로직 구현", "짧은 길이 비디오 기준으로 비디오 병합", "이퀄라이저로 주파수별 dB 조절 기능 구현"],
          ["합주 기능(비디오 재생+녹화), 비디오 편집 화면, 비디오 병합 로직 연결", "각 페이지별 컴포넌트를 공통 컴포넌트로 리팩토링", "jwt 중심으로 로그인 정보 전역 상태 관리"],
        
...       
          
      { "title": "문제 파악", "content": "개인 프로젝트에 필요했던 간단하고 적합한 그리드 라이브러리의 부재를 인지" },
      { "title": "핵심 기능 구현", "content": "TypeScript와 React Native 컴포넌트를 사용하여 컬럼 기반 아이템 렌더링 핵심 로직 개발" },
      { "title": "NPM 배포", "content": "외부에서 사용할 수 있도록 배포 설정을 완료하고 NPM 레지스트리에 공개" }
    ]
  }
}

이 녀석 때문이다. 훨씬 길다.

해결

Bundling을 아는가?
나는 web pack이나 bundling 같은 개념을 지난 컨설팅 때 알게 됐고
어찌보면 CRA를 vite로 이식하게 된 결정적인 계기였다.
그러나
그렇다고 해서 번들링을 완벽하게 이해한 것은 아니다.
그래서 이 기회에 번들링을 완벽하게 이해하고

사실 이번에 구현하고자 하는 건 번들링의 반대 개념이라고 한다.
Code Splitting 그리고 Lazy loading이다.
Lazy loading은 핀토스에서 페이지 폴트가 발생했을 때 했던 개념이다.
그 개념을 그대로 적용해보면, 처음에 다 로딩하지 않고 필요한 순간에 로딩하는 게 아닐까

Bundling

Code Splitting