간단한 웹앱 만들기 | Easy Welfare Lab.

작지만 진짜 앱을 만듭니다

할 일 목록(To-do)은 작은 앱의 고전입니다. 입력 → 추가 → 표시 → 삭제 라는, 거의 모든 앱에 들어가는 흐름이 다 담겨 있기 때문입니다. 이걸 만들 수 있으면 다른 앱도 응용할 수 있습니다.

입력에서 추가, 화면 표시, 삭제로 이어지고 다시 새 항목을 추가하는 할 일 목록 앱의 동작 흐름도 — 입력 → 추가 → 표시 → 삭제. 거의 모든 앱에 들어가는 이 흐름을 반복하며 할 일을 관리합니다.

1단계: 화면 만들기

입력창, 추가 버튼, 목록 영역을 HTML로 만듭니다.

<input id="todoInput" placeholder="할 일을 입력하세요" />
<button id="addBtn">추가</button>
<ul id="todoList"></ul>

앞 글에서 배운 대로 <script> 에서 요소를 가져옵니다.

<script>
  const input = document.getElementById("todoInput");
  const addBtn = document.getElementById("addBtn");
  const list = document.getElementById("todoList");
</script>

2단계: 추가 기능

추가 버튼을 누르면 입력한 글을 목록에 새 항목으로 넣습니다.

addBtn.addEventListener("click", function () {
  const text = input.value.trim();
  if (text === "") return;

  const li = document.createElement("li");
  li.textContent = text;
  list.appendChild(li);

  input.value = "";
});

3단계: 삭제 기능

항목을 클릭하면 사라지게 합니다.

list.addEventListener("click", function (e) {
  if (e.target.tagName === "LI") {
    e.target.remove();
  }
});

4단계: AI로 확장하기

기본이 동작하면, AI에게 기능을 더 붙여달라고 요청해봅니다.

“완료한 항목을 클릭하면 삭제 대신 가운데 줄이 그어지게 바꿔줘.”
“목록을 새로고침해도 사라지지 않게 브라우저에 저장(localStorage)되도록 해줘.”
받은 코드를 적용하고, 동작이 깨지면 에러 메시지와 함께 다시 물어봅니다.

다음 단계

코드가 점점 커지고 있습니다. 이제 Git으로 코드를 안전하게 관리하는 법을 배웁니다.