모듈이란 무엇인가요?
Coddy JavaScript 여정의 객체 지향 프로그래밍 섹션에 포함된 레슨 — 56개 중 7번째.
JavaScript 코드가 커지고 복잡해지면, 모든 것을 하나의 파일에서 관리하기 어려워집니다. 해결책은 모듈(modules)입니다. 코드를 별도의 정리된 파일로 나누는 것입니다.
모듈은 관련된 코드를 포함하는 JavaScript 파일입니다. 각 모듈은 하나의 특정 작업을 처리하여 애플리케이션을 더 이해하기 쉽고 유지 관리하기 편하게 만듭니다.
JavaScript 모듈은 코드(변수, 함수, 클래스)를 내보내(export) 다른 파일에서 가져와(import) 사용할 수 있게 해주는 일반적인 .js 파일입니다.
예제:
하나의 복잡한 파일:
// 파일: messy-app.js
let user = "John";
let score = 0;
function login() {
console.log("Welcome " + user);
}
function addPoints(points) {
score += points;
}모듈로 구성된 두 개의 파일:
// 파일: user-module.js
let user = "John";
function login() {
console.log("Welcome " + user);
}
// 파일: game-module.js
let score = 0;
function addPoints(points) {
score += points;
}user-module.js - 사용자 인증 및 사용자 관련 데이터를 처리하며 사용자 이름과 로그인 기능을 포함합니다.
game-module.js - 게임 점수 기록 및 포인트 시스템을 관리하며 점수를 추적하고 포인트 계산을 처리합니다.
챌린지
쉬움이미 연결된 두 개의 모듈 user-module.js와 game-module.js가 있습니다.
여러분의 작업은 user-module.js에서 10이라는 값을 사용하여 addPoints 함수를 호출하는 것입니다.
예상 출력 결과:
Score increased! Current score: 10
치트 시트
모듈은 관련된 코드를 포함하는 JavaScript 파일입니다. 각 모듈은 하나의 특정 작업을 처리하여 애플리케이션을 더 이해하기 쉽고 유지 관리하기 편하게 만듭니다.
모듈을 사용하면 모든 것을 하나의 큰 파일에서 관리하는 대신 코드를 별도의 정리된 파일로 나눌 수 있습니다.
JavaScript 모듈은 코드(변수, 함수, 클래스)를 내보내기(export)하여 다른 파일에서 가져오기(import)하여 사용할 수 있는 일반적인 .js 파일입니다.
모듈을 사용하여 코드를 구성하는 예시:
// 파일: user-module.js
let user = "John";
function login() {
console.log("Welcome " + user);
}// 파일: game-module.js
let score = 0;
function addPoints(points) {
score += points;
}직접 해보기
import { addPoints } from './game-module.js';
let user = "John";
// TODO: 10이라는 값으로 addPoints 함수를 호출하세요
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
