Step 4: 실전 적용

카운터 앱 리팩토링하기 🔧

🎯 목표

지금까지 배운 네이밍 규칙을 적용해서
카운터 앱의 코드를 읽기 쉽게 개선하기

❌ Before: 나쁜 코드 

<!DOCTYPE html>
<html lang="ko">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-8">
  <div class="max-w-md mx-auto bg-white p-8 rounded-lg">
    <h1 class="text-3xl font-bold mb-4">Counter</h1>
    <p id="num" class="text-6xl font-bold mb-4">0</p>
    <div class="flex gap-2">
      <button id="btn1" class="px-4 py-2 bg-blue-500 text-white rounded">+</button>
      <button id="btn2" class="px-4 py-2 bg-red-500 text-white rounded">-</button>
      <button id="btn3" class="px-4 py-2 bg-gray-500 text-white rounded">Reset</button>
    </div>
  </div>

  <script>
    let x = 0;

    const el = document.getElementById("num");
    const b1 = document.getElementById("btn1");
    const b2 = document.getElementById("btn2");
    const b3 = document.getElementById("btn3");

    function a() {
      x = x + 1;
      el.textContent = x;
    }

    function b() {
      x = x - 1;
      el.textContent = x;
    }

    function c() {
      x = 0;
      el.textContent = x;
    }

    b1.addEventListener("click", a);
    b2.addEventListener("click", b);
    b3.addEventListener("click", c);
  </script>
</body>
</html>

🤔 문제점:

  • 변수명이 불명확: x, el, b1, b2, b3
  • 함수명이 의미 없음: a(), b(), c()
  • 3개월 후에 코드를 보면 뭐가 뭔지 모름

✅ After: 좋은 코드 

<!-- HTML -->
<p id="counter-display">0</p>
<button id="increase-btn">+</button>
<button id="decrease-btn">-</button>
<button id="reset-btn">Reset</button>

<script>
  let currentCount = 0;
  const counterDisplay = document.getElementById("counter-display");
  const increaseBtn = document.getElementById("increase-btn");
  const decreaseBtn = document.getElementById("decrease-btn");
  const resetBtn = document.getElementById("reset-btn");

  function increaseCounter() {
    currentCount = currentCount + 1;
    updateDisplay();
  }
  function decreaseCounter() {
    currentCount = currentCount - 1;
    updateDisplay();
  }
  function resetCounter() {
    currentCount = 0;
    updateDisplay();
  }
  function updateDisplay() {
    counterDisplay.textContent = currentCount;
  }

  increaseBtn.addEventListener("click", increaseCounter);
  decreaseBtn.addEventListener("click", decreaseCounter);
  resetBtn.addEventListener("click", resetCounter);
</script>

✨ 개선 사항:

  • 변수명: x → currentCount, el → counterDisplay
  • 함수명: a() → increaseCounter(), b() → decreaseCounter()
  • HTML ID: btn1 → increase-btn (kebab-case)
  • 중복 제거: updateDisplay() 함수로 통합

📊 네이밍 규칙 적용 분석

✅ 변수 (명사)

currentCount counterDisplay increaseBtn decreaseBtn resetBtn

✅ 함수 (동사로 시작)

increaseCounter() decreaseCounter() resetCounter() updateDisplay()

✅ HTML ID (kebab-case)

counter-display increase-btn decrease-btn reset-btn

🏃 실습 과제

아래 TODO 앱의 코드를 네이밍 규칙을 적용해서 개선해보세요: 

<input id="in" type="text" />
<button id="btn">Add</button>
<ul id="list"></ul>

<script>
  let arr = [];
  const el1 = document.getElementById("in");
  const el2 = document.getElementById("btn");
  const el3 = document.getElementById("list");

  function a() {
    const val = el1.value;
    arr.push(val);
    b();
    el1.value = "";
  }

  function b() {
    el3.innerHTML = "";
    for (let i = 0; i < arr.length; i++) {
      const li = document.createElement("li");
      li.textContent = arr[i];
      el3.appendChild(li);
    }
  }

  el2.addEventListener("click", a);
</script>
💡 정답 보기 
<input id="todo-input" type="text" />
<button id="add-todo-btn">Add</button>
<ul id="todo-list"></ul>

<script>
  let todoList = [];
  const todoInput = document.getElementById("todo-input");
  const addTodoBtn = document.getElementById("add-todo-btn");
  const todoListElement = document.getElementById("todo-list");

  function addTodo() {
    const todoText = todoInput.value;
    todoList.push(todoText);
    updateTodoList();
    clearInput();
  }

  function updateTodoList() {
    todoListElement.innerHTML = "";
    for (let i = 0; i < todoList.length; i++) {
      const listItem = document.createElement("li");
      listItem.textContent = todoList[i];
      todoListElement.appendChild(listItem);
    }
  }

  function clearInput() {
    todoInput.value = "";
  }

  addTodoBtn.addEventListener("click", addTodo);
</script>

✅ 개선 사항:

  • arr → todoList (명확한 명사 + 복수형)
  • el1, el2, el3 → todoInput, addTodoBtn, todoListElement
  • a() → addTodo() (동사로 시작)
  • b() → updateTodoList() (동사로 시작)
  • clearInput() 함수 추가 (단일 책임)

💡 추가 팁

1. 일관성 유지

프로젝트 전체에서 같은 패턴 사용
예: 버튼은 항상 ~Btn, 입력은 ~Input

2. 팀과 상의하기

팀 프로젝트라면 네이밍 규칙을 미리 정하기
예: List vs s, Btn vs Button

3. 리팩토링 습관

코드 작성 후 다시 보고 이름 개선하기
"3개월 후에도 이해될까?" 자문하기

📌 핵심 정리

← 이전: Step 3 📋 Cheatsheet 보기