17.2.2 네임스페이스 분리 - 이름표 붙이기로 혼동 방지하기

📘 17.2.2 네임스페이스 분리 - 이름표 붙이기로 혼동 방지하기

어느 봄날, 새 학기가 시작되었어요. 우리 반에는 민수가 둘이나 있었어요. 키 큰 민수와 안경 쓴 민수. 선생님이 "민수야!" 하고 부르시면 둘 다 "네!" 하고 대답해서 교실이 웃음바다가 되곤 했죠.

그래서 선생님은 좋은 아이디어를 내셨어요. "키 큰 민수야", "안경 민수야" 하고 구분해서 부르기 시작한 거예요. 그러자 혼동이 사라지고 모든 게 명확해졌어요.

프로그래밍에서도 이런 일이 일어날 수 있어요. 여러 모듈에서 같은 이름을 사용하면 헷갈릴 수 있거든요. 오늘은 이런 혼동을 막는 똑똑한 방법, 네임스페이스 분리에 대해 이야기해보려고 해요.

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

단어	쉬운 설명
네임스페이스	이름들이 사용되는 특별한 구역이나 영역
이름 충돌	같은 이름의 것들이 서로 부딪혀서 문제가 생기는 현상
모듈 범위	각 모듈 안에서만 접근할 수 있는 범위

✨ 네임스페이스 분리가 뭐예요?

네임스페이스 분리는 우리 동네 아파트의 주소 체계와 같은 개념이에요.

우리 동네에는 같은 번호의 집들이 여러 단지에 있어요. 101호라는 집이 A단지에도 있고, B단지에도 있고, C단지에도 있죠. 만약 누군가 "101호에 놀러 와"라고 하면 어느 단지의 101호인지 알 수 없을 거예요.

그래서 우리는 "A단지 101호", "B단지 101호" 이렇게 말하죠. 그러면 정확히 어디인지 알 수 있어요.

프로그래밍에서도 마찬가지예요. 여러 모듈에 같은 이름의 함수나 변수가 있을 수 있어요. 이때 네임스페이스를 사용하면 "math.add"와 "string.add"처럼 어느 모듈의 기능인지 명확하게 구분할 수 있어요.

🎯 왜 네임스페이스 분리를 사용할까요?

1. 이름 겹침을 방지할 수 있어요

여러 사람들이 만든 코드를 함께 사용할 때, 같은 이름을 사용했더라도 문제가 생기지 않아요.

2. 코드를 깔끔하게 정리할 수 있어요

관련된 기능들을 같은 네임스페이스로 묶어놓으면, 어떤 기능이 어디에 있는지 쉽게 찾을 수 있어요.

3. 함께 일하기가 쉬워져요

여러 명이 함께 프로젝트를 할 때, 각자 자신만의 네임스페이스를 사용하면 서로의 코드가 섞일 걱정이 없어요.

4. 코드를 읽기 쉬워져요

math.add(3, 5)라고 쓰여 있으면 "아, 이건 수학 관련 더하기 함수구나!"라고 바로 알 수 있어요.

⚙️ 네임스페이스 사용 방법

네임스페이스를 사용하는 기본적인 방법은 import * as를 사용하는 거예요.

// math-helpers.js - 수학 도움 함수들
export function add(a, b) {
  return a + b;    // 숫자 더하기
}

// string-helpers.js - 문자열 도움 함수들  
export function add(str1, str2) {
  return str1 + " " + str2;    // 문자열 합치기
}

// app.js - 두 모듈을 네임스페이스로 가져오기
import * as math from './math-helpers.js';
import * as str from './string-helpers.js';

// 같은 이름이지만 겹치지 않고 사용 가능!
console.log(math.add(5, 3));           // 8
console.log(str.add("Hello", "World")); // "Hello World"

🧪 실제 예제로 연습하기

🔹 예제 1: 학교 생활에서 네임스페이스 활용하기

// classroom.js - 교실 관련 기능들
export let name = "4학년 2반";
export let studentCount = 25;

export function showInfo() {
  return `${name}에는 ${studentCount}명의 학생이 있어요.`;
}

// library.js - 도서관 관련 기능들  
export let name = "중앙도서관";
export let bookCount = 5000;

export function showInfo() {
  return `${name}에는 ${bookCount}권의 책이 있어요.`;
}

// school-app.js - 학교 앱 메인 파일
import * as classroom from './classroom.js';
import * as library from './library.js';

console.log("🏫 우리 학교 정보");

// 같은 이름의 변수와 함수들이지만 네임스페이스로 구분돼요!
console.log("📚 " + classroom.showInfo());    // "4학년 2반에는 25명의 학생이 있어요."
console.log("📖 " + library.showInfo());      // "중앙도서관에는 5000권의 책이 있어요."

// 네임스페이스를 통해 어느 곳의 name인지 명확해요
console.log(`교실 이름: ${classroom.name}`);
console.log(`도서관 이름: ${library.name}`);

🔹 예제 2: 게임에서 네임스페이스 활용하기

// player.js - 플레이어 관련 기능들
export let health = 100;
export let score = 0;
export let level = 1;

export function getStatus() {
  return `레벨 ${level} | 체력: ${health} | 점수: ${score}`;
}

export function gainExp(exp) {
  score += exp;
  if (score >= level * 100) {
    level++;
    return `레벨업! 현재 레벨: ${level}`;
  }
  return `경험치 ${exp}를 얻었어요!`;
}

// monster.js - 몬스터 관련 기능들
export let health = 50;
export let attack = 15;
export let level = 1;

export function getStatus() {
  return `몬스터 레벨 ${level} | 체력: ${health} | 공격력: ${attack}`;
}

export function attackPlayer() {
  return `몬스터가 ${attack}의 피해를 입혔어요!`;
}

// game.js - 게임 메인 파일
import * as player from './player.js';
import * as monster from './monster.js';

console.log("🎮 모험 게임을 시작합니다!");

// 각각의 네임스페이스에서 같은 이름의 함수들을 사용해요
console.log("👤 " + player.getStatus());      // 플레이어 상태
console.log("👹 " + monster.getStatus());     // 몬스터 상태

console.log("\n⚔️ 전투 시작!");
console.log(monster.attackPlayer());          // "몬스터가 15의 피해를 입혔어요!"
console.log(player.gainExp(50));              // "경험치 50을 얻었어요!"

// 네임스페이스 덕분에 player.health와 monster.health가 구분돼요!
console.log(`플레이어 체력: ${player.health}`);
console.log(`몬스터 체력: ${monster.health}`);

🚨 자주 하는 실수들

❌ 실수 1: 네임스페이스 없이 같은 이름 가져오기

// 잘못된 방법
import { add } from './math.js';
import { add } from './string.js';  // ❌ 에러! 같은 이름

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

❌ 실수 2: as 키워드 빼먹기

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

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

✏️ 연습 문제를 시작하기 전에

이제 여러분이 직접 네임스페이스를 만들어볼 시간이에요. 마치 새 학기 첫날 같은 이름을 가진 친구들을 구분하는 방법을 생각해내는 것처럼, 코드에서도 같은 이름들을 구분하는 방법을 배워볼 거예요.

처음에는 조금 복잡해 보일 수도 있어요. 하지만 이렇게 정리해두면 나중에 큰 프로젝트를 할 때 얼마나 도움이 되는지 느낄 수 있을 거예요. 천천히 따라해보세요.

문제 1: 동물과 음식 관리를 분리해보세요

// animals.js - 동물 관련 기능들
export let count = 10;

export function feed(animalName) {
  return `${animalName}에게 먹이를 줍니다.`;
}

export function getInfo() {
  return `동물원에는 ${count}마리의 동물이 있어요.`;
}

// foods.js - 음식 관련 기능들
export let count = 50;

export function cook(foodName) {
  return `${foodName}을(를) 요리합니다.`;
}

export function getInfo() {
  return `메뉴에는 ${count}가지의 음식이 있어요.`;
}

// app.js - 사용하는 코드
import * as zoo from './animals.js';
import * as restaurant from './foods.js';

// 같은 이름의 변수와 함수들이지만 네임스페이스로 구분돼요!
console.log(zoo.getInfo());           // "동물원에는 10마리의 동물이 있어요."
console.log(restaurant.getInfo());    // "메뉴에는 50가지의 음식이 있어요."

console.log(zoo.feed("사자"));         // "사자에게 먹이를 줍니다."
console.log(restaurant.cook("피자"));  // "피자을(를) 요리합니다."

문제 2: 객체로 그룹화하기

// game-stats.js - 게임 통계를 객체로 묶어서 관리
export const player = {
  name: "용사",
  level: 5,
  hp: 100,

  levelUp() {
    this.level++;
    this.hp += 20;
    return `레벨업! 현재 레벨: ${this.level}`;
  },

  getStatus() {
    return `${this.name} | 레벨: ${this.level} | 체력: ${this.hp}`;
  }
};

export const inventory = {
  gold: 500,
  items: ["검", "방패", "물약"],

  addItem(item) {
    this.items.push(item);
    return `${item}을(를) 획득했습니다!`;
  },

  getStatus() {
    return `골드: ${this.gold} | 아이템: ${this.items.length}개`;
  }
};

// rpg-game.js - RPG 게임
import * as game from './game-stats.js';

console.log("⚔️ RPG 게임 시작!");

// 객체를 통해 관련 기능들이 그룹화되어 있어요
console.log(game.player.getStatus());      // "용사 | 레벨: 5 | 체력: 100"
console.log(game.inventory.getStatus());   // "골드: 500 | 아이템: 3개"

console.log(game.player.levelUp());        // "레벨업! 현재 레벨: 6"
console.log(game.inventory.addItem("반지")); // "반지을(를) 획득했습니다!"

🎯 16단원 복습 - 생성자 함수와 네임스페이스

16단원에서 배운 생성자 함수를 네임스페이스와 함께 사용해보겠습니다.

// characters.js - 캐릭터 생성자 함수들
function Hero(name) {
  this.name = name;
  this.level = 1;
  this.health = 100;
}

Hero.prototype.introduce = function() {
  return `안녕! 나는 영웅 ${this.name}이야!`;
};

function Villain(name) {
  this.name = name;
  this.level = 1;
  this.power = 80;
}

Villain.prototype.introduce = function() {
  return `후후... 나는 악역 ${this.name}이다!`;
};

export { Hero, Villain };

// story.js - 스토리 파일
import * as characters from './characters.js';

const hero = new characters.Hero("용사");
const villain = new characters.Villain("마왕");

console.log(hero.introduce());    // "안녕! 나는 영웅 용사야!"
console.log(villain.introduce()); // "후후... 나는 악역 마왕이다!"

📝 정리하기

오늘은 네임스페이스 분리에 대해 배웠어요:

1. 네임스페이스는 이름들이 사용되는 특별한 구역이에요
2. import * as를 사용해서 네임스페이스를 만들어요
3. 이름 충돌 방지, 코드 정리, 팀 협업 등의 장점이 있어요
4. 같은 이름이어도 구분해서 사용할 수 있어요
5. 16단원의 생성자 함수도 네임스페이스로 구분할 수 있어요

네임스페이스를 잘 사용하면 더 안전하고 깔끔한 코드를 만들 수 있어요!

✅ 학습 완료 체크리스트

학습 내용	이해했나요?
네임스페이스의 기본 개념	✅
import * as 문법 사용	✅
이름 충돌 방지	✅
실전 예제 따라하기	✅
16단원 내용과의 연결	✅

📂 마무리 정보

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

기억할 점: 네임스페이스는 같은 이름을 가진 학교 친구들을 구분하는 것과 같아요. 명확하게 구분하면 혼동 없이 함께 지낼 수 있답니다!

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

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

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

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

💻 무료로 학습하러 가기

---