17.1.2 `import`로 가져오기 - 다른 파일의 코드 사용하기

📘 17.1.2 import로 가져오기 - 다른 파일의 코드 사용하기

프로그래밍을 배우는 여러분께 조용히 전해드립니다. 지난 시간에 export로 내가 만든 코드를 다른 파일과 공유하는 방법을 배웠지요? 이번에는 그 반대입니다. 다른 파일에서 export한 코드를 내 파일로 가져와서 사용하는 방법을 함께 나누려 합니다.

바로 import라는 키워드를 사용하는 것입니다. 마치 친구가 빌려준 소중한 책을 내가 가져와서 읽는 것과 같습니다.

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

단어	쉬운 설명
import	다른 파일에서 export한 코드를 내 파일로 가져오는 명령어
가져오기	다른 파일의 공유된 코드를 내 파일에서 사용할 수 있도록 연결하는 것
모듈	export와 import를 통해 연결될 수 있는 코드 파일

✨ import가 뭐예요?

import는 다른 파일에서 export로 내보낸 함수나 변수를 내 파일로 가져와서 사용할 수 있게 해주는 키워드입니다.

예를 들어, 친구가 만든 계산기 함수를 내가 사용하고 싶다면 import를 사용하면 됩니다.

🎯 왜 import를 사용할까요?

1. 다른 사람이 만든 좋은 코드를 사용할 수 있습니다

이미 잘 만들어진 함수를 가져와서 바로 사용할 수 있습니다.

2. 시간을 절약할 수 있습니다

처음부터 모든 것을 만들 필요 없이, 필요한 것만 가져와서 사용합니다.

3. 코드를 나누어 관리할 수 있습니다

큰 프로그램을 여러 파일로 나누어서 더 깔끔하게 관리할 수 있습니다.

⚙️ import 사용하는 방법

import를 사용하는 방법은 세 가지가 있습니다:

방법 1: 필요한 것만 골라서 가져오기

// math.js에서 add와 subtract만 가져오기
import { add, subtract } from './math.js';

console.log(add(5, 3));      // 8
console.log(subtract(5, 3)); // 2

방법 2: 모든 것을 한꺼번에 가져오기

// math.js의 모든 것을 Math라는 이름으로 가져오기
import * as Math from './math.js';

console.log(Math.add(5, 3));      // 8
console.log(Math.subtract(5, 3)); // 2

방법 3: 이름을 바꿔서 가져오기

// add를 plus라는 이름으로 바꿔서 가져오기
import { add as plus } from './math.js';

console.log(plus(5, 3)); // 8

🧪 실제 예제로 연습하기

🔹 지난 시간에 만든 math.js 사용하기

// calculator.js 파일
// math.js에서 함수들을 가져옵니다
import { add, subtract, multiply, divide } from './math.js';

console.log("=== 계산기 프로그램 ===");

let a = 10;
let b = 3;

console.log(a + " + " + b + " = " + add(a, b));        // 10 + 3 = 13
console.log(a + " - " + b + " = " + subtract(a, b));   // 10 - 3 = 7
console.log(a + " × " + b + " = " + multiply(a, b));   // 10 × 3 = 30
console.log(a + " ÷ " + b + " = " + divide(a, b));     // 10 ÷ 3 = 3.333...

🔹 학생 관리 시스템 사용하기

// school.js 파일
// student.js의 모든 기능을 Students라는 이름으로 가져옵니다
import * as Students from './student.js';

console.log("=== 학교 관리 프로그램 ===");

// 학생 추가하기
Students.addStudent("철수", 6);
Students.addStudent("영희", 5);
Students.addStudent("민수", 6);

// 전체 학생 보기
Students.showAllStudents();

// 학생 수 확인하기
let count = Students.getStudentCount();
console.log("총 학생 수: " + count + "명");

🔹 이름을 바꿔서 사용하기

// game.js 파일
// animals.js에서 함수들을 더 쉬운 이름으로 가져옵니다
import { 
    dogSound as 멍멍,
    catSound as 야옹,
    cowSound as 음메
} from './animals.js';

console.log("=== 동물 소리 게임 ===");

console.log("강아지: " + 멍멍());  // "강아지: 멍멍!"
console.log("고양이: " + 야옹());  // "고양이: 야옹!"
console.log("소: " + 음메());      // "소: 음메!"

🚨 자주 하는 실수들

❌ 실수 1: 중괄호 빼먹기

// 잘못된 방법
import add from './math.js';  // 에러!

// 올바른 방법
import { add } from './math.js';

❌ 실수 2: from 빼먹기

// 잘못된 방법
import { add } './math.js';  // 에러!

// 올바른 방법
import { add } from './math.js';

❌ 실수 3: 경로 표시 빼먹기

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

// 올바른 방법
import { add } from './math.js';  // ./ 필요합니다!

❌ 실수 4: 전체 가져오기 문법 실수

// 잘못된 방법
import * Math from './math.js';  // as 빼먹음!

// 올바른 방법
import * as Math from './math.js';

✏️ 연습 문제

지금까지 차근차근 쌓아온 지식들을 바탕으로, 새로운 개념을 하나씩 익혀보는 시간을 가져보겠습니다. 혹시 어려우시더라도 걱정하지 마세요. 마치 새로운 악기를 배울 때 처음에는 서툴러도 연습하면서 점점 익숙해지는 것처럼, 우리도 천천히 진행해보겠습니다.

문제 1: 동물 소리 가져와서 사용하기

// zoo.js 파일을 만들어보세요

// animals.js에서 동물 소리 함수들을 가져옵니다
import { dogSound, catSound, cowSound, pigSound } from './animals.js';

console.log("=== 동물원 구경하기 ===");
console.log("강아지: " + dogSound());  // "멍멍!"
console.log("고양이: " + catSound());  // "야옹!"
console.log("소: " + cowSound());      // "음메!"
console.log("돼지: " + pigSound());    // "꿀꿀!"

문제 2: 게임 점수 관리 시스템 사용하기

// player.js 파일을 만들어보세요

// game.js의 모든 기능을 Game이라는 이름으로 가져옵니다
import * as Game from './game.js';

console.log("=== 게임 시작! ===");

// 점수 얻기
console.log(Game.gainScore(100));  // "점수를 100점 얻었습니다! 총 점수: 100"
console.log(Game.gainScore(50));   // "점수를 50점 얻었습니다! 총 점수: 150"

// 현재 점수 확인
console.log("현재 점수: " + Game.getScore());  // 150

// 점수 초기화
console.log(Game.resetScore());  // "점수가 초기화되었습니다!"

🎯 16단원 복습 - 생성자 함수와 import 함께 사용하기

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

복습 문제 1: Animal 생성자 함수 가져와서 사용하기

// pet-shop.js 파일
// animal.js에서 Animal 생성자 함수를 가져옵니다
import { Animal } from './animal.js';

console.log("=== 애완동물 가게 ===");

// 16단원에서 배운 방식으로 동물 객체 만들기
let dog = new Animal("바둑이", "강아지");
let cat = new Animal("나비", "고양이");

// 프로토타입 메서드 사용하기
console.log(dog.introduce());  // "안녕! 나는 강아지 바둑이야!"
console.log(cat.eat());        // "나비이(가) 먹어서 에너지가 120가 되었습니다"
console.log(dog.sleep());      // "바둑이이(가) 자서 에너지가 130가 되었습니다"

복습 문제 2: 상속 관계 가져와서 사용하기

// my-pets.js 파일
// 16단원에서 배운 상속을 import로 가져와서 사용합니다
import { Animal } from './animal.js';
import { Dog } from './dog.js';

console.log("=== 내 애완동물들 ===");

// Animal 생성자로 일반 동물 만들기
let hamster = new Animal("햄찌", "햄스터");

// Dog 생성자로 강아지 만들기 (Animal을 상속받음)
let myDog = new Dog("뽀삐", "치와와");

// 각각의 기능 사용해보기
console.log(hamster.introduce()); // Animal의 메서드
console.log(myDog.introduce());   // Animal의 메서드 (상속받음)
console.log(myDog.bark());        // Dog만의 메서드
console.log(myDog.wagTail());     // Dog만의 메서드

연결 정리:

• 16단원: 생성자 함수와 프로토타입으로 객체와 상속 만들기
• 17단원: export/import로 다른 파일에서도 사용할 수 있게 하기

🎁 보너스: 조금 더 어려운 개념 (선택 사항)

더 깊이 알고 싶은 친구들을 위한 내용입니다. 어려우면 나중에 봐도 괜찮습니다!

default import (기본 가져오기)

// 다른 파일에서 export default로 내보낸 것을 가져오기
import Calculator from './calculator.js';  // 중괄호 없음!

let calc = new Calculator();
console.log(calc.add(5, 3));

여러 방식을 함께 사용하기

// 기본 가져오기와 개별 가져오기를 함께
import Calculator, { helper, MATH_CONSTANTS } from './calculator.js';

let calc = new Calculator();
console.log(helper());
console.log(MATH_CONSTANTS.PI);

📝 정리하기

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

1. import는 다른 파일에서 export한 코드를 내 파일로 가져오는 키워드입니다
2. 세 가지 방법이 있습니다:
   • 필요한 것만: import { add } from './math.js'
   • 모든 것을: import * as Math from './math.js'
   • 이름 바꿔서: import { add as plus } from './math.js'
3. 경로는 ./로 시작하고 .js 확장자를 붙여야 합니다
4. 중괄호 {}와 from 키워드를 빼먹지 않도록 주의해야 합니다
5. 16단원에서 배운 생성자 함수와 프로토타입도 import할 수 있습니다

import를 잘 사용하면 다른 사람이 만든 좋은 코드들을 자연스럽게 활용할 수 있습니다!

✅ 학습 완료 체크리스트

학습 내용	이해했나요?
import의 기본 개념	✅
세 가지 가져오기 방법	✅
자주 하는 실수들과 해결법	✅
16단원 내용과의 연결	✅
실전 예제 이해	✅

📂 마무리 정보

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

기억할 점: import는 다른 사람이 만든 좋은 코드를 내 것처럼 사용할 수 있게 해주는 다리와 같습니다. 마치 친구들과 좋은 것을 나누어 쓰는 것처럼 말이에요.

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

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

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

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

💻 무료로 학습하러 가기

---