17.1.3 `default export` - 파일의 주인공 정하기

📘 17.1.3 default export - 파일의 주인공 정하기

프로그래밍을 배우는 여러분께 조용히 전해드립니다. 지금까지 export와 import로 코드를 나누어 사용하는 방법을 배웠지요? 이번에는 조금 더 특별한 방법을 알아볼 것입니다.

바로 default export라는 기능입니다. 마치 반에서 반장을 정하는 것처럼, 파일에서 가장 중요한 하나의 기능을 주인공으로 정하는 방법입니다.

🧠 새로운 단어들과 친해지기

단어	쉬운 설명
default export	파일에서 가장 중요한 하나의 기능을 기본 주인공으로 내보내는 방법
named export	지금까지 배운 방식으로, 이름표를 붙여서 여러 기능을 내보내는 방법

✨ default export가 뭐예요?

default export는 파일의 가장 중요한 기능 하나를 특별하게 내보내는 방법입니다.

일반 export와 다른 점들:

1. 한 파일에 단 하나만 만들 수 있습니다
2. 가져올 때 중괄호 {}를 사용하지 않습니다
3. 원하는 이름으로 바꿔서 가져올 수 있습니다

🎯 왜 default export를 사용할까요?

1. 파일의 주 목적이 명확해집니다

어떤 기능이 가장 중요한지 한눈에 알 수 있습니다.

2. 가져오기가 더 간단해집니다

중괄호 없이 바로 가져올 수 있습니다.

3. 실제 개발에서 많이 사용합니다

많은 라이브러리들이 이 방식을 사용하고 있습니다.

⚙️ default export 사용 방법

방법 1: 만들면서 바로 default export

// 함수를 만들면서 바로 default export
export default function greet(name) {
    return "안녕하세요, " + name + "님!";
}

방법 2: 만든 후 나중에 default export

// 먼저 함수를 만듭니다
function calculateArea(radius) {
    return 3.14 * radius * radius;
}

// 나중에 default export로 내보내기
export default calculateArea;

방법 3: named export와 함께 사용

// 보조 기능들은 named export
export const PI = 3.14159;
export function square(x) {
    return x * x;
}

// 메인 기능은 default export
export default function circle(radius) {
    return PI * radius * radius;
}

🧪 실제 예제로 연습하기

🔹 계산기 생성자 함수 만들기

// calculator.js 파일
// 보조 상수들 (named export)
export const MAX_NUMBER = 999999;
export const MIN_NUMBER = -999999;

// 메인 계산기 생성자 함수 (default export)
function Calculator() {
    this.result = 0;
}

Calculator.prototype.add = function(num) {
    this.result += num;
    return this.result;
};

Calculator.prototype.subtract = function(num) {
    this.result -= num;
    return this.result;
};

Calculator.prototype.clear = function() {
    this.result = 0;
    return "계산기가 초기화되었습니다";
};

export default Calculator;

// app.js 파일
// default export는 중괄호 없이 원하는 이름으로 가져오기
import MyCalculator from './calculator.js';

// named export는 중괄호와 함께 가져오기
import { MAX_NUMBER, MIN_NUMBER } from './calculator.js';

let calc = new MyCalculator();
console.log(calc.add(10));     // 10
console.log(calc.subtract(3)); // 7
console.log(calc.clear());     // "계산기가 초기화되었습니다"

console.log("최대값:", MAX_NUMBER);
console.log("최소값:", MIN_NUMBER);

🔹 게임 캐릭터 만들기

// character.js 파일
// 캐릭터 타입들 (named export)
export const CHARACTER_TYPES = {
    WARRIOR: "전사",
    MAGE: "마법사",
    ARCHER: "궁수"
};

// 메인 게임 캐릭터 생성자 함수 (default export)
function GameCharacter(name, type) {
    this.name = name;
    this.type = type;
    this.level = 1;
    this.health = 100;
}

GameCharacter.prototype.introduce = function() {
    return "안녕! 나는 " + this.type + " " + this.name + "이야!";
};

GameCharacter.prototype.levelUp = function() {
    this.level += 1;
    this.health += 20;
    return this.name + "이(가) 레벨 " + this.level + "이 되었습니다!";
};

export default GameCharacter;

// game.js 파일
// default export를 Hero라는 이름으로 가져오기
import Hero from './character.js';
import { CHARACTER_TYPES } from './character.js';

let warrior = new Hero("용사", CHARACTER_TYPES.WARRIOR);
let mage = new Hero("마법사", CHARACTER_TYPES.MAGE);

console.log(warrior.introduce()); // "안녕! 나는 전사 용사야!"
console.log(mage.levelUp());      // "마법사이(가) 레벨 2이 되었습니다!"

🚨 자주 하는 실수들

❌ 실수 1: 변수와 함께 default export 시도

// 잘못된 방법
export default const name = "철수";  // 에러!

// 올바른 방법
const name = "철수";
export default name;

❌ 실수 2: 여러 개의 default export

// 잘못된 방법
export default function add() { ... }
export default function subtract() { ... }  // 에러!

// 올바른 방법
export default function add() { ... }
export function subtract() { ... }  // named export로

❌ 실수 3: default export를 중괄호로 가져오기

// 잘못된 방법
import { MyClass } from './file.js';  // 에러!

// 올바른 방법
import MyClass from './file.js';

✏️ 연습 문제

지금까지 차근차근 쌓아온 지식들을 바탕으로, 새로운 개념을 하나씩 익혀보는 시간을 가져보겠습니다. 혹시 어려우시더라도 걱정하지 마세요. 마치 새로운 시를 익혀가는 것처럼, 천천히 그 아름다움을 느껴보며 진행해보겠습니다.

문제 1: 동물 생성자 함수 만들기

// animal.js 파일
// 동물 타입들 (named export)
export const ANIMAL_TYPES = {
    DOG: "강아지",
    CAT: "고양이",
    BIRD: "새"
};

// 메인 동물 생성자 함수 (default export)
function Animal(name, type) {
    this.name = name;
    this.type = type;
    this.energy = 100;
}

Animal.prototype.makeSound = function() {
    if (this.type === ANIMAL_TYPES.DOG) return "멍멍!";
    if (this.type === ANIMAL_TYPES.CAT) return "야옹!";
    if (this.type === ANIMAL_TYPES.BIRD) return "짹짹!";
    return "...";
};

Animal.prototype.eat = function() {
    this.energy += 20;
    return this.name + "이(가) 먹었습니다! 에너지: " + this.energy;
};

export default Animal;

문제 2: 사용해보기

// pet.js 파일
// Animal을 Pet이라는 이름으로 가져오기
import Pet from './animal.js';
import { ANIMAL_TYPES } from './animal.js';

let myDog = new Pet("뽀삐", ANIMAL_TYPES.DOG);
let myCat = new Pet("나비", ANIMAL_TYPES.CAT);

console.log(myDog.makeSound()); // "멍멍!"
console.log(myCat.eat());       // "나비이(가) 먹었습니다! 에너지: 120"

🎯 16단원 복습 - 생성자 함수를 default export하기

지난 시간에 배운 생성자 함수와 프로토타입을 default export와 함께 사용해보겠습니다.

복습 문제 1: 생성자 함수를 default export로

// vehicle.js 파일
// 16단원에서 배운 생성자 함수 방식
function Vehicle(brand, speed) {
    this.brand = brand;
    this.speed = speed || 0;
}

// 프로토타입에 메서드 추가 (16단원에서 배운 방식)
Vehicle.prototype.accelerate = function(amount) {
    this.speed += amount;
    return this.brand + "이(가) " + this.speed + "km/h로 달려요";
};

Vehicle.prototype.stop = function() {
    this.speed = 0;
    return this.brand + "이(가) 멈췄습니다";
};

// 생성자 함수를 default export
export default Vehicle;

// 보조 정보들은 named export
export const MAX_SPEED = 200;
export const MIN_SPEED = 0;

복습 문제 2: 상속 관계도 함께 export

// car.js 파일
// Vehicle을 가져와서 상속 만들기 (16단원 방식)
import Vehicle from './vehicle.js';

// Car 생성자 함수 (Vehicle을 상속)
function Car(brand, model, speed) {
    Vehicle.call(this, brand, speed);  // 16단원에서 배운 방식
    this.model = model;
}

// 프로토타입 상속 설정 (16단원에서 배운 방식)
Car.prototype = Object.create(Vehicle.prototype);
Car.prototype.constructor = Car;

// Car만의 메서드 추가
Car.prototype.honk = function() {
    return this.brand + " " + this.model + "이(가) 빵빵!";
};

// Car 생성자 함수를 default export
export default Car;

사용 예시:

// main.js 파일
import Car from './car.js';

let myCar = new Car("현대", "소나타", 0);
console.log(myCar.accelerate(50)); // "현대이(가) 50km/h로 달려요"
console.log(myCar.honk());         // "현대 소나타이(가) 빵빵!"
console.log(myCar.stop());         // "현대이(가) 멈췄습니다"

연결 정리:

• 16단원: 생성자 함수, 프로토타입, 상속 배우기
• 17단원: export/import로 다른 파일에서 사용하기
• 오늘: default export로 메인 기능 강조하기

📝 정리하기

오늘은 default export에 대해 배웠습니다:

1. default export는 파일의 가장 중요한 하나의 기능을 특별히 내보내는 방법입니다
2. 한 파일에 하나만 만들 수 있습니다
3. 가져올 때 중괄호 없이 원하는 이름으로 가져옵니다
4. named export와 함께 사용할 수 있습니다
5. 16단원에서 배운 생성자 함수와 프로토타입도 default export할 수 있습니다

default export를 잘 사용하면 파일의 목적이 더 명확해지고 코드가 더 읽기 쉬워집니다!

✅ 학습 완료 체크리스트

학습 내용	이해했나요?
default export의 기본 개념	✅
named export와의 차이점	✅
함께 사용하는 방법	✅
자주 하는 실수들과 해결법	✅
16단원 내용과의 연결	✅

📂 마무리 정보

오늘 배운 17.1.3 내용이 여러분의 자바스크립트 지식 상자에 잘 저장되었나요? 다음 시간에는 더 재미있는 내용으로 만나요!

기억할 점: default export는 파일의 주인공을 정하는 방법입니다. 마치 연극에서 주인공을 정하는 것처럼, 파일에서 가장 중요한 기능을 정해주는 것입니다.

🚀 더 체계적인 JavaScript 학습을 원하신다면?

이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.

📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼

📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

💻 무료로 학습하러 가기

---