Vue.js로 프로젝트를 진행하면서 Webpack, babel 등 생소한 단어를 많이 접하게 된다
Webpack에 대해서 공부를 하는데 항상 사용했던 모듈이라는 단어가 낯설게 느껴졌다
그래서 이번 주제는 모듈이다 !
🔎 모듈(Module)이란
- 특정 기능이나 책임을 가진 코드의 집합
- 소프트웨어 개발에서 코드의 구성 단위
- 각 모듈은 독립적이면서도, 다른 모듈과 상호작용 가능
- 보통 파일이나 디렉토리 단위로 나누어 관리
조금 더 쉽게 생각해보자
개발을 하면서 규모가 커지면 파일을 여러 개로 분리해야 하는데, 이때 분리된 파일을 각각 모듈이라고 한다
➡ 파일 하나 또는 특정 기능을 갖는 작은 코드 단위를 의미
➡ 목적별로, 기능별로 여러 개의 파일로 분리해 관리 가능
➡ 이렇게 모듈로 분리하는 과정 : 모듈화
❓ 모듈이 왜 필요할까
- 코드의 재사용성
모듈화된 코드는 다른 프로젝트나 애플리케이션에서 재사용 가능
➰ ex. 유틸리티 함수 or 라이브러리 모듈 ➡ 여러 프로젝트에서 사용 가능 - 유지보수성
특정 모듈만 수정해도 나머지 코드에는 영향 ❌
➡ 버그 수정/기능 추가 용이 - 네임스페이스
변수와 함수가 모듈 범위 내에서만 유효하기 때문에 전역 네임스페이스 오염 방지 가능
➡ 코드 충돌 ⬇, 코드 안정성 ⬆ - 의존성 관리
모듈 간 의존성 명확하게 정의하고 관리 가능
각 모듈이 필요한 다른 모듈을 명시적으로 선언하기 때문에 의존성 추적/관리 더욱 용이 - 조직화
매우 방대한 대규모 애플리케이션에서 코드를 기능별로 나누어 체계적 구성/관리 가능
🔎 모듈 번들러(Module Bundler)
모듈 번들링
웹 애플리케이션을 구성하는 수많은 자원들을 하나로 병합/압축해주는 동작
모듈 번들러
번들링을 할 수 있게 합쳐주는 도구
➡ 여러 개의 파일을 하나의 파일로 합쳐주는 역할
❓ 모듈 번들러는 왜 필요할까
모듈을 이용하려면 모든 파일을 네트워크 통신을 통해 가져와야 한다
파일 하나하나를 요청하고 가져온다면 로딩 속도는 당연히 느려질 것
추가로, 웹 서비스를 개발/배포할 때 HTML, CSS, JS 압축, 이미지 압축, CSS 전처리기 변환 등과 같은 작업을 해야했기 때문에, 로딩 속도를 개선함과 동시에 이런 작업들을 자동화해주는 도구들이 필요했다!
✅ 최신 프론트엔드에서 가장 많이 사용되고 있는 웹팩(Webpack)이 모듈 번들러 중 하나
Hello, World!