자바스크립트 모듈: 현대 웹 개발의 건축 블록

안녕하세요, 미래의 자바스크립트 마법사 여러분! 오늘 우리는 자바스크립트 모듈의 매력적인 세상으로 뛰어들어 보겠습니다. 너른 이웃 마을의 컴퓨터 선생님으로서, 이 여정을 안내해 드리게 되어 기쁩니다. 그럼 가상의魔杖(키보드)을 손에握고, 모듈의 마법을 부르자!

모듈이란?

거대한 레고 성을 짓고 있다고 상상해 보세요. 한 번에 전부 짓는 것보다 작은, 관리가 가능한 조각들을 만들어서 조립하는 것이 더 쉬운 일이 아닐까요? 자바스크립트에서 모듈이 하는 일이 바로 그입니다!

모듈은 특정 기능을 수행하는 자립적인 코드 조각입니다. 주 프로그램 내의 미니 프로그램과 같은 것입니다. 모듈은 우리가 코드를 조직하고, 유지보수성을 높이며, 애플리케이션의 다른 부분에서 기능을 재사용할 수 있도록 도와줍니다.

간단한 예제로 시작해 보겠습니다:

// mathModule.js
export function add(a, b) {
return a + b;
}

export function subtract(a, b) {
return a - b;
}

이 예제에서 우리는 mathModule.js라는 모듈을 만들었습니다. 이 모듈에는 두 개의 함수 add과 subtract가 있습니다. export 키워드는 이 함수들을 프로그램의 다른 부분에서 사용할 수 있게 합니다.

이제 이 모듈을 어떻게 사용할 수 있는지 보겠습니다:

// main.js
import { add, subtract } from './mathModule.js';

console.log(add(5, 3));      // 출력: 8
console.log(subtract(10, 4)); // 출력: 6

여기서 우리는 mathModule.js 파일에서 add과 subtract 함수를 import하고 있습니다. 이제 이 함수들을 main.js 파일 내에서 정의된 것처럼 사용할 수 있습니다.

단일 모듈에서 여러 개체를 export

기본 개념을 이해했으니, 단일 모듈에서 여러 개체를 export하는 방법을 살펴보겠습니다. 자바스크립트 도구 상자에 여러 도구를 싣는 것과 같은 이야기입니다!

// toolbox.js
export const hammer = {
use: () => console.log("Bang! Bang!"),
weight: 2
};

export function screwdriver() {
console.log("Twist! Twist!");
}

export class Saw {
cut() {
console.log("Zzzz! Zzzz!");
}
}

이 toolbox.js 모듈에서 우리는 객체(hammer), 함수(screwdriver), 그리고 클래스(Saw)를 export하고 있습니다. 이제 이를 사용해 보겠습니다:

// workshop.js
import { hammer, screwdriver, Saw } from './toolbox.js';

hammer.use();  // 출력: Bang! Bang!
console.log(hammer.weight);  // 출력: 2

screwdriver();  // 출력: Twist! Twist!

const mySaw = new Saw();
mySaw.cut();  // 출력: Zzzz! Zzzz!

보셨나요? 다양한 형태의 export를 import하고 사용할 수 있습니다. 모든 자바스크립트 도구에 대한 대용량 어댑터처럼입니다!

기본 export

occasionally, you might have a module that primarily does one thing. In such cases, you can use a default export. It's like having a star player in your JavaScript team!

// superHero.js
export default class SuperHero {
constructor(name) {
this.name = name;
}

fly() {
console.log(`${this.name} is flying!`);
}
}

export function sidekick() {
console.log("I'm here to help!");
}

In this module, we have a default export (SuperHero class) and a named export (sidekick function). Let's use them:

// comicBook.js
import Hero, { sidekick } from './superHero.js';

const batman = new Hero("Batman");
batman.fly();  // Output: Batman is flying!

sidekick();  // Output: I'm here to help!

Notice how we import the default export (Hero) without curly braces? That's the special treatment default exports get!

Rename Import and Export

Sometimes, you might want to use a different name for an imported function or variable. JavaScript's got you covered with its rename feature. It's like giving your imported tools nicknames!

// colors.js
export const red = "#FF0000";
export const blue = "#0000FF";
export const green = "#00FF00";

Now, let's import and rename:

// palette.js
import { red as crimson, blue as navy, green } from './colors.js';

console.log(crimson);  // Output: #FF0000
console.log(navy);     // Output: #0000FF
console.log(green);    // Output: #00FF00

You can also rename during export:

// shapes.js
const circle = (radius) => Math.PI * radius * radius;
const square = (side) => side * side;

export { circle as round, square };

And import it like this:

// geometry.js
import { round, square } from './shapes.js';

console.log(round(5));   // Output: 78.53981633974483
console.log(square(4));  // Output: 16

메서드 표

이제 우리가 다루었던 메서드를 요약하는 유용한 표를 제공합니다:

메서드	설명	예제
export	함수, 객체 또는 값을 다른 모듈에서 사용할 수 있게 합니다	export function add(a, b) { return a + b; }
import	다른 모듈에서 함수, 객체 또는 값을 사용할 수 있게 합니다	import { add } from './mathModule.js';
export default	모듈의 주 export로 단일 값을 export합니다	export default class SuperHero { ... }
import as	import된 값을 다른 이름으로 변경합니다	import { red as crimson } from './colors.js';
export as	export된 값을 다른 이름으로 변경합니다	export { circle as round };

이제 여러분은 모듈을 통해 자바스크립트 기술을 한 단계 업그레이드했습니다. 연습이 완벽을 만든다는 것을 기억하고, 이 개념들을 실험해 보지 마세요. 얼마 지나지 않아 프로처럼 모듈러한 자바스크립트 애플리케이션을 만드는 데 능숙해질 것입니다!

행복하게 코딩하고, 모듈이 여러분과 함께하길 바랍니다! ??‍??‍?

Credits: Image by storyset