안녕하세요, 독자 여러분! 개발자의 삶입니다. 😊
35일차 포스팅에서는 점 세 개의 마법, 전개 연산자와 나머지 매개변수에 대해 알아보았습니다. 배열과 객체를 자유자재로 다루는 기술을 익히셨으니 이제 데이터를 다루는 데는 큰 자신감이 생기셨을 겁니다.
하지만 우리가 만드는 투두 리스트나 날씨 앱의 규모가 점점 커진다면 어떨까요? 하나의 자바스크립트 파일(script.js)에 수천, 수만 줄의 코드가 쌓이게 됩니다. 오늘은 이렇게 복잡해진 코드를 기능별로 깔끔하게 여러 파일로 나누고, 필요할 때마다 조립해서 사용하는 자바스크립트 모듈(Module) 시스템에 대해 알아보겠습니다.
1. 도입 (Intro)
책상 위에 연필, 지우개, 가위, 서류가 마구잡이로 섞여 있다고 상상해 보세요. 필요한 물건을 찾기 힘들고 작업 효율도 떨어질 것입니다. 코딩도 마찬가지입니다. 모든 기능을 하나의 파일에 몰아넣으면 에러를 찾기도 힘들고, 나중에 코드를 수정하기도 매우 어렵습니다.
연필은 필통에, 서류는 서랍에 따로 분류해 두듯, 자바스크립트도 기능별로 파일을 쪼개어 관리할 수 있습니다. 이렇게 쪼개진 각각의 파일을 우리는 모듈(Module)이라고 부릅니다.
2. 개념 설명: 물건 진열하기와 사오기
모듈 시스템을 이해하려면 딱 두 가지 단어만 기억하시면 됩니다. 바로 Export(내보내기)와 Import(가져오기)입니다.
A. Export (내보내기)
- 역할: 내가 만든 자바스크립트 파일 안의 변수나 함수를 외부에서 쓸 수 있도록 허락해 주는 명령어입니다.
- 비유: 상점 주인이 창고에 있는 물건 중 팔고 싶은 물건만 진열대에 올려놓는 것과 같습니다.
B. Import (가져오기)
- 역할: 다른 자바스크립트 파일에서 Export된 변수나 함수를 내 파일로 불러오는 명령어입니다.
- 비유: 손님이 상점 진열대에 있는 물건을 사서 내 장바구니에 담는 것과 같습니다.
C. HTML 설정 (중요!) 모듈을 사용하려면 HTML 파일에서 자바스크립트를 불러올 때, 브라우저에게 "이 파일은 일반 스크립트가 아니라 모듈이야!"라고 알려주어야 합니다. <script type="module" src="..."></script>처럼 type 속성을 반드시 추가해야 합니다.
3. 예시 코드: 계산기 기능 나누기
덧셈, 뺄셈 기능이 있는 수학 모듈(math.js)을 만들고, 메인 파일(main.js)에서 이를 불러와 사용하는 예시를 살펴보겠습니다.
첫 번째 파일: math.js (상점)
// math.js 파일
// 외부에서 쓸 수 있도록 함수 앞에 export를 붙입니다.
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
// export가 없는 이 함수는 외부에서 쓸 수 없습니다. (창고에 숨겨둔 물건)
function multiply(a, b) {
return a * b;
}
두 번째 파일: main.js (손님)
// main.js 파일
// math.js에서 내보낸 add와 subtract 함수를 중괄호 {}를 사용해 가져옵니다.
import { add, subtract } from './math.js';
const sumResult = add(10, 5);
const subResult = subtract(10, 5);
console.log("덧셈 결과:", sumResult); // 출력: 덧셈 결과: 15
console.log("뺄셈 결과:", subResult); // 출력: 뺄셈 결과: 5
// 주의: multiply 함수는 import할 수 없습니다!
세 번째 파일: index.html (연결 고리)
<!DOCTYPE html>
<html>
<body>
<h2>자바스크립트 모듈 테스트</h2>
<script type="module" src="main.js"></script>
</body>
</html>
4. 코드 설명: 모듈의 규칙
import 경로 작성법: from 뒤에는 파일의 상대 경로를 적어줍니다. 같은 폴더에 있다면 반드시 ./를 앞에 붙여야 합니다 ('./math.js').
이름 그대로 가져오기: export로 내보낸 이름 그대로 중괄호 {} 안에 넣어서 가져와야 합니다. 이를 Named Export(이름 붙여 내보내기)라고 부릅니다.
파일 스코프(Scope)의 독립성: 예전에는 여러 스크립트 파일을 HTML에 불러오면 변수 이름이 겹쳐서 충돌하는 문제가 빈번했습니다. 하지만 모듈을 사용하면 각 파일이 독립적인 공간(스코프)을 가지게 되어 변수 이름이 겹칠 걱정을 하지 않아도 됩니다.
5. 마무리
오늘은 36일차 포스팅으로, 길고 복잡해진 자바스크립트 코드를 깔끔하게 정리하는 모듈(Import/Export) 시스템에 대해 알아보았습니다. 이제 여러분은 아무리 거대한 프로젝트라도 레고 블록을 조립하듯 기능별로 파일을 나누고 합치면서 체계적으로 개발할 수 있는 구조적인 능력을 갖추게 되었습니다.
다음 37일차 포스팅에서는 자바스크립트를 배우는 수많은 초보자를 좌절하게 만드는 악명 높은 키워드, 바로 this에 대해 다루어 보겠습니다. 개념만 정확히 잡으면 절대 어렵지 않으니, 제가 아주 쉽고 명쾌하게 풀어드리겠습니다!
오늘도 한 단계 더 성장하신 여러분을 응원합니다. 다음 시간에 만나요! 👋
'IT > Javascript' 카테고리의 다른 글
| JavaScript: 나만의 대시보드 만들기 (1) - UI 구성과 실시간 시계 ⏱️ (0) | 2026.05.02 |
|---|---|
| JavaScript: 자바스크립트 최대의 난제? 'this' 키워드 기초 완벽 가이드 🧭 (0) | 2026.04.30 |
| JavaScript: 점 세 개의 마법! 전개 연산자(Spread)와 나머지 매개변수(Rest) (0) | 2026.04.21 |
| JavaScript: 객체와 배열의 포장지 벗기기! 구조 분해 할당 (Destructuring Assignment) 기초부터 알아보기 🎁 (0) | 2026.04.16 |
| JavaScript: 대량의 데이터 요리하기! 배열 메서드 map과 filter 기초부터 알아보기 🍳 (0) | 2026.04.13 |