모듈, 번들링, 웹팩

모듈이란?

모듈(Module)이란 프로그래밍 관점에서 특정 기능을 갖는 파일 하나하나, 특정 기능을 갖고 있는 작은 코드 단위를 의미한다. 우리가 개발을 하다보면 가독성과 유지보수 향상을 위해 파일을 여러 개로 분리를 하는데, 이때 분리된 파일 각각을 모듈이라고 부른다.

 

모듈이 필요한 이유

브라우저 내에서 자바스크립트는 여러 파일로 분리해도 하나의 파일 안에 있는 것처럼 전역을 공유한다. 그렇기 때문에 호출되는 순서가 중요하다. 하지만 이렇게 개발하다 규모가 커치면 오류를 찾기 힘들고 유지보수가 어려워진다. 그래서 파일 단위로 변수를 관리하기 위해서 모듈이 필요하다.

웹 환경은 발전하는 컴퓨터의 성능과 관계없이 요청과 응답으로 이루어져 있기 때문에 파일이 늘어나면 늘어날 수록 요청과 응답에 걸리는 시간도 비례하기 때문이다.

---

개발자에게 번들링(빌드)이란? 

사용자에게 웹 애플리케이션을 제공하기 위해 여러 코드와 프로그램들을 묶는 행위로 정의할 수 있다.
개발자는 최종적으로 번들링된 웹 애플리케이션을 만들어내고, 사용자가 웹 애플리케이션을 이용할 때는 번들링한 파일을 받아와 브라우저가 이 번들을 실행한다.

 

 

번들링을  필요한 이유?

1. 파일 크기로인한 성능 저하문제 해결
   코드를 '번들링'한다는 것은 단순히 묶기만 하는 것이 아니라 컴퓨터 파일을 '압축'하는 개념과 비슷하다.
   번들 파일은 번들링을 거치지 않은 원본 프로그램 파일보다 크기가 작아지고 실행 속도, 로딩 속도 또한 빨라진다.
2. 애플리케이션 임의 조작 방지
   압축한 파일을 받아와 압축해제 전까지 파일을 조작할 수 없는 것처럼, 번들링된 앱 애플리케이션도 사용자가 임의로 조작할 수 없다. 만약 번들링 되지 않은 파일에는 사용자가 이를 원하는 대로 조작할 위험이 생긴다,
3. 파일 단위의 모듈 관리의 필요성
   프론트엔드 개발에서 변수는 '전역 범위'를 가지기 때문에 하나의 프로젝트 폴더에서 여러 개의 파일이 있더라도 서로 공유하게된다. 그러므로 모듈화가 일반적이다. 여러 코드를 하나로 단일시킬 필요가 있다.
4. 네트워크 요청 저하 문제
   각각의 웹 페이지 파일을 별도로 요청해야 하므로 브라우저에서 여러 번의 네트워크 요청이 발생한다. 이로 인해 페이지 로딩 시간이 길어지고 사용자 경험을 저해한다,

---

웹팩이란?

웹팩은 모듈을 번들링 해주는 모듈 번들러이다.

 

웹팩에서 모듈이란?

웹 애플리케이션을 구성하는 모든 자원을 말합니다. HTML, CSS, Javascript, Images, Font 등 파일 하나하나가 모두 모듈이다.

 

웹팩의 등장이유

1. 파일 단위의 자바스크립트 모듈 관리의 필요성
2. 웹 개발 작업 자동화 도구
3. 웹 애플리케이션의 빠른 로딩 속도와 높은 성능

웹팩에서 지원하는 도구

1. 모듈 번들링: 웹팩은 모듈 시스템 (예: CommonJS, ES6 Modules)을 사용하는 JavaScript 파일을 하나로 번들링하는 기능을 제공한다. 이를 통해 코드를 구조화하고 모듈 간의 의존성을 관리할 수 있다.
2. 로더 (Loaders): 웹팩은 다양한 로더를 제공하여 웹 애플리케이션에서 다른 유형의 파일을 처리할 수 있다. 예를 들어, JavaScript, CSS, 이미지, JSON 파일을 로드하고 처리할 수 있다.
3. 플러그인 (Plugins): 웹팩의 플러그인 시스템을 사용하여 번들링 프로세스를 확장하고 사용자 정의할 수 있다. 플러그인을 통해 코드 압축, 환경 변수 설정, 자동화, 번들 최적화, HTML 파일 생성 등 다양한 작업을 수행할 수 있다.
4. 자동 번들링 (Hot Module Replacement): 개발 중에 코드 변경을 감지하고 브라우저를 새로 고치지 않고도 모듈을 실시간으로 업데이트할 수 있도록 도와주는 기능을 제공한다.
5. 코드 스플리팅 (Code Splitting): 웹팩은 애플리케이션을 여러 청크(chunk)로 나눌 수 있어, 페이지 로딩 시간을 최적화하고 효율적인 리소스 사용을 가능하게 한다.
6. 환경 설정 (Configuration): 웹팩은 설정 파일을 사용하여 프로젝트에 대한 다양한 환경 설정을 정의하고 조절할 수 있다.
7. 개발 및 프로덕션 모드: 웹팩은 개발 및 프로덕션 모드를 지원하며, 각각 다른 설정을 사용하여 개발 중에는 빠른 빌드와 디버깅을 허용하고, 프로덕션 배포 시에는 최적화된 코드를 생성할 수 있다.
8. 모듈 경로 해석 (Module Resolution): 웹팩은 모듈을 로드할 때 모듈의 상대 경로 및 모듈 경로 해석을 관리하여 모듈을 찾아 로드할 수 있도록 한다.
9. 다양한 출력 포맷: 웹팩은 다양한 출력 포맷을 지원하며, 번들된 파일을 단일 파일 또는 여러 파일로 출력할 수 있다.
10. 소스 맵 (Source Maps): 웹팩은 디버깅을 용이하게 하기 위한 소스 맵을 생성할 수 있습니다. 이를 통해 압축된 코드와 실제 소스 코드 간의 매핑을 제공한다.