17. 코드 정리하고 나누기 (모듈 시스템)/17.1 ES6 모듈

17.1.1 `export`로 내보내기 - 나의 코드 공유하기

thejavascript4kids 2025. 7. 24. 03:52

📘 17.1.1 export로 내보내기 - 나의 코드 공유하기

프로그래밍을 배우는 여러분께 조용히 전해드립니다. 지금까지 우리는 한 파일 안에서만 코드를 만들고 사용해왔습니다. 하지만 만약 다른 파일에서도 내가 만든 함수를 사용하고 싶다면 어떻게 해야 할까요?

오늘은 내가 만든 코드를 다른 파일과 공유하는 방법의 기초에 대해 함께 나누려 합니다. 마치 친구들과 좋은 것을 나누어 쓰는 것처럼 자연스럽게 말입니다.

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

단어 쉬운 설명
export 내가 만든 코드를 다른 파일에서도 사용할 수 있게 내보내는 명령어
모듈 관련된 코드들을 하나로 묶어놓은 파일
코드 공유 다른 파일에서 우리 코드를 가져다 쓸 수 있도록 허락해주는 것

export는 영어로 "수출하다", "내보내다"라는 뜻입니다. 우리나라에서 만든 좋은 물건을 외국에 수출하는 것처럼, 우리가 만든 좋은 코드를 다른 파일로 내보내는 것입니다.

✨ export가 뭐예요?

export는 내가 만든 함수나 변수를 다른 파일에서도 사용할 수 있게 해주는 특별한 키워드입니다.

예를 들어, 여러분이 정말 좋은 계산기 함수를 만들었다고 해봅시다. 이 함수를 친구들도 사용할 수 있게 하려면 export를 사용하면 됩니다.

마음속에 그려보는 이야기: 도서관의 책 대출

도서관 이야기를 들려드리겠습니다.

여러분이 정말 재미있는 동화책을 썼다고 상상해보세요. 이 책을 혼자만 보기에는 아까우니까 도서관에 기증하기로 했습니다.

도서관에서는 여러분의 책에 "대출 가능" 스티커를 붙여줍니다. 이제 다른 친구들도 여러분의 책을 빌려볼 수 있게 되었지요.

  • 여러분이 쓴 책 = 여러분이 만든 함수나 코드
  • "대출 가능" 스티커 = export 키워드
  • 다른 친구들이 책을 빌려보는 것 = 다른 파일에서 코드를 사용하는 것

이처럼 export는 우리의 코드에 "다른 곳에서 사용해도 됩니다" 표시를 해주는 특별한 키워드입니다.

🎯 왜 export를 사용할까요?

1. 코드를 정리할 수 있습니다

관련된 기능들을 파일별로 나누어 정리할 수 있습니다. 마치 과목별로 교과서를 나누어 놓는 것처럼요.

2. 코드를 다시 사용할 수 있습니다

한 번 만든 좋은 함수를 여러 곳에서 사용할 수 있습니다. 계산기 함수를 한 번 만들면 숙제할 때도, 용돈 계산할 때도 사용할 수 있습니다.

3. 팀 작업이 쉬워집니다

여러 명이 함께 프로그램을 만들 때 각자의 코드를 공유할 수 있습니다. 친구는 게임 함수를 만들고, 나는 점수 함수를 만들어서 합칠 수 있습니다.

4. 관리가 쉬워집니다

각 파일이 담당하는 일이 명확해져서 코드를 찾기 쉬워집니다.

⚙️ export 사용하는 방법 (기초)

지금은 export가 어떻게 생겼는지만 살펴보겠습니다. 실제로 사용하는 방법은 조금 복잡해서 나중에 배울 것입니다.

방법 1: 함수를 만들면서 바로 내보내기

// 함수를 만들면서 바로 내보내기
export function add(a, b) {
    return a + b;
}

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

// 이렇게 하면 다른 파일에서 add와 subtract 함수를 사용할 수 있습니다

방법 2: 나중에 한꺼번에 내보내기

// 먼저 함수들을 만듭니다
function multiply(a, b) {
    return a * b;
}

function divide(a, b) {
    if (b === 0) {
        return "0으로 나눌 수 없어요!";
    }
    return a / b;
}

// 나중에 한꺼번에 내보내기
export { multiply, divide };

🧪 실제 예제로 살펴보기

실제로 어떻게 사용되는지 예제를 통해 구경해보겠습니다. (아직 실습하지는 않고 구경만 합니다!)

🔹 수학 계산 함수 모음

// math.js 파일 (수학 관련 함수들을 모아놓은 파일)

// 더하기 함수
export function add(a, b) {
    return a + b;
}

// 빼기 함수
export function subtract(a, b) {
    return a - b;
}

// 원의 넓이 계산 함수
export function circleArea(radius) {
    return 3.14 * radius * radius;
}

// 직사각형 넓이 계산 함수
export function rectangleArea(width, height) {
    return width * height;
}

console.log("수학 함수들이 준비되었습니다!");

🔹 동물 소리 함수 모음

// animals.js 파일 (동물 관련 함수들을 모아놓은 파일)

// 각 동물의 소리를 만드는 함수들
function dogSound(name) {
    return name + "이(가) 멍멍!";
}

function catSound(name) {
    return name + "이(가) 야옹~";
}

function cowSound(name) {
    return name + "이(가) 음메~";
}

function birdSound(name) {
    return name + "이(가) 짹짹!";
}

// 모든 동물 소리 함수를 한꺼번에 내보내기
export { dogSound, catSound, cowSound, birdSound };

console.log("동물 소리 함수들이 준비되었습니다!");

🔹 게임 함수 모음

// game.js 파일 (게임 관련 함수들을 모아놓은 파일)

// 점수를 저장할 변수 (이것은 내보내지 않아서 다른 파일에서 직접 바꿀 수 없습니다)
let score = 0;
let playerName = "";

// 게임 시작 함수
export function startGame(name) {
    playerName = name;
    score = 0;
    return name + "님의 게임이 시작되었습니다!";
}

// 점수 얻기 함수
export function gainPoints(points) {
    score += points;
    return playerName + "님이 " + points + "점을 얻었습니다! 총 점수: " + score;
}

// 현재 점수 확인 함수
export function getScore() {
    return playerName + "님의 현재 점수: " + score;
}

// 게임 끝내기 함수
export function endGame() {
    let finalMessage = playerName + "님의 최종 점수: " + score + "점";
    score = 0;
    playerName = "";
    return finalMessage + " 게임이 끝났습니다!";
}

console.log("게임 함수들이 준비되었습니다!");

🎯 export의 특별한 규칙들

규칙 1: 값을 직접 내보낼 수 없습니다

// 잘못된 방법 ❌
export "안녕하세요!";  // 에러!
export 123;           // 에러!

// 올바른 방법 ✅
export let greeting = "안녕하세요!";
export let number = 123;

규칙 2: 조건문 안에서는 export를 사용할 수 없습니다

// 잘못된 방법 ❌
if (true) {
    export function test() {  // 에러!
        return "테스트";
    }
}

// 올바른 방법 ✅
function test() {
    return "테스트";
}

export { test };

규칙 3: export는 파일의 최상위에서만 사용할 수 있습니다

// 잘못된 방법 ❌
function myFunction() {
    export let x = 10;  // 에러! 함수 안에서는 export 사용 불가
}

// 올바른 방법 ✅
let x = 10;
export { x };

🎁 간단한 실습: export 구문 써보기

아직 실제로 파일을 나누어서 사용하지는 않지만, export 구문을 써보는 연습을 해보겠습니다.

이제 우리가 지금까지 차근차근 배워온 지식들을 바탕으로, 새로운 개념을 하나씩 익혀보는 시간을 가져보겠습니다. 혹시 어려우시더라도 걱정하지 마세요. 마치 새로운 언어를 배울 때 천천히 단어를 익혀가는 것처럼, 우리도 천천히 진행해보겠습니다.

연습 1: 학교 관련 함수 만들기

// school.js 파일이라고 가정하고 써보세요

// 출석 확인 함수
export function checkAttendance(name) {
    return name + " 학생이 출석했습니다!";
}

// 숙제 확인 함수
export function checkHomework(name, isCompleted) {
    if (isCompleted) {
        return name + " 학생이 숙제를 완료했습니다! 👍";
    } else {
        return name + " 학생은 숙제를 아직 안 했습니다. 😅";
    }
}

// 성적 계산 함수
function calculateGrade(score) {
    if (score >= 90) return "A";
    if (score >= 80) return "B";
    if (score >= 70) return "C";
    if (score >= 60) return "D";
    return "F";
}

// 평균 점수 계산 함수
function calculateAverage(scores) {
    let sum = 0;
    for (let i = 0; i < scores.length; i++) {
        sum += scores[i];
    }
    return sum / scores.length;
}

// 나중에 한꺼번에 내보내기
export { calculateGrade, calculateAverage };

console.log("학교 관련 함수들을 만들었습니다!");

연습 2: 요리 관련 함수 만들기

// cooking.js 파일이라고 가정하고 써보세요

// 라면 끓이는 함수
export function cookRamen(flavor) {
    return flavor + " 라면을 맛있게 끓였습니다! 🍜";
}

// 계란후라이 만드는 함수  
export function fryEgg(count) {
    return "계란후라이 " + count + "개를 예쁘게 만들었습니다! 🍳";
}

// 재료 준비 함수들
function prepareVegetables(vegetables) {
    return vegetables + "을(를) 깨끗이 씻었습니다";
}

function heatPan() {
    return "팬을 적당히 달궜습니다";
}

function addOil() {
    return "기름을 조금 넣었습니다";
}

// 요리 준비 함수들을 한꺼번에 내보내기
export { prepareVegetables, heatPan, addOil };

console.log("요리 함수들을 만들었습니다!");

📚 복습하기 - 16단원과 연결해보기

지난 시간에 배운 생성자 함수와 프로토타입도 export할 수 있습니다. 어떻게 하는지 구경해보겠습니다.

복습 예제 1: 동물 생성자 함수 내보내기

// animal.js 파일이라고 가정해보세요

// 16단원에서 배운 생성자 함수
function Animal(name, type) {
    this.name = name;
    this.type = type;
    this.energy = 100;
}

// 16단원에서 배운 프로토타입 메서드
Animal.prototype.eat = function() {
    this.energy += 20;
    if (this.energy > 100) this.energy = 100;
    return this.name + "이(가) 먹어서 에너지가 " + this.energy + "가 되었습니다";
};

Animal.prototype.sleep = function() {
    this.energy = 100;
    return this.name + "이(가) 잠을 자서 에너지가 완전히 회복되었습니다";
};

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

// 생성자 함수를 내보내기
export { Animal };

console.log("Animal 생성자 함수가 준비되었습니다!");

복습 예제 2: 자동차 생성자 함수 내보내기

// car.js 파일이라고 가정해보세요

// 16단원에서 배운 생성자 함수
function Car(brand, model, color) {
    this.brand = brand;
    this.model = model;
    this.color = color;
    this.speed = 0;
    this.fuel = 100;
}

// 16단원에서 배운 프로토타입 메서드들
Car.prototype.start = function() {
    return this.brand + " " + this.model + "이(가) 시동을 걸었습니다! 🚗";
};

Car.prototype.drive = function(distance) {
    if (this.fuel <= 0) {
        return "연료가 부족해서 갈 수 없습니다!";
    }

    this.speed = 60;
    this.fuel -= distance / 10;
    if (this.fuel < 0) this.fuel = 0;

    return distance + "km 운전했습니다. 남은 연료: " + this.fuel + "%";
};

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

Car.prototype.refuel = function() {
    this.fuel = 100;
    return "연료를 가득 채웠습니다! ⛽";
};

// 자동차 생성자 함수 내보내기
export { Car };

console.log("Car 생성자 함수가 준비되었습니다!");

16단원과의 연결:

  • 16단원: 생성자 함수와 프로토타입을 한 파일 안에서만 사용
  • 17단원: export를 사용해서 다른 파일에서도 생성자 함수를 사용할 수 있게 공유

💡 export를 사용할 때 주의할 점

1. 너무 많은 것을 내보내지 마세요

// 좋지 않은 예: 모든 것을 다 내보내기
export let a = 1;
export let b = 2;
export let c = 3;
// ... 너무 많습니다!

// 좋은 예: 정말 필요한 것만 내보내기
export { add, subtract };

2. 의미 있는 이름을 사용하세요

// 좋지 않은 예
export function f1() { ... }
export function f2() { ... }

// 좋은 예
export function calculateArea() { ... }
export function calculatePerimeter() { ... }

3. 관련 있는 것들끼리 묶어서 내보내세요

// 수학 관련 함수들만 모아서
export { add, subtract, multiply, divide };

// 문자열 관련 함수들만 모아서
export { capitalize, lowercase, reverse };

📝 정리하기

오늘은 export의 기초에 대해 배웠습니다:

  1. export는 내가 만든 코드를 다른 파일에서 사용할 수 있게 해주는 키워드입니다
  2. 두 가지 방법이 있습니다:
    • 만들 때 바로 내보내기: export function add() { ... }
    • 나중에 한꺼번에 내보내기: export { add, subtract }
  3. 값을 직접 내보낼 수 없고, 반드시 변수나 함수에 담아서 내보내야 합니다
  4. 조건문이나 함수 안에서는 export를 사용할 수 없습니다
  5. 16단원에서 배운 생성자 함수와 프로토타입도 export할 수 있습니다
  6. 관련 있는 기능들끼리 묶어서 파일을 정리하면 좋습니다

다음 시간에는 다른 파일에서 내보낸 코드를 가져와서 사용하는 방법을 배울 것입니다!

✅ 학습 완료 체크리스트

학습 내용 이해했나요?
export의 기본 개념 ✅
두 가지 내보내기 방법 ✅
export 사용 규칙들 ✅
16단원 내용과의 연결 ✅
코드 정리의 중요성 ✅
실제 사용 예제 이해 ✅

📂 마무리 정보

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

기억할 점: export는 좋은 코드를 친구들과 나누어 쓸 수 있게 해주는 도구입니다. 마치 맛있는 간식을 친구들과 나누어 먹는 것처럼 말이에요.


🚀 더 체계적인 JavaScript 학습을 원하신다면?
이 포스팅에서 다룬 내용을 실제로 실습해보세요!
무료 JavaScript 학습 플랫폼에서 단계별 학습과 실시간 코드 실행을 통해
더욱 효과적이고 재미있게 학습하실 수 있습니다.
📝 실시간 코드 실행 📊 학습 진도 관리 👥 체계적 커리큘럼
📚 171개 체계적 학습레슨 · 📋 855개 4지선다 연습문제 · 🆓 완전 무료 · ⚡ 즉시 시작

'17. 코드 정리하고 나누기 (모듈 시스템) > 17.1 ES6 모듈' 카테고리의 다른 글

17.1.3 `default export` - 파일의 주인공 정하기  (0) 2025.07.25
17.1.2 `import`로 가져오기 - 다른 파일의 코드 사용하기  (0) 2025.07.25

'17. 코드 정리하고 나누기 (모듈 시스템)/17.1 ES6 모듈'의 다른글

  • 현재글17.1.1 `export`로 내보내기 - 나의 코드 공유하기

관련글

티스토리툴바