자바스크립트 모듈
열여섯 번째 포스팅까지 다양한 주제를 다루었다면, 이번에는 "문법 및 핵심 개념" 범주에 속하는 "모듈"에 대해 작성해보려 한다. 모듈(Module)은 ES6에서 도입된 코드 분리 및 재사용을 위한 문법으로, 자바스크립트 애플리케이션의 구조를 체계적으로 관리한다.
모듈은 자바스크립트에서 코드를 파일 단위로 분할하며, 외부에서 필요한 기능만 노출한다. 이번 포스팅에서는 모듈의 개념, 선언 및 내보내기, 가져오기 방식, 활용 방법, 그리고 실습 예제를 작성해볼 예정이다.
모듈은 자바스크립트의 유지보수를 이해하는 데 필수적이다. 콘솔 또는 HTML 파일에서 예제를 실행하며 모듈의 동작을 체감할 수 있다.
모듈의 개념
모듈은 독립적인 코드 단위를 의미한다. 자바스크립트에서 모듈은 ES6 이전의 IIFE(즉시 실행 함수)나 CommonJS 방식을 대체하여, 표준화된 방식으로 코드를 분리한다. 모듈은 변수, 함수, 클래스를 캡슐화하며, 외부로 내보내기(export)와 가져오기(import)를 통해 관리한다.
다음은 기본적인 모듈 예제이다:
// utils.js
export function sayHello(name) {
return `안녕, ${name}입니다.`;
}
// main.js
import { sayHello } from './utils.js';
console.log(sayHello('홍길동')); // "안녕, 홍길동입니다."
위 예제는 모듈을 정의하고 사용한다.
모듈은 코드의 재사용성과 가독성을 높인다. 이는 대규모 애플리케이션 개발에서 필수적이다.
모듈 선언과 내보내기
모듈은 export 키워드로 내보낸다.
1. 명명된 내보내기
개별 항목을 내보낸다:
// math.js
export function add(a, b) {
return a + b;
}
export const PI = 3.14;
// app.js
import { add, PI } from './math.js';
console.log(add(2, 3)); // 5
console.log(PI); // 3.14
2. 기본 내보내기
단일 항목을 기본으로 내보낸다:
// user.js
export default class User {
constructor(name) {
this.name = name;
}
greet() {
return `안녕, ${this.name}`;
}
}
// app.js
import User from './user.js';
const user = new User('김유신');
console.log(user.greet()); // "안녕, 김유신"
예제: 내보내기 활용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>모듈 내보내기</title>
<script type="module">
// 모듈로 사용하려면 type="module" 필요
import { greet } from './greet.js';
document.getElementById('btn').addEventListener('click', () => {
document.getElementById('result').textContent = greet('홍길동');
});
</script>
</head>
<body>
<button id="btn">인사</button>
<div id="result"></div>
</body>
</html>
// greet.js
<script type="module">
export function greet(name) {
return `안녕하세요, ${name}님!`;
}
</script>
이 예제는 명명된 내보내기를 사용한다. (참고: 실제 실행은 로컬 서버 필요)
모듈 가져오기
모듈은 import 키워드로 가져온다.
1. 명명된 가져오기
특정 항목을 가져온다:
import { multiply, divide } from './math.js';
2. 기본 가져오기
기본 내보내기 항목을 가져온다:
import User from './user.js';
3. 전체 가져오기
*로 모든 항목을 가져온다:
import * as utils from './utils.js';
console.log(utils.add(1, 2)); // 3
예제: 가져오기 방식
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>모듈 가져오기</title>
<script type="module">
import * as calc from './calc.js';
document.getElementById('addBtn').addEventListener('click', () => {
document.getElementById('result').textContent = calc.add(5, 3);
});
document.getElementById('subBtn').addEventListener('click', () => {
document.getElementById('result').textContent = calc.subtract(5, 3);
});
</script>
</head>
<body>
<button id="addBtn">더하기</button>
<button id="subBtn">빼기</button>
<div id="result"></div>
</body>
</html>
// calc.js
<script type="module">
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
</script>
이 예제는 전체 가져오기를 사용한다.
모듈 활용
모듈은 다양한 상황에서 활용된다.
1. 유틸리티 모듈
공통 기능을 모듈화한다:
// stringUtils.js
export function capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
// app.js
import { capitalize } from './stringUtils.js';
console.log(capitalize('hello')); // "Hello"
2. 데이터 모듈
데이터를 관리한다:
// data.js
export const config = {
apiKey: 'abc123',
baseUrl: 'https://api.example.com'
};
// app.js
import { config } from './data.js';
console.log(config.apiKey); // "abc123"
예제: 모듈 활용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>모듈 활용</title>
<script type="module">
import { formatDate } from './dateUtils.js';
document.getElementById('btn').addEventListener('click', () => {
document.getElementById('result').textContent = formatDate(new Date());
});
</script>
</head>
<body>
<button id="btn">날짜 표시</button>
<div id="result"></div>
</body>
</html>
// dateUtils.js
<script type="module">
export function formatDate(date) {
return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
}
</script>
이 예제는 날짜 형식을 모듈화한다.
실습 예제: 모듈 관리
모듈을 활용한 관리 예제이다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>모듈 관리</title>
<style>
#taskList {
list-style-type: none;
padding: 0;
}
#taskList li {
padding: 5px;
background: #f0f0f0;
margin: 5px 0;
}
</style>
<script type="module">
import { TaskManager } from './taskManager.js';
const manager = new TaskManager();
const input = document.getElementById('input');
const addBtn = document.getElementById('addBtn');
addBtn.addEventListener('click', () => {
if (input.value) {
manager.addTask(input.value);
input.value = '';
}
});
</script>
</head>
<body>
<input type="text" id="input" placeholder="할 일 입력">
<button id="addBtn">추가</button>
<ul id="taskList"></ul>
</body>
</html>
// taskManager.js
<script type="module">
export class TaskManager {
constructor() {
this.tasks = [];
}
addTask(task) {
this.tasks.push(task);
this.render();
}
render() {
const list = document.getElementById('taskList');
list.innerHTML = '';
this.tasks.forEach((task, index) => {
const li = document.createElement('li');
li.textContent = `${index + 1}. ${task}`;
list.appendChild(li);
});
}
}
</script>
이 예제는 모듈로 할 일을 관리한다.
실무에서의 모듈
실무에서는 API 호출을 모듈화한다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>API 모듈</title>
<script type="module">
import { fetchData } from './api.js';
document.getElementById('fetchBtn').addEventListener('click', async () => {
const data = await fetchData('https://jsonplaceholder.typicode.com/users/1');
document.getElementById('result').textContent = JSON.stringify(data, null, 2);
});
</script>
</head>
<body>
<button id="fetchBtn">데이터 가져오기</button>
<div id="result"></div>
</body>
</html>
// api.js
<script type="module">
export async function fetchData(url) {
const response = await fetch(url);
return await response.json();
}
</script>
이 예제는 API 호출을 모듈화한다.
주의할 점
모듈은 로컬 실행 시 서버가 필요하다. 이름 충돌을 방지한다. 비동기 모듈 로딩을 고려한다.
결론
모듈의 선언, 내보내기를 학습하며 실습 예제를 통해 알아보았다. 다음 포스팅에서는 템플릿 리터럴에 대해 작성해볼 예정이다.
'코딩 공부 > 자바스크립트' 카테고리의 다른 글
| 19. 자바스크립트 디스트럭처링 (Javascript Destructuring) (0) | 2025.02.28 |
|---|---|
| 18. 자바스크립트 템플릿 리터럴 (0) | 2025.02.28 |
| 16. 자바스크립트 클래스 (1) | 2025.02.27 |
| 15. 자바스크립트 this 바인딩 (0) | 2025.02.27 |
| 14. 자바스크립트 클로저 (0) | 2025.02.27 |