17.2.1 코드 재사용성 - 똑똑한 코딩의 비밀

📘 17.2.1 코드 재사용성 - 똑똑한 코딩의 비밀

어린 시절, 할머니 댁에 가면 항상 신기한 광경을 볼 수 있었어요. 할머니는 온갖 재료를 작은 통에 나눠 담아 찬장에 정리해두셨죠. 소금, 설탕, 후추, 마늘, 생강... 각각의 통에는 이름표가 붙어있고, 필요할 때마다 꺼내서 음식에 넣으셨어요.

"왜 한 번에 다 넣지 않고 따로따로 담아두세요?" 물어보면, 할머니는 미소를 지으며 말씀하셨어요. "이렇게 해두면 김치찌개 끓일 때도, 볶음밥 할 때도, 필요한 것만 쏙쏙 꺼내서 쓸 수 있단다."

오늘 이야기할 코드 재사용성도 할머니의 지혜와 닮아있어요. 한 번 만든 좋은 코드를 여러 번 사용하는 똑똑한 방법. 그것이 바로 우리가 배울 내용이에요.

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

단어	쉬운 설명
코드 재사용성	한 번 만든 코드를 여러 곳에서 반복해서 사용할 수 있는 능력
모듈화	큰 코드를 작은 기능별 조각으로 나누어서 관리하는 방법
코드 중복	같은 내용의 코드가 여러 곳에 똑같이 적혀 있는 현상

✨ 코드 재사용성이 뭐예요?

코드 재사용성은 엄마가 미리 만들어둔 밑반찬과 같은 개념이에요.

우리 집 냉장고에는 늘 작은 반찬통들이 가득해요. 콩나물무침, 시금치나물, 깍두기... 엄마가 한 번에 여러 개를 만들어두시거든요. 그러면 아침에는 시금치나물로 비빔밥을 만들고, 점심에는 콩나물무침으로 국밥을 끓이고, 저녁에는 깍두기와 함께 볶음밥을 만들 수 있어요.

매 끼니마다 새로운 반찬을 만들 필요가 없는 거죠. 프로그래밍에서도 마찬가지예요. 자주 사용하는 기능을 한 번 잘 만들어두면, 여러 프로그램에서 가져다 쓸 수 있어요.

🎯 왜 코드 재사용성을 높여야 할까요?

1. 시간을 엄청나게 절약할 수 있어요

같은 기능을 만들 때마다 처음부터 다시 코딩할 필요가 없어요. 마치 이미 손질해둔 채소로 요리하는 것처럼 빠르게 작업할 수 있죠.

2. 실수를 줄일 수 있어요

이미 잘 만들어져서 여러 번 검증된 코드를 사용하면 버그를 피할 수 있어요. 믿을 만한 레시피로 요리하는 것과 같아요.

3. 코드 관리가 쉬워져요

같은 기능이 여러 곳에 흩어져 있으면 수정할 때 모든 곳을 다 고쳐야 하지만, 한 곳에 모아두면 한 번만 고치면 돼요.

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

여러 사람이 함께 프로젝트를 할 때, 각자 만든 좋은 코드를 서로 공유해서 사용할 수 있어요.

🧪 실제 예제로 연습하기

🔹 예제 1: 자주 사용하는 기능을 모듈로 만들기

// math-helpers.js - 수학 도움 함수들을 모아둔 파일
// 평균을 계산하는 기능
export function calculateAverage(numbers) {
  let total = 0;
  for (let i = 0; i < numbers.length; i++) {
    total += numbers[i];
  }
  return total / numbers.length;
}

// 점수에 따른 등급을 매기는 기능
export function getGrade(score) {
  if (score >= 90) return "A";
  if (score >= 80) return "B";
  if (score >= 70) return "C";
  if (score >= 60) return "D";
  return "F";
}

// 배열에서 가장 큰 값 찾기
export function findMax(numbers) {
  let max = numbers[0];
  for (let i = 1; i < numbers.length; i++) {
    if (numbers[i] > max) {
      max = numbers[i];
    }
  }
  return max;
}

🔹 모듈 사용하기

// report-card.js - 성적표를 만드는 프로그램
import { calculateAverage, getGrade, findMax } from './math-helpers.js';

// 철수의 성적 데이터
const chulsuScores = [85, 92, 78, 88, 95];

// math-helpers.js에서 만든 기능들을 사용해요
const average = calculateAverage(chulsuScores);  // 평균 점수 계산
const grade = getGrade(average);                 // 등급 계산
const highest = findMax(chulsuScores);           // 최고 점수

console.log(`철수의 평균 점수: ${average}점`);     // 87.6점
console.log(`철수의 등급: ${grade}`);             // B
console.log(`철수의 최고 점수: ${highest}점`);     // 95점

🧪 예제 2: 게임 도구 모듈 만들기

// game-utils.js - 게임에서 자주 사용하는 도구들
// 주사위를 굴리는 기능
export function rollDice() {
  return Math.floor(Math.random() * 6) + 1;
}

// 동전 던지기 기능
export function flipCoin() {
  return Math.random() < 0.5 ? "앞면" : "뒷면";
}

// 배열에서 랜덤하게 하나 선택하는 기능
export function randomChoice(items) {
  const randomIndex = Math.floor(Math.random() * items.length);
  return items[randomIndex];
}

// my-game.js - 게임 프로그램
import { rollDice, flipCoin, randomChoice } from './game-utils.js';

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

// 주사위 굴리기
const diceResult = rollDice();
console.log(`주사위 결과: ${diceResult}`);

// 동전 던지기
const coinResult = flipCoin();
console.log(`동전 던지기: ${coinResult}`);

// 오늘 점심 메뉴 정하기
const lunchOptions = ["김치찌개", "불고기", "비빔밥", "라면"];
const todaysLunch = randomChoice(lunchOptions);
console.log(`오늘 점심: ${todaysLunch}`);

🚨 자주 하는 실수들

❌ 실수 1: 너무 많은 기능을 한 모듈에 넣기

// 잘못된 예: everything.js
export function add(a, b) { return a + b; }
export function formatDate(date) { /* 날짜 포맷 */ }
export function rollDice() { return Math.random() * 6 + 1; }
// ... 수십 개의 다른 기능들

// 이렇게 하면 필요 없는 기능까지 모두 가져오게 됨

올바른 방법: 기능별로 모듈을 나누세요.

❌ 실수 2: 모듈끼리 서로 의존하게 만들기

// a.js
import { funcB } from './b.js';
export function funcA() { return funcB() + 1; }

// b.js  
import { funcA } from './a.js';  // ❌ 순환 의존!
export function funcB() { return funcA() + 2; }

올바른 방법: 모듈을 독립적으로 만드세요.

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

이제 여러분이 직접 모듈을 만들어볼 시간이에요. 처음에는 어색할 수도 있어요. 마치 처음 요리를 배울 때처럼 말이에요. 하지만 천천히, 하나씩 따라하다 보면 점점 익숙해질 거예요.

코드를 나누고 정리하는 일은 방을 정리하는 것과 비슷해요. 처음에는 귀찮아도, 한 번 정리해두면 나중에 필요한 걸 찾기가 훨씬 쉬워지거든요. 여러분도 차근차근 따라해보세요.

문제 1: 문자열 도움 함수 모듈 만들기

// string-helpers.js
// 문자열의 첫 글자를 대문자로 바꾸는 기능
export function capitalize(text) {
  if (!text) return "";
  return text.charAt(0).toUpperCase() + text.slice(1);
}

// 문자열을 거꾸로 뒤집는 기능  
export function reverse(text) {
  let result = "";
  for (let i = text.length - 1; i >= 0; i--) {
    result += text[i];
  }
  return result;
}

// 문자열에서 특정 문자의 개수를 세는 기능
export function countChar(text, targetChar) {
  let count = 0;
  for (let i = 0; i < text.length; i++) {
    if (text[i] === targetChar) {
      count++;
    }
  }
  return count;
}

문제 2: 만든 모듈 사용하기

// name-app.js
import { capitalize, reverse, countChar } from './string-helpers.js';

const myName = "철수";

console.log("원래 이름:", myName);                    // "철수"
console.log("첫 글자 대문자:", capitalize(myName));    // "철수"
console.log("거꾸로:", reverse(myName));               // "수철"
console.log("'수' 개수:", countChar(myName, "수"));   // 1

🎯 16단원 복습 - 생성자 함수와 모듈

16단원에서 배운 생성자 함수를 모듈로 만들어 재사용해보겠습니다.

// animal.js - 동물 생성자 함수 모듈
function Animal(name, type) {
  this.name = name;
  this.type = type;
  this.energy = 100;
}

Animal.prototype.eat = function() {
  this.energy += 20;
  return `${this.name}이(가) 먹었어요! 에너지: ${this.energy}`;
};

Animal.prototype.sleep = function() {
  this.energy += 30;
  return `${this.name}이(가) 잤어요! 에너지: ${this.energy}`;
};

export default Animal;

// pet-shop.js
import Animal from './animal.js';

const dog = new Animal("뽀삐", "강아지");
const cat = new Animal("나비", "고양이");

console.log(dog.eat());   // "뽀삐이(가) 먹었어요! 에너지: 120"
console.log(cat.sleep()); // "나비이(가) 잤어요! 에너지: 130"

📝 정리하기

오늘은 코드 재사용성에 대해 배웠어요:

1. 코드 재사용성은 한 번 만든 코드를 여러 곳에서 사용할 수 있는 능력이에요
2. 모듈로 만들어 export/import로 공유해요
3. 시간 절약, 실수 감소, 관리 용이성 등의 장점이 있어요
4. 기능별로 나누고 독립적으로 만드는 것이 중요해요
5. 16단원의 생성자 함수도 모듈로 만들어 재사용할 수 있어요

코드 재사용성을 높이면 더 똑똑하고 효율적인 프로그래머가 될 수 있어요!

✅ 학습 완료 체크리스트

학습 내용	이해했나요?
코드 재사용성의 기본 개념	✅
모듈을 만들고 사용하는 방법	✅
자주 하는 실수들	✅
실전 예제 따라하기	✅
16단원 내용과의 연결	✅

📂 마무리 정보

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

기억할 점: 코드 재사용성은 할머니의 정리정돈 지혜와 같아요. 필요한 것을 미리 준비해두면 나중에 훨씬 편하답니다!

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

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

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

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

💻 무료로 학습하러 가기

---