📘 18.3.1 모듈 패턴 - 정리정돈의 달인
안녕하세요, 여러분. 혹시 여러분의 방을 둘러보세요. 책들이 여기저기 흩어져 있고, 필요한 물건들이 어디에 있는지 찾기 어려운 때가 있지 않나요?
코딩을 하다 보면, 우리가 만든 함수들과 변수들도 마치 정리되지 않은 방처럼 어수선해질 때가 있어요. 그럴 때 필요한 것이 바로 오늘 배울 '모듈 패턴'입니다.
이것은 우리가 지금까지 배운 함수와 클로저, 그리고 객체의 힘을 모두 모아서 만드는 정리 방법이에요. 차근차근 함께 살펴보실래요?
🧠 먼저 용어를 알아볼까요?
코드를 정리하는 일에도 특별한 용어들이 있어요. 천천히 살펴보겠습니다.
| 용어 | 의미 |
|---|---|
| 모듈 패턴 | 코드를 깔끔하게 정리하는 방법이에요. 서랍장처럼 관련된 것들을 모아두는 거죠. |
| 은밀한 보관 | 중요한 물건을 서랍 안에 넣어서 다른 사람이 함부로 만지지 못하게 하는 것이에요. |
| 숨겨진 정보 | 서랍 안에 보관된 물건들처럼, 모듈 밖에서는 볼 수 없는 정보예요. |
| 공개 통로 | 서랍 밖으로 내놓은 물건들처럼, 다른 사람들이 사용할 수 있는 기능들이에요. |
이런 용어들이 처음에는 조금 낯설 수 있어요. 하지만 우리가 차근차근 설명해드릴 테니까 걱정하지 마세요.
✨ 모듈 패턴의 핵심 개념
모듈 패턴은 참 신기한 방법이에요. 여러분의 방에 있는 정리함을 떠올려보세요.
첫 번째로, 이 정리함은 관련된 물건들을 함께 모아두는 역할을 해요. 그림 그리기 도구들은 한 칸에, 책들은 다른 칸에 정리하는 것처럼요. 우리 코드에서도 마찬가지로 관련된 기능들을 하나의 모듈에 모아둡니다.
두 번째로, 이 정리함은 중요한 물건은 안전하게 보관하고, 사용해도 되는 물건만 밖으로 내놓아줘요. 잠금장치가 있는 서랍과 같은 원리죠. 코드에서는 다른 부분이 함부로 건드리면 안 되는 것들은 숨기고, 사용해도 되는 기능만 보여줍니다.
세 번째로, 이 정리함은 다른 정리함과 이름이 겹치지 않게 관리해줘요. 집 곳곳에 물건이 흩어져 있으면 헷갈리지만, 각자의 정리함에 들어있으면 찾기 쉽잖아요.
비유로 이해하기: 학용품 정리함의 이야기
여러분이 여러 가지 학용품 세트를 가지고 있다고 생각해보세요. 그림 그리기 세트, 공부하기 세트, 만들기 세트가 있어요.
만약 모든 학용품들을 한 큰 상자에 섞어서 넣어두면 어떨까요? 그림을 그리려고 할 때 필요한 색연필을 찾기가 참 어려울 거예요. 하지만 각각의 학용품을 전용 정리함에 나누어 정리해두면 어떨까요?
그림 그리기 정리함 안에는 색연필, 크레파스, 스케치북 등이 들어있고, 정리함 겉면에는 "그림 완성하기", "색칠하기" 같은 사용법만 적혀있어요. 정리함 안의 복잡한 정리 방법은 보이지 않지만, 정리함이 알아서 처리해주죠.
이것이 바로 모듈 패턴이에요. 각각의 기능을 전용 정리함(모듈)에 넣어서 깔끔하게 정리하고, 사용하는 사람에게는 간단한 사용법만 알려주는 거예요.
🎯 모듈 패턴을 사용하는 이유
그렇다면 왜 우리가 이런 정리정돈을 해야 할까요? 여러 가지 좋은 이유들이 있어요.
첫 번째, 안전성이 높아져요. 중요한 일기장을 서랍 깊숙이 보관하는 것처럼, 다른 코드가 함부로 건드리면 안 되는 부분을 안전하게 보호할 수 있어요. 실수로 중요한 것을 손상시킬 걱정이 줄어들죠.
두 번째, 정리정돈이 완벽해져요. 집안의 모든 물건이 제자리에 있으면 찾기 쉽고 깔끔하죠? 코드도 마찬가지로 각자의 역할에 맞는 곳에 정리되어 있으면 나중에 수정하거나 새로운 기능을 추가하기가 훨씬 수월해요.
세 번째, 이름이 겹치는 문제가 사라져요. 학교에서 같은 이름을 가진 친구들이 있으면 헷갈리죠? 하지만 "3학년 민수", "5학년 민수"라고 구분하면 헷갈리지 않아요. 모듈 패턴도 이런 식으로 이름이 겹치는 문제를 해결해줘요.
마지막으로, 다른 프로젝트에서 재사용하기 쉬워져요. 학용품 정리함을 친구 집에 가져가서도 똑같이 사용할 수 있는 것처럼, 잘 만들어진 모듈은 다른 프로그램에서도 쉽게 사용할 수 있어요.
⚙️ 모듈 패턴의 기본 구조
이제 실제로 모듈 패턴이 어떻게 생겼는지 살펴볼까요? 특별한 정리함을 만드는 방법 같아요.
// 똑똑한 정리함(모듈)을 만드는 방법이에요
const 정리함이름 = (function() {
// 정리함 안에 숨겨둘 비밀 물건들 (숨겨진 정보와 기능)
let 비밀보물 = "아무도 볼 수 없어요";
function 비밀기능() {
console.log("이것도 숨겨진 기능이에요"); // 비밀 기능 실행
console.log(비밀보물); // 비밀 보물 출력
}
// 정리함 밖으로 내놓을 물건들 (공개 연결통로)
return {
// 사람들이 사용할 수 있는 기능
사용할수있는기능: function() {
console.log("이건 누구나 사용할 수 있어요");
// 비밀 기능을 안에서 사용할 수는 있어요
비밀기능();
},
// 또 다른 공개 기능
또다른기능: function() {
console.log("이것도 공개된 기능이에요");
return 비밀보물; // 비밀 보물을 안전하게 돌려줘요
}
};
})();이 구조를 보면, 큰 괄호 () 안에 모든 코드가 들어가 있고, 맨 마지막에 ()가 또 있어서 바로 실행되는 것을 볼 수 있어요. 이것을 즉시 실행하는 특별한 기능이라고 해요. 정리함을 만들자마자 바로 사용할 수 있게 준비하는 거예요.
🧪 재미있는 예제로 익혀보기
이제 실제로 모듈 패턴을 사용해서 재미있는 것들을 만들어볼까요?
🔹 예제 1: 똑똑한 계산기 만들기
우리만의 특별한 계산기를 만들어보겠어요. 이 계산기는 계산 결과를 기억하고, 실수를 방지해주는 계산기예요.
// Ex1) 똑똑한 계산기를 만들어보자
const 똑똑한계산기 = (function() {
// 계산 결과를 기억하는 비밀 저장소
let 결과 = 0;
// 숫자가 올바른지 확인하는 비밀 도우미
function 숫자인지확인(숫자) {
return typeof 숫자 === 'number' && !isNaN(숫자); // 숫자이고 NaN이 아닌지 확인
}
// 결과를 업데이트하고 알려주는 비밀 도우미
function 결과업데이트(새결과) {
결과 = 새결과; // 결과값 업데이트
console.log(`계산 결과: ${결과}`); // 결과 출력
return 결과; // 결과 반환
}
// 모든 사람이 사용할 수 있는 기능들
return {
// 현재 결과 보기
결과보기: function() {
console.log(`현재 저장된 값: ${결과}`);
return 결과; // 현재 결과 반환
},
// 더하기 기능
더하기: function(숫자) {
if (!숫자인지확인(숫자)) { // 숫자가 올바른지 확인
console.log("앗! 올바른 숫자를 입력해주세요 🤔");
return 결과; // 현재 결과 반환
}
console.log(`${결과} + ${숫자}를 계산해요...`);
return 결과업데이트(결과 + 숫자); // 더하기 연산 후 결과 업데이트
},
// 빼기 기능
빼기: function(숫자) {
if (!숫자인지확인(숫자)) { // 숫자가 올바른지 확인
console.log("앗! 올바른 숫자를 입력해주세요 🤔");
return 결과; // 현재 결과 반환
}
console.log(`${결과} - ${숫자}를 계산해요...`);
return 결과업데이트(결과 - 숫자); // 빼기 연산 후 결과 업데이트
},
// 곱하기 기능
곱하기: function(숫자) {
if (!숫자인지확인(숫자)) { // 숫자가 올바른지 확인
console.log("앗! 올바른 숫자를 입력해주세요 🤔");
return 결과; // 현재 결과 반환
}
console.log(`${결과} × ${숫자}를 계산해요...`);
return 결과업데이트(결과 * 숫자); // 곱하기 연산 후 결과 업데이트
},
// 초기화 기능
초기화: function() {
console.log("계산기를 깨끗하게 청소해요! ✨");
return 결과업데이트(0); // 결과를 0으로 초기화
}
};
})();
// 똑똑한 계산기 사용해보기
console.log("=== 똑똑한 계산기를 시작해요! ===");
똑똑한계산기.결과보기(); // 현재 저장된 값: 0
똑똑한계산기.더하기(5); // 0 + 5를 계산해요... 계산 결과: 5
똑똑한계산기.곱하기(2); // 5 × 2를 계산해요... 계산 결과: 10
똑똑한계산기.빼기(3); // 10 - 3를 계산해요... 계산 결과: 7
똑똑한계산기.초기화(); // 계산기를 깨끗하게 청소해요! ✨ 계산 결과: 0🔹 예제 2: 친구 목록 관리자 만들기
이번에는 친구들의 정보를 안전하게 관리해주는 특별한 관리자를 만들어볼까요?
// Ex2) 친구들의 정보를 안전하게 관리하는 관리자를 만들어보자
const 친구관리자 = (function() {
// 친구들의 정보를 담는 비밀 저장공간
const 친구목록 = [];
// 같은 이름의 친구가 있는지 확인하는 비밀 도우미
function 이름중복확인(이름) {
return 친구목록.some(친구 => 친구.이름 === 이름); // 중복 이름 검사
}
// 친구 정보가 올바른지 확인하는 비밀 도우미
function 친구정보확인(친구정보) {
if (!친구정보.이름 || typeof 친구정보.이름 !== 'string') {
return { 올바름: false, 메시지: "친구의 이름을 정확히 입력해주세요 😊" };
}
if (!친구정보.취미 || typeof 친구정보.취미 !== 'string') {
return { 올바름: false, 메시지: "친구의 취미를 알려주세요 🎨" };
}
if (이름중복확인(친구정보.이름)) {
return { 올바름: false, 메시지: "이미 같은 이름의 친구가 있어요! 🤗" };
}
return { 올바름: true }; // 모든 검사 통과
}
// 모든 사람이 사용할 수 있는 기능들
return {
// 새 친구 추가하기
친구추가: function(친구정보) {
const 확인결과 = 친구정보확인(친구정보); // 친구 정보 검증
if (!확인결과.올바름) {
console.log(확인결과.메시지); // 오류 메시지 출력
return false; // 추가 실패
}
친구목록.push({
이름: 친구정보.이름, // 친구 이름
취미: 친구정보.취미, // 친구 취미
만난날: new Date().toLocaleDateString() // 친구가 된 날
});
console.log(`🎉 ${친구정보.이름} 친구가 추가되었어요!`);
return true; // 추가 성공
},
// 친구 찾기
친구찾기: function(이름) {
const 친구 = 친구목록.find(친구 => 친구.이름 === 이름); // 이름으로 친구 찾기
if (친구) {
console.log(`🔍 ${친구.이름} 친구를 찾았어요!`);
console.log(` 취미: ${친구.취미}`); // 친구 취미 출력
console.log(` 친구가 된 날: ${친구.만난날}`); // 친구가 된 날 출력
return { ...친구 }; // 복사본을 주어서 원본을 보호해요
} else {
console.log(`😅 ${이름} 친구를 찾을 수 없어요`);
return null; // 찾지 못함
}
},
// 모든 친구 목록 보기
모든친구보기: function() {
if (친구목록.length === 0) {
console.log("아직 등록된 친구가 없어요. 첫 번째 친구를 추가해보세요! 😊");
return []; // 빈 배열 반환
}
console.log(`📋 총 ${친구목록.length}명의 친구가 있어요:`);
친구목록.forEach((친구, 순서) => {
console.log(` ${순서 + 1}. ${친구.이름} (취미: ${친구.취미})`);
});
return [...친구목록]; // 복사본을 주어서 원본을 보호해요
},
// 친구와 작별하기
친구삭제: function(이름) {
const 순서 = 친구목록.findIndex(친구 => 친구.이름 === 이름); // 친구 위치 찾기
if (순서 !== -1) {
const 삭제된친구 = 친구목록.splice(순서, 1)[0]; // 친구 삭제
console.log(`👋 ${삭제된친구.이름} 친구와 작별했어요`);
return true; // 삭제 성공
}
console.log(`😅 ${이름} 친구를 찾을 수 없어서 삭제할 수 없어요`);
return false; // 삭제 실패
}
};
})();
// 친구 관리자 사용해보기
console.log("=== 친구 관리자를 시작해요! ===");
친구관리자.친구추가({ 이름: "철수", 취미: "축구" }); // 철수 친구 추가
친구관리자.친구추가({ 이름: "영희", 취미: "그림 그리기" }); // 영희 친구 추가
친구관리자.모든친구보기(); // 모든 친구 목록 보기
친구관리자.친구찾기("철수"); // 철수 친구 찾기
// 같은 이름으로 다시 추가해보기
친구관리자.친구추가({ 이름: "철수", 취미: "농구" }); // 이미 같은 이름의 친구가 있어요!🔄 모듈 패턴 사용 과정 정리
지금까지 배운 모듈 패턴 사용 과정을 차근차근 정리해보겠습니다.
첫 번째 단계는 계획 세우기입니다. "어떤 기능들을 하나의 정리함에 넣을까?"를 생각해보는 거예요. 관련된 기능들끼리 모아두면 찾기도 쉽고 관리하기도 편해요.
두 번째는 비밀과 공개 구분하기입니다. 정리함 안에 숨겨둘 것과 밖으로 내놓을 것을 나누는 거예요. 중요한 데이터나 복잡한 처리 과정은 숨기고, 사용자가 필요한 기능만 공개해요.
세 번째는 똑똑한 정리함 만들기입니다. (function() { ... })()라는 특별한 방법을 사용해서 독립적인 공간을 만들어요. 이 공간 안에서는 다른 곳과 이름이 겹칠 걱정이 없어요.
네 번째는 비밀 물건들 정의하기입니다. 정리함 안에서만 사용할 정보와 기능들을 만들어요. 이것들은 밖에서 절대 볼 수 없어요.
다섯 번째는 공개 기능 만들기입니다. return 을 사용해서 다른 사람들이 사용할 수 있는 기능들을 정보 묶음 형태로 내놓아요.
마지막은 모듈 사용하기입니다. 완성된 모듈의 공개 기능들을 통해서만 정리함과 소통해요.
🧚♀️ 이야기로 다시 배우기: 똑똑한 책상 정리법
지금까지 배운 내용을 이야기로 다시 정리해볼까요?
한 학교에 정리정돈을 정말 잘하는 학생이 있었어요. 이 학생의 책상은 참 특별했어요.
책상에는 여러 개의 똑똑한 서랍이 있었는데, 각각의 서랍은 특별한 능력을 가지고 있었어요. 공부용품 서랍에는 연필, 지우개, 노트가 들어있고, 미술용품 서랍에는 색연필과 도화지가 정리되어 있었어요.
가장 신기한 점은, 각 서랍마다 작은 도우미가 있다는 것이었어요. 다른 친구들이 "연필 하나 빌려줘!"라고 하면, 공부용품 서랍의 도우미가 "네, 어떤 연필을 원하세요?"라고 물어보고 깨끗한 연필만 건네주었어요. 서랍 안의 복잡한 정리 방법은 절대 보여주지 않았어요.
또한, 각 서랍은 완전히 독립적이었어요. 공부용품 서랍의 도우미와 미술용품 서랍의 도우미가 서로 헷갈리지 않았고, 서랍 안의 물건들도 절대 섞이지 않았어요.
다른 친구들은 도우미와만 대화하면 되니까 정말 편했어요. 복잡한 정리 방법을 알 필요도 없고, 실수로 뭔가를 망가뜨릴 걱정도 없었거든요.
이것이 바로 모듈 패턴의 힘이에요. 우리의 코드도 이런 학생의 책상처럼 깔끔하고 안전하게 만들 수 있어요.
🧠 자주 하는 실수와 주의할 점
모듈 패턴을 사용할 때 조심해야 할 몇 가지가 있어요. 이런 실수들을 미리 알아두면 더 안전한 코딩을 할 수 있답니다.
❌ 실수 1: 비밀 저장소에 손 넣으려고 하기
const 내모듈 = (function() {
let 비밀값 = "숨겨진 보물"; // 비밀로 숨겨진 정보
return {
공개기능: function() {
return "이건 볼 수 있어요!"; // 공개된 기능
}
};
})();
// 이렇게 하면 안 돼요!
console.log(내모듈.비밀값); // undefined (볼 수 없어요!)왜 이런 일이 생길까요? 모듈 패턴에서 비밀 정보는 정리함 안에 완전히 숨겨져 있어서 밖에서는 절대 볼 수 없어요. 잠긴 서랍 안의 일기장처럼 말이에요. 비밀 정보를 사용하려면 공개된 기능을 통해서만 접근해야 해요.
❌ 실수 2: 너무 많은 것을 하나의 정리함에 넣기
// 이렇게 하면 정리함이 너무 복잡해져요!
const 모든것모듈 = (function() {
let 사용자정보 = {}; // 사용자 관련 정보
let 게임점수 = 0; // 게임 관련 정보
let 날씨정보 = {}; // 날씨 관련 정보
let 음악재생목록 = []; // 음악 관련 정보
return {
사용자추가: function() { /* ... */ }, // 사용자 기능
점수올리기: function() { /* ... */ }, // 게임 기능
날씨확인: function() { /* ... */ }, // 날씨 기능
음악재생: function() { /* ... */ } // 음악 기능
// 너무 많은 기능들...
};
})();왜 문제가 될까요? 하나의 정리함에 너무 많은 서로 다른 물건을 넣으면 찾기도 어렵고 관리하기도 힘들어져요. 방 청소를 할 때도 의류함, 책장, 장난감 정리함을 따로 정리하는 것처럼, 모듈도 관련된 기능끼리만 모아두는 것이 좋아요.
✏️ 연습문제로 개념 다지기
지금부터는 연습문제를 함께 풀어보면서 모듈 패턴에 대해 더 깊이 이해해볼까요? 차근차근 따라와 주세요.
Q1. 간단한 카운터 관리자를 만들어보세요!
카운터는 숫자를 세는 도구예요. 숫자를 1씩 늘리거나 줄이거나, 0으로 초기화할 수 있어야 해요.
// Ex1) 숫자를 세는 똑똑한 카운터를 만들어보자
const 카운터관리자 = (function() {
// 숫자를 기억하는 비밀 저장소
let 숫자 = 0;
// 올바른 숫자인지 확인하는 비밀 도우미
function 숫자확인(값) {
return typeof 값 === 'number' && !isNaN(값); // 숫자이고 NaN이 아닌지 확인
}
// 공개할 기능들
return {
현재숫자보기: function() {
console.log(`현재 숫자: ${숫자}`);
return 숫자; // 현재 숫자 반환
},
하나증가: function() {
숫자++; // 숫자를 1 증가
console.log(`숫자가 ${숫자}로 증가했어요! 📈`);
return 숫자; // 증가된 숫자 반환
},
하나감소: function() {
숫자--; // 숫자를 1 감소
console.log(`숫자가 ${숫자}로 감소했어요! 📉`);
return 숫자; // 감소된 숫자 반환
},
숫자더하기: function(값) {
if (!숫자확인(값)) { // 올바른 숫자인지 확인
console.log("올바른 숫자를 입력해주세요! 🤔");
return 숫자; // 현재 숫자 반환
}
숫자 += 값; // 숫자에 값 더하기
console.log(`${값}을 더해서 ${숫자}가 되었어요! ➕`);
return 숫자; // 더해진 숫자 반환
},
초기화: function() {
숫자 = 0; // 숫자를 0으로 초기화
console.log("숫자를 0으로 초기화했어요! 🔄");
return 숫자; // 초기화된 숫자 반환
}
};
})();
// 카운터 관리자 사용해보기
카운터관리자.현재숫자보기(); // 현재 숫자: 0
카운터관리자.하나증가(); // 숫자가 1로 증가했어요!
카운터관리자.하나증가(); // 숫자가 2로 증가했어요!
카운터관리자.숫자더하기(5); // 5을 더해서 7가 되었어요!
카운터관리자.초기화(); // 숫자를 0으로 초기화했어요!Q2. 색깔 수집가를 만들어보세요!
좋아하는 색깔들을 모아두고 관리하는 수집가를 만들어보세요.
// Ex2) 예쁜 색깔들을 모아두는 수집가를 만들어보자
const 색깔수집가 = (function() {
// 색깔들을 담는 비밀 저장공간
const 색깔들 = [];
// 색깔이 이미 있는지 확인하는 비밀 도우미
function 색깔있는지확인(색깔) {
return 색깔들.includes(색깔); // 색깔이 목록에 있는지 확인
}
return {
색깔추가: function(색깔) {
if (!색깔 || typeof 색깔 !== 'string') { // 올바른 색깔 이름인지 확인
console.log("올바른 색깔 이름을 입력해주세요! 🎨");
return false; // 추가 실패
}
if (색깔있는지확인(색깔)) { // 중복 색깔 확인
console.log(`${색깔}은 이미 수집했어요! 😊`);
return false; // 추가 실패
}
색깔들.push(색깔); // 색깔 추가
console.log(`🎨 ${색깔}을 수집했어요!`);
return true; // 추가 성공
},
모든색깔보기: function() {
if (색깔들.length === 0) { // 색깔이 없으면
console.log("아직 수집한 색깔이 없어요! 색깔을 추가해보세요 🌈");
return []; // 빈 배열 반환
}
console.log(`🌈 총 ${색깔들.length}개의 색깔을 수집했어요:`);
색깔들.forEach((색깔, 순서) => {
console.log(` ${순서 + 1}. ${색깔}`); // 색깔 목록 출력
});
return [...색깔들]; // 복사본을 돌려줘요
},
색깔찾기: function(색깔) {
if (색깔있는지확인(색깔)) { // 색깔이 있는지 확인
console.log(`🔍 ${색깔}을 찾았어요!`);
return true; // 찾음
} else {
console.log(`😅 ${색깔}을 수집하지 않았어요`);
return false; // 못 찾음
}
},
수집개수: function() {
console.log(`📊 총 ${색깔들.length}개의 색깔을 수집했어요`);
return 색깔들.length; // 색깔 개수 반환
}
};
})();
// 색깔 수집가 사용해보기
색깔수집가.색깔추가("빨강"); // 빨간색 추가
색깔수집가.색깔추가("파랑"); // 파란색 추가
색깔수집가.색깔추가("노랑"); // 노란색 추가
색깔수집가.모든색깔보기(); // 모든 색깔 보기
색깔수집가.색깔찾기("파랑"); // 파란색 찾기
색깔수집가.수집개수(); // 수집 개수 확인🔥 보너스 도전 문제 (어려운 부분)
앞의 내용을 잘 이해했다면, 이제 조금 더 어려운 도전 문제를 풀어보세요!
보너스 Q1. 여러 개의 카운터를 관리하는 고급 관리자 만들기
// 보너스) 여러 개의 카운터를 관리하는 고급 시스템
const 카운터팩토리 = (function() {
const 카운터들 = {}; // 여러 개의 카운터를 담는 저장소
return {
카운터만들기: function(이름) {
if (카운터들[이름]) {
console.log(`${이름} 카운터가 이미 있어요!`);
return false;
}
카운터들[이름] = {
값: 0,
증가: function() { this.값++; return this.값; },
감소: function() { this.값--; return this.값; },
보기: function() { return this.값; }
};
console.log(`${이름} 카운터를 만들었어요!`);
return true;
},
카운터사용: function(이름) {
return 카운터들[이름] || null;
}
};
})();
// 사용 예시
카운터팩토리.카운터만들기("게임점수");
const 게임카운터 = 카운터팩토리.카운터사용("게임점수");
게임카운터.증가(); // 1
게임카운터.증가(); // 2🔄 17단원 복습 - 모듈과 관련된 내용들
18단원에서 모듈 패턴을 배우고 있으니, 17단원에서 배운 모듈 시스템과 어떤 차이가 있는지 복습해보겠습니다.
복습 문제 1: ES6 모듈과 모듈 패턴의 차이점
17단원에서 배운 ES6 모듈과 오늘 배운 모듈 패턴은 어떤 차이가 있을까요?
// 17단원: ES6 모듈 방식
// math.js 파일
export function 더하기(a, b) {
return a + b;
}
export function 빼기(a, b) {
return a - b;
}
// main.js 파일
import { 더하기, 빼기 } from './math.js';
// ==========================================
// 18단원: 모듈 패턴 방식 (한 파일 안에서)
const 수학도구 = (function() {
// 비밀 도우미 기능 (ES6에서는 불가능!)
function 숫자확인(x) {
return typeof x === 'number';
}
return {
더하기: function(a, b) {
if (!숫자확인(a) || !숫자확인(b)) {
return "숫자만 입력해주세요!";
}
return a + b;
},
빼기: function(a, b) {
if (!숫자확인(a) || !숫자확인(b)) {
return "숫자만 입력해주세요!";
}
return a - b;
}
};
})();주요 차이점들:
- ES6 모듈: 파일 단위로 분리, import/export 사용
- 모듈 패턴: 한 파일 안에서 완전히 숨겨진 기능 만들 수 있음
복습 문제 2: CommonJS 방식으로 모듈 패턴 사용하기
17단원에서 배운 Node.js의 CommonJS와 모듈 패턴을 함께 사용해보세요!
// 17단원 복습: calculator.js (Node.js 파일)
const 계산기모듈 = (function() {
let 기록 = []; // 계산 기록을 숨겨서 보관
function 기록추가(계산내용) {
기록.push({
내용: 계산내용,
시간: new Date().toLocaleString()
});
}
return {
더하기: function(a, b) {
const 결과 = a + b;
기록추가(`${a} + ${b} = ${결과}`);
return 결과;
},
기록보기: function() {
return [...기록]; // 복사본 반환
}
};
})();
// CommonJS로 내보내기 (17단원에서 배운 방법)
module.exports = 계산기모듈;
// 다른 파일에서 사용하기
// const 계산기 = require('./calculator.js');
// 계산기.더하기(3, 5);
// 계산기.기록보기();지금까지 모듈 패턴에 대해 배우면서 코드를 정리하고 안전하게 관리하는 방법을 알아보았어요. 정리정돈된 방처럼, 모듈 패턴을 사용하면 코드도 깔끔하고 안전하게 만들 수 있답니다.
다음 시간에는 또 다른 재미있는 패턴을 배워볼 거예요. 여러분도 오늘 배운 모듈 패턴으로 나만의 특별한 코드 정리함을 만들어보세요! 🎁✨
✅ 학습 완료 체크리스트
이번 시간에 배운 내용들을 모두 이해했는지 확인해보세요!
| 학습 내용 | 이해했나요? |
|---|---|
| 모듈 패턴의 기본 개념 | ✅ |
| 기본 사용법과 문법 | ✅ |
| 주요 특징과 차이점 | ✅ |
| 자주 하는 실수들 | ✅ |
| 실전 예제 이해 | ✅ |
| 17단원 복습 내용 | ✅ |
📂 마무리 정보
오늘 배운 18.3.1 모듈 패턴 내용이 여러분의 자바스크립트 지식 정리함에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!
기억할 점: 오늘 배운 내용을 꼭 연습해보시고, 궁금한 점이 있으면 언제든 다시 돌아와서 읽어보세요.
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.