[아티클 1]

1. 빌드와 번들링?

• 번들링 : 여러 개로 흩어진 파일(JS, CSS 등)을 각 모듈의 의존성까지 파악하여 하나의 파일로 묶는 작업. → 네트워크 병목 현상 해결
• 빌드 : 개발자가 작성한 소스 코드를 브라우저가 실행할 수 있는 최종 파일로 변환하는 모든 과정(번들링, 코드 변환, 압축, 최적화 등)을 의미 → 빌드를 거쳐야만 실제 서비스를 할 수 있는 결과물이 나옴.

1. Webpack

• 모듈 번들러이자 빌드 도구의 역할까지 수행 → 모던 JS 애플리케이션을 위한 정적 모듈 번들러, 설정 파일 없이도 동작하지만 필요하면 커스터마이즈 가능
• 핵심 개념
  • Entry : 웹팩이 빌드를 시작할 파일
  • Output : 번들 결과물이 저장될 위치와 파일 이름
  • Loader : JS/JSON 외 파일(CSS, 이미지 등)도 모듈로 처리할 수 있도록 해줌.
  • Plugin : 빌드 전반 과정에 걸쳐 최적화, 파일 복사 등 다양한 후처리 작업 수행
  • Mode : 자동 최적화 활성화 (development, production, none)
• 모듈화된 개발 환경을 효과적으로 통합, 최적의 생산성과 유지보수성 제공
• 과거 create-react-app (CRA) 에서 사용했으나, CRA는 2025년 2월 14일 기준 새 프로젝트용으로 선셋(폐지)되어 더 이상 권장되지 않음. → Vite 사용 추세

1. RollUp

• ES 모듈 기반의 경량화/번들 최적화에 초점을 맞춘 번들러
• 불필요한 코드를 최소화하고, 하나의 소스에서 여러 환경을 지원해야 할 때 선택
• 특징
  • 트리 쉐이킹 : 사용하지 않는 코드를 최종 번들에서 제거
  • 웹팩에 비해 config 파일 구성 단순
  • 다양한 플러그인으로 번들링 과정 확장 가능
• 웹 어플리케이션 보다는 라이브러리나 패키지 배포용 번들을 만드는데 특화되어 있음. (Redux, React Router)

1. Vite