모듈 프로그래밍?
개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 옵니다.
이때 분리된 파일 각각을 '모듈(module)'이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다.
특징
1.재사용성
한 번 작성된 모듈은 다른 프로젝트나 프로그램에서 재사용할 수 있습니다.
2캡슐화
모듈은 내부 구현을 숨기고, 외부에 필요한 인터페이스(API)만 제공합니다. 이를 통해 코드의 복잡성을 줄이고, 안전성을 높일 수 있습니다.
3.의존성 관리
모듈 간의 의존성을 명확히 정의하고 관리할 수 있습니다. 이를 통해 예상치 못한 오류를 줄일 수 있습니다.
4.유지보수 용이성
모듈은 독립적으로 테스트, 수정, 교체할 수 있습니다. 하나의 모듈에 문제가 있어도 다른 모듈에 영향을 최소화합니다.
// 📁 sayHi.js
export function sayHi(user) {
alert(`Hello, ${user}!`);
}
// 📁 main.js
import {sayHi} from './sayHi.js';
alert(sayHi); // 함수
sayHi('John'); // Hello, John!모듈 프로그래밍은 소프트웨어를 작고 독립적인 단위(모듈)로 나누어 개발하고 관리하는 프로그래밍 접근 방식입니다.
모듈의 핵심 기능
1.엄격 모드로 실행됨
모듈은 항상 엄격 모드(use strict)로 실행됩니다. 선언되지 않은 변수에 값을 할당하는 등의 코드는 에러를 발생시킵니다
<script type="module">
a = 5; // 에러
</script>2.모듈 레벨 스코프
모듈은 자신만의 스코프가 있습니다. 따라서 모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근할 수 없습니다.
<!doctype html>
//html
<script type="module" src="user.js"></script>
<script type="module" src="hello.js"></script>
//hello.js
alert(user);
//user.js
let user = "John";외부에 공개하려는 모듈은 export 해야 하고, 내보내진 모듈을 가져와 사용하려면 import 해줘야 합니다. 전역변수를 대신하여 hello.js에 user.js를 가져와 필요한 기능을 얻을 수 있습니다. 아래와 같이 코드를 수정하면 정상적으로 동작합니다.
3. this는 undefined
모듈 최상위 레벨의 this는 undefined입니다.
모듈이 아닌 일반 스크립트의 this는 전역 객체인 것과 대조됩니다.
<script>
alert(this); // window
</script>
<script type="module">
alert(this); // undefined
</script>4. 모듈 내보내고 가져오기
선언부 앞에 export 붙이기
변수나 함수, 클래스를 선언할 때 맨 앞에 export를 붙이면 내보내기가 가능합니다.
export let months = ['Jan', 'Feb', 'Mar','Apr', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
선언부와 떨어진 곳에 export 붙이기
선언부와 export가 떨어져 있어도 내보내기가 가능합니다. 아래 예시에선 함수를 먼저 선언한 후, 마지막 줄에서 내보냅니다.
// 📁 say.js
function sayHi(user) {
alert(`Hello, ${user}!`);
}
function sayBye(user) {
alert(`Bye, ${user}!`);
}
export {sayHi, sayBye}; // 두 함수를 내보냄import
무언갈 가져오고 싶다면 아래와 같이 이에 대한 목록을 만들어 import {...}안에 적어주면 됩니다.
// 📁 main.js
import {sayHi, sayBye} from './say.js';
sayHi('John'); // Hello, John!
sayBye('John'); // Bye, John!export default
모듈은 export default라는 특별한 문법을 지원합니다. export default를 사용하면 '해당 모듈엔 개체가 하나만 있다’는 사실을 명확히 나타낼 수 있습니다.
// 📁 user.js
export default class User { // export 옆에 'default'를 추가해보았습니다.
constructor(name) {
this.name = name;
}
}장점
1.코드 가독성
모듈화를 통해 코드 구조를 명확히 하여 이해하기 쉽습니다.
2.재사용성 증가
한 번 작성한 모듈을 여러 곳에서 사용할 수 있습니다.
3.버그 감소
모듈은 독립적으로 테스트 가능하여 문제를 빠르게 찾고 해결할 수 있습니다.
4.확장성
새로운 기능을 추가할 때 기존 모듈에 최소한의 영향을 줍니다.
단점
1.초기 설계의 복잡성
모듈화를 잘 설계하려면 초기 설계 단계에서 많은 고민이 필요합니다.
2.의존성 관리
모듈 간 의존성이 많아지면 관리가 복잡해질 수 있습니다.
3.성능
모듈 수가 많아지면 로드 시간이나 실행 속도에 영향을 미칠 수 있습니다(특히 브라우저 환경에서).
