JavaScript 투두리스트 만들기: 상태와 이벤트 위임으로 완성하기

• 코딩테스트에서 만난 투두리스트 문제
• 시험 당시 접근: appendChild로 구현
• 구현 이후 복기하며 느낀 아쉬움과 추가 학습
• insertAdjacentElement로 다시 풀어본 투두리스트
• appendChild와 insertAdjacentElement 비교
• 정리하며 느낀 점
• FAQ

코딩테스트에서 만난 투두리스트 문제

프론트엔드 코딩테스트에서 바닐라 자바스크립트로 투두리스트를 구현하는 문제가 출제되었습니다. 프레임워크나 라이브러리는 사용할 수 없었고, 입력값을 받아 할 일을 목록에 추가하고 삭제하는 기본적인 기능을 구현하는 형태였습니다.

시험 당시 접근: appendChild로 구현

시험 당시에는 투두리스트라는 문제를 보고 자연스럽게 appendChild를 떠올렸습니다. 새로운 할 일을 리스트에 추가하는 동작은 대부분 이 방식으로 해결해왔기 때문에, 별다른 고민 없이 접근했습니다.

const list = document.querySelector('.todo-list');

function addTodo(text) {
  const li = document.createElement('li');
  li.textContent = text;
  list.appendChild(li);
}

이 코드는 기본 예제에 해당합니다. li 요소를 생성한 뒤 부모 요소의 마지막 자식으로 추가합니다. 구현이 단순하고 가독성이 좋아 빠르게 결과를 만들어야 하는 코딩테스트 상황에서는 안정적인 선택이었습니다.

다만 메커니즘 관점에서 보면, appendChild는 항상 마지막 위치에만 요소를 추가합니다. 중간에 삽입하거나 특정 기준 요소 앞뒤에 넣어야 하는 상황에서는 구조를 다시 생각해야 합니다.

실수 포인트는 DOM 위치를 깊이 고민하지 않고 무조건 appendChild를 사용하는 습관입니다. 삽입 위치 요구가 달라지면 적절한 API를 다시 선택하면 됩니다. 특정 메서드 하나가 모든 상황에서 우월한 것은 아닙니다.

구현 이후 복기하며 느낀 아쉬움과 추가 학습

문제를 풀고 나서는 묘한 아쉬움이 남았습니다. DOM을 직접 다루는 문제였는데, 너무 한 가지 방식만 떠올린 것은 아닐지 고민이 됐습니다. 항상 맨 뒤에 추가하는 방식 외에 다른 선택지는 없었을까 하는 생각도 들었습니다.

코딩테스트가 끝난 뒤 DOM 조작 관련 메서드들을 다시 정리해보기로 했습니다. 평소 자주 사용하던 방식 외에도 어떤 선택지들이 있는지 공식 문서와 예제들을 다시 살펴보며 복기하는 시간을 가졌습니다.

그 과정에서 insertAdjacentElement를 다시 보게 되었습니다. 특정 요소를 기준으로 beforebegin, afterbegin, beforeend, afterend 위치에 요소를 삽입할 수 있다는 점이 인상적이었습니다. 단순히 뒤에 붙이는 방식이 아니라, DOM 구조를 의도적으로 제어할 수 있는 방법이라는 점에서 이 문제를 다시 바라보게 되었습니다.

insertAdjacentElement로 다시 풀어본 투두리스트

DOM 조작을 다시 공부한 뒤, 같은 문제를 insertAdjacentElement를 사용해 다시 풀어보았습니다. 이 메서드는 기준 요소를 중심으로 삽입 위치를 명확하게 지정할 수 있다는 점이 핵심입니다.

const list = document.querySelector('.todo-list');

function addTodo(text) {
  const li = document.createElement('li');
  li.textContent = text;
  list.insertAdjacentElement('beforeend', li);
}

동작 결과만 놓고 보면 appendChild와 동일합니다. 하지만 메커니즘 관점에서는 “list의 끝(beforeend)에 추가한다”는 의도가 코드에 그대로 드러납니다.

insertAdjacentElement는 beforebegin, afterbegin, beforeend, afterend 네 가지 위치를 지원합니다. 이 구조 덕분에 DOM 트리를 더 입체적으로 다룰 수 있게 됩니다.

실수 포인트는 위치 문자열을 암기하려다 헷갈리는 것입니다. 실제로는 문서를 참고하며 사용해도 무방하고, 핵심은 DOM 기준점과 삽입 위치를 분리해서 사고하는 데 있습니다.

appendChild와 insertAdjacentElement 비교

두 방식은 결과만 보면 거의 동일하게 느껴질 수 있지만, DOM을 어떤 관점에서 다루고 있는지에 따라 사고 흐름이 완전히 달라집니다. 이 섹션에서는 코드가 실제로 DOM의 어느 위치에 들어가는지를 기준으로 차이를 정리합니다.

먼저 HTML 구조를 간단히 가정해보겠습니다.

<ul class="todo-list">
  <li>기존 할 일</li>
</ul>

위 상태에서 새로운 할 일을 추가한다고 가정합니다.

appendChild를 사용하는 경우, 새로운 요소는 항상 부모 요소의 마지막 자식으로 들어갑니다.

const list = document.querySelector('.todo-list');
const li = document.createElement('li');
li.textContent = '새로운 할 일';

list.appendChild(li);

DOM 구조는 아래처럼 변경됩니다.

<ul class="todo-list">
  <li>기존 할 일</li>
  <li>새로운 할 일</li>
</ul>

반면 insertAdjacentElement는 기준 요소와 위치를 명시합니다. 같은 결과를 만들더라도, 코드의 의미는 조금 달라집니다.

const list = document.querySelector('.todo-list');
const li = document.createElement('li');
li.textContent = '새로운 할 일';

list.insertAdjacentElement('beforeend', li);

beforeend는 “기준 요소의 내부, 맨 끝”을 의미합니다. 따라서 결과 DOM은 appendChild와 동일합니다.

차이가 드러나는 지점은 위치 옵션을 바꿀 때입니다.

list.insertAdjacentElement('afterbegin', li);

이 경우 새로운 할 일은 맨 앞에 추가됩니다.

<ul class="todo-list">
  <li>새로운 할 일</li>
  <li>기존 할 일</li>
</ul>

정리하면 appendChild는 “무조건 마지막에 추가”하는 방식이고, insertAdjacentElement는 “어디에 추가할 것인지”를 코드 레벨에서 명확히 드러내는 방식입니다.

요구사항에 맞는 위치에 안전하게 넣는지가 기준입니다. API 선택만으로 평가 결과를 단정할 수 없습니다.

정리하며 느낀 점

시험 당시에는 appendChild만 떠올랐지만, 이후 다시 공부하면서 insertAdjacentElement라는 선택지를 알게 되었습니다. 같은 문제라도 다시 풀어보니 보이지 않던 부분들이 보였고, 코딩테스트 이후의 복기 과정 자체가 좋은 학습이 되었다고 느꼈습니다.

FAQ

Q. 투두리스트 문제에서 appendChild로 풀면 감점이 되나요?
요구사항만 충족한다면 기능적으로는 문제가 없습니다. 실제 채점 기준은 시험마다 다르므로 API 이름만으로 감점을 단정할 수 없습니다.

Q. insertAdjacentElement를 꼭 사용해야 하나요?
반드시 사용해야 하는 것은 아니지만, DOM 구조를 더 명확하게 제어할 수 있는 선택지로 알고 있는 것은 도움이 됩니다.

Q. 코딩테스트 이후 복기는 어떻게 하는 게 좋을까요?
시험에서 사용한 방식 외에도 다른 접근이 가능한지 다시 풀어보는 과정이 큰 도움이 됩니다.

const form = document.querySelector('#todo-form');
const input = document.querySelector('#todo-input');
const list = document.querySelector('#todo-list');
const filter = document.querySelector('#filter');
const search = document.querySelector('#search');
const status = document.querySelector('#status');
const error = document.querySelector('#error');
let todos = [];
let nextId = 1;
function render(focusId, action) {
  const visible = visibleTodos(todos, filter.value, search.value);
  const nodes = visible.map((todo) => {
    const item = document.createElement('li');
    item.dataset.id = String(todo.id);
    item.classList.toggle('done', todo.done);
    const text = document.createElement('span');
    text.textContent = todo.text;
    const toggle = document.createElement('button');
    toggle.type = 'button';
    toggle.dataset.action = 'toggle';
    toggle.setAttribute('aria-pressed', String(todo.done));
    toggle.setAttribute('aria-label', `${todo.text} 완료`);
    const caption = document.createElement('span');
    caption.textContent = '완료';
    toggle.append(caption);
    const remove = document.createElement('button');
    remove.type = 'button';
    remove.dataset.action = 'delete';
    remove.textContent = '삭제';
    remove.setAttribute('aria-label', `${todo.text} 삭제`);
    item.append(text, toggle, remove);
    return item;
  });
  list.replaceChildren(...nodes);
  document.querySelector('#empty').hidden = visible.length !== 0;
  status.textContent = `전체 ${todos.length}개 / 완료 ${todos.filter((todo) => todo.done).length}개 / 표시 ${visible.length}개`;
  if (focusId !== undefined) {
    const target = list.querySelector(
      `[data-id="${focusId}"] [data-action="${action}"]`,
    );
    (target || input).focus();
  }
}
form.addEventListener('submit', (event) => {
  event.preventDefault();
  const text = input.value.trim();
  if (text.length < 2 || text.length > 40) {
    error.textContent = '할 일을 2~40 길이로 입력해 주세요.';
    input.setAttribute('aria-invalid', 'true');
    input.focus();
    return;
  }
  error.textContent = '';
  input.removeAttribute('aria-invalid');
  todos = changeTodos(todos, { type: 'add', id: nextId++, text });
  input.value = '';
  render();
  input.focus();
});
list.addEventListener('click', (event) => {
  if (!(event.target instanceof Element)) return;
  const button = event.target.closest('button[data-action]');
  if (!button || !event.currentTarget.contains(button)) return;
  const item = button.closest('li[data-id]');
  if (!item || item.parentElement !== list) return;
  const id = Number(item.dataset.id);
  const type = button.dataset.action;
  if (!['toggle', 'delete'].includes(type)) return;
  todos = changeTodos(todos, { type, id });
  render(id, type);
});
filter.addEventListener('change', () => render());
search.addEventListener('input', () => render());
render();

const assert = require('node:assert/strict');
const { changeTodos, visibleTodos } = require('./logic.js');
const start = [
  { id: 1, text: '우유 사기', done: false },
  { id: 2, text: '우유 사기', done: false },
];
const changed = changeTodos(start, { type: 'toggle', id: 1 });
assert.equal(start[0].done, false);
assert.equal(changed[0].done, true);
assert.equal(changed[1].done, false);
assert.deepEqual(
  visibleTodos(changed, 'done', '우유').map((t) => t.id),
  [1],
);
assert.deepEqual(visibleTodos(changed, 'active', '없는검색'), []);
assert.equal(changeTodos(changed, { type: 'delete', id: 1 })[0].id, 2);
assert.equal(changeTodos(changed, { type: 'add', id: 3, text: '코드 읽기' }).length, 3);
assert.equal(visibleTodos(changed, 'all', ' ').length, 2);
console.log('8 state assertions passed');

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>상태에서 그리는 투두리스트</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main>
      <h1>상태에서 그리는 투두리스트</h1>
      <form id="todo-form" novalidate>
        <label for="todo-input">할 일</label>
        <p id="hint">앞뒤 공백을 뺀 길이 2~40(UTF-16 코드 단위)로 입력하세요.</p>
        <input
          id="todo-input"
          name="todo"
          maxlength="40"
          required
          aria-describedby="hint error"
          autocomplete="off"
        />
        <button type="submit">추가</button>
        <p id="error" role="alert"></p>
      </form>
      <label for="filter">완료 상태</label
      ><select id="filter">
        <option value="all">전체</option>
        <option value="active">미완료</option>
        <option value="done">완료</option></select
      ><label for="search">검색</label><input id="search" type="search" />
      <p id="status" role="status"></p>
      <p id="empty">표시할 할 일이 없습니다.</p>
      <ul id="todo-list"></ul>
    </main>
    <script src="logic.js"></script>
    <script src="app.js"></script>
  </body>
</html>

function changeTodos(todos, action) {
  if (action.type === 'add')
    return [...todos, { id: action.id, text: action.text, done: false }];
  if (action.type === 'toggle')
    return todos.map((todo) =>
      todo.id === action.id ? { ...todo, done: !todo.done } : todo,
    );
  if (action.type === 'delete') return todos.filter((todo) => todo.id !== action.id);
  return todos;
}
function visibleTodos(todos, filter, query) {
  const needle = query.trim().toLowerCase();
  return todos.filter(
    (todo) =>
      (filter === 'all' || (filter === 'done' ? todo.done : !todo.done)) &&
      todo.text.toLowerCase().includes(needle),
  );
}
if (typeof module !== 'undefined') module.exports = { changeTodos, visibleTodos };

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 2rem 1rem;
  color: #222;
  background: #fff;
  font:
    1rem/1.6 system-ui,
    sans-serif;
}
main {
  max-width: 48rem;
  margin: auto;
}
form,
section {
  margin-block: 1.5rem;
}
input,
select,
button {
  font: inherit;
  padding: 0.5rem;
  border: 1px solid #777;
  color: #222;
  background: #fff;
}
button {
  cursor: pointer;
}
:focus-visible {
  outline: 3px solid #333;
  outline-offset: 3px;
}
label {
  display: block;
}
li {
  margin-block: 0.7rem;
  overflow-wrap: anywhere;
}
li button {
  margin-inline-start: 0.5rem;
}
.done span {
  text-decoration: line-through;
}
pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 1rem;
  background: #eee;
}
[aria-invalid='true'] {
  border: 2px solid #222;
}