1. 번들러 : 다수의 JS 를 하나의 JS 파일로 압축

그래서 하나의 웹 페이지를 보여줄때 다양한, 다수의 JS 라이브러리 파일들을 하나의 JS 파일로 압축해야한다.

• 번들러를 통해 다수의 JS 파일을 하나의 JS 파일로 묶으면, 웹 브라우저는 단 하나의 파일만 필요해진다.

• 과거에는 완성된 HTML과 서버에서의 DOM 조작으로 화면을 구성했지만, 현재는 CSR 방식을 통해 빈 HTML과 JavaScript를 활용해 동적 렌더링을 합니다.
• 번들러는 많은 파일을 하나로 묶어 제공하지만, 파일 크기가 커지는 단점이 있습니다.
  이를 해결하기 위해 Code Splitting과 Dynamic Import 같은 기술을 사용하여 필요한 파일만 로드할 수 있습니다.
• 번들로 생성된 파일은 CDN에 배포(캐싱)하여 전 세계에서 빠르게 로드할 수 있도록 합니다.
• 또한, 번들 파일은 미니파일과 어글리파일로 최적화하여 전송 크기를 줄이고, 코드를 보호할 수 있습니다.
• 번들로 미니파일(용량을 줄임), 어글리파일(JS코드를 난수화로 만들어 무엇을 만들었는지 알수없게 함)
  

1.1. 번들러 동작 원리와 Webpack 과 Vite(ESBuild 기반)

번들러는 모든 페이지에 정의된 모듈(JSX, CSS, 이미지 등)을 하나로 묶어 브라우저가 처리할 수 있는 형태로 변환합니다.
목표는 파일 크기를 줄이고, 의존성을 관리하며, 로드 성능을 최적화하는 것입니다.

• 빌드 도구 종류

  • Webpack 세부설정을 통해 각 페이지별로 정의 및 연결된 모든 JSX 들을 한데 묶어 번들링 가능

    • 주요 특징:
      • 모듈 번들링: JavaScript, CSS, 이미지, 폰트 등 다양한 파일을 하나의 번들로 묶어 제공.
      • 플러그인 시스템: 다양한 기능 확장을 지원.
      • 로더(loader): JavaScript 외에도 CSS, 이미지 등 다양한 파일 형식을 처리.
    • Code Splitting : 페이지 접근 시 전체 번들 파일을 가져오는 대신, 해당 페이지에서 필요한 파일만 로드.
      이를 통해 초기 로드 시간을 단축하고, 불필요한 리소스 로드를 방지.
    • 장점:
      • 확장성: 플러그인과 로더를 통해 원하는 기능을 추가할 수 있음.
      • 광범위한 생태계: 커뮤니티가 크고 다양한 플러그인과 리소스를 활용 가능.
      • 복잡한 프로젝트에 적합: 대규모 프로젝트에서도 유연하게 대응.
    • 단점:
      • 구성 파일 복잡성: 설정 파일(webpack.config.js)을 작성하는 데 시간이 많이 걸림.
      • 빌드 속도 느림: 번들링 과정이 느리고, 개발 서버(HMR)가 느리게 동작할 수 있음.

  • Vite 는 알아서 각 페이지별로 꼭 필요한 JSX 및 라이브러리 모듈들만 번들링한다
    Vite는 차세대 번들링 및 빌드 도구로, 개발 중 빠른 속도를 목표로 설계되었습니다.

    • 주요 특징:
      • ESM 기반 개발 서버: 브라우저에서 ESM을 바로 로드해 번들링 없이 빠르게 실행
        • ESM(ECMAScript Modules)이란? : JavaScript에서 모듈화된 코드를 사용하는 표준 방식입니다.
          코드를 재사용 가능하게 작은 조각(모듈)으로 나누고, 필요한 곳에서 가져와 사용할 수 있도록 설계.
          한마디로 "필요한 것만 가져오고 내보내는" 규칙!!
      • 빠른 HMR: 변경된 모듈만 즉시 갱신하여 빠른 피드백 제공.
      • 현대적인 빌드 도구: Rollup 기반 번들러를 사용해 프로덕션 빌드 최적화.
      • Code Splitting: 메인 페이지 내 서브 페이지마다 필요한 라이브러리만 번들링
    • 장점:
      • 빠른 초기 로드: 브라우저가 필요한 모듈만 로드해 빠름.
      • 간단한 설정: 복잡한 설정 없이 바로 사용 가능.
      • HMR 속도: 빠른 모듈 갱신으로 개발 효율성 향상.
      • 경량성: 불필요한 파일 로드를 방지.
    • 단점:
      • 레거시 지원 부족: 구형 브라우저나 환경에 대한 지원이 부족할 수 있음.
      • 커뮤니티 규모: Webpack에 비해 플러그인과 생태계가 상대적으로 작음.
      • 복잡한 요구사항 대응 부족: 대규모 프로젝트에서 세부 설정이 부족할 수 있음.

    ---

    특징	Webpack	Vite
    번들링 방식	모든 모듈을 번들링하여 단일 파일로 제공	개발 중에는 ESM을 사용, 빌드 시 번들링
    속도	느림	빠름 (특히 개발 서버)
    설정 복잡도	복잡 (플러그인, 로더 필요)	간단 (기본 설정으로도 충분)
    HMR(핫 모듈 교체)	느림	빠름
    플러그인 생태계	풍부	상대적으로 부족
    대규모 프로젝트	적합	적합하나 Webpack만큼의 유연성은 부족