JavaScript
Webpack
js0616
2024. 7. 3. 01:09
Webpack
모듈 번들러(Module Bundler) ,
웹 애플리케이션을 구성하는 자원(HTML, CSS, JavaScript, 이미지 등)을 모두 모듈로 보고
이를 번들링하여 하나의 또는 여러 개의 번들 파일로 만들어주는 도구
프론트엔드 개발에서 모듈간의 의존성 관리와 번들링 작업을 효율적으로 수행하기 위해 사용
번들 파일 (Bundle file)
- 하나로 묶어서 관리하고 제공하는 파일
- 네트워크 요청 수를 줄이기 때문에 로딩 시간이 단축
- 코드 최적화 및 압축이 가능하여 파일 크기를 줄이고 성능을 향상
- 모듈 간의 의존성을 관리
- 필요한 경우 코드 스플리팅(Code Splitting)을 통해 필요한 모듈만 로딩 지원
번들링 (Bundling)
- 프론트엔드 개발에서 여러 개의 파일(예: 자바스크립트 파일, CSS 파일, 이미지 파일 등)을 하나의 파일로 묶는(process) 과정
- 모듈 번들러(예: Webpack, Parcel, Rollup 등)를 사용하여 수행
- 웹 애플리케이션의 성능을 최적화하고, 개발 및 배포 과정에서 발생할 수 있는 여러 문제를 해결
요약
webpack 은 여러 파일들을 모듈로 보고 이를 1개 또는 여러개의 파일로 묶는 번들링 과정을 해주는 도구
- 코드 최적화
- 압축으로 파일 크기 감소
- 네트워크 요청 수를 줄여 로딩시간 단축
- 모듈간의 의존성관리
모듈(Module)
- 프로그래밍에서 코드를 재사용하기 쉽도록 작은 부분으로 분리한 단위
- 코드 재사용성, 네임스페이스 , 코드의 구조화와 유지보수성, 의존성 관리
- 기능 , 레이어, 역할, 분리가능성, 재사용성, 약결합성 등의 기준으로 모듈을 나눌 수 있음
네임스페이스(Namespace)
- 프로그래밍에서 변수, 함수, 클래스 등의 식별자들이 충돌 없이 고유한 이름 공간(namespace) 안에서 사용되도록 함
- 코드의 유지보수성을 높이고, 다양한 라이브러리나 프레임워크 간의 충돌을 방지
의존성(Dependency):
- 프로젝트에서 사용하는 외부 라이브러리나 모듈을 의미합니다.
- 예를 들어, 자바스크립트 프로젝트에서는 lodash, axios와 같은 라이브러리가 의존성이 될 수 있습니다.
의존성 관리
- 의존성 관리(Dependency Management)란 소프트웨어 개발 과정에서 필요한 외부 라이브러리, 프레임워크, 플러그인 등을 효율적으로 관리하는 것
- 프로젝트에서 사용되는 외부 리소스들을 관리하고, 이를 통해 개발자가 쉽게 추가하고 업데이트
- 패키지 관리자 npm 등..
npm 의 역할
- 패키지 관리:
- npm은 패키지의 설치, 업데이트, 삭제 등을 관리합니다.
- 프로젝트에서 필요한 라이브러리나 도구를 한 번의 명령어로 쉽게 설치할 수 있습니다.
- 의존성 관리:
- npm을 통해 프로젝트의 의존성을 관리할 수 있습니다.
- package.json 파일에 명시된 의존성 목록을 기반으로 필요한 패키지를 자동으로 설치하거나 업데이트할 수 있습니다.
- 스크립트 실행:
- package.json 파일의 scripts 항목을 통해 여러 가지 작업을 자동화할 수 있습니다.
- 예를 들어, 빌드 스크립트, 테스트 스크립트, 시작 스크립트 등을 정의하고 간편하게 실행할 수 있습니다.
- 버전 관리:
- npm은 Semantic Versioning(유의적 버전 관리)을 지원하여 패키지의 버전을 명확하게 관리할 수 있습니다.
- 이를 통해 다른 개발자들과 협업하거나, 의존성 충돌을 방지할 수 있습니다.
- 패키지 배포:
- npm 레지스트리에 자신이 개발한 패키지를 배포할 수 있습니다.
- 이는 다른 개발자들이 사용하거나 기여할 수 있도록 패키지를 공유하는 방법입니다.
- CLI(Command Line Interface) 도구:
- npm은 강력한 CLI 도구를 제공하여 개발자가 명령어를 통해 패키지를 관리하고, 프로젝트를 관리할 수 있도록 돕습니다.
- 스크립트 훅(Hooks):
- npm은 다양한 라이프사이클 이벤트에 대한 훅(Hook)을 제공하여, 특정 시점에 사용자 정의 스크립트를 실행할 수 있는 기능을 제공합니다.