바닐라 JavaScript — DOM 조작, 이벤트 위임, SPA 직접 만들기

document
 └── html
      ├── head
      │    └── title
      │         └── "My Page" (텍스트 노드)
      └── body
           ├── h1
           │    └── "Hello" (텍스트 노드)
           └── p
                └── "World" (텍스트 노드)

const div = document.createElement('div');
div.textContent = 'Hello';

console.log(div.nodeType);        // 1 (Element Node)
console.log(div.firstChild.nodeType); // 3 (Text Node)

// Element는 Node를 상속한다
console.log(div instanceof Node);    // true
console.log(div instanceof Element); // true

const header = document.getElementById('main-header');

// CSS 선택자 문법을 그대로 쓸 수 있다
const firstBtn = document.querySelector('.btn-primary');
const allBtns = document.querySelectorAll('.btn-primary');

const nodeList = document.querySelectorAll('.item');       // 정적 NodeList
const htmlCollection = document.getElementsByClassName('item'); // 라이브 HTMLCollection

const list = document.getElementById('list');

// HTMLCollection은 라이브라서 반복 중 DOM을 수정하면 위험하다
const items = list.getElementsByClassName('item');
console.log(items.length); // 3

list.removeChild(items[0]);
console.log(items.length); // 2 — 컬렉션이 자동으로 줄어든다

// NodeList는 정적이라 안전하다
const safeItems = list.querySelectorAll('.item');
list.removeChild(safeItems[0]);
console.log(safeItems.length); // 여전히 기존 개수 유지 (DOM에서 제거됐지만 리스트는 그대로)

const newItem = document.createElement('li');
newItem.textContent = '새 항목';
newItem.classList.add('item');

document.getElementById('list').appendChild(newItem);

const list = document.getElementById('list');
const newItem = document.createElement('li');
newItem.textContent = '맨 앞에 추가';

// 첫 번째 자식 앞에 삽입
list.insertBefore(newItem, list.firstChild);

const target = document.querySelector('.target');

// 'beforebegin' | 'afterbegin' | 'beforeend' | 'afterend'
target.insertAdjacentHTML('beforebegin', '<p>타겟 바로 앞</p>');
target.insertAdjacentHTML('afterend', '<p>타겟 바로 뒤</p>');

// 요소 제거
const item = document.querySelector('.item');
item.remove(); // 모던 방식

// 예전에는 부모를 통해 제거해야 했다
item.parentNode.removeChild(item);

// 요소 복제
const original = document.querySelector('.card');
const shallowCopy = original.cloneNode(false);  // 태그만 복사
const deepCopy = original.cloneNode(true);       // 자식까지 전부 복사

// 안 좋은 예 — 1000번의 DOM 조작
const list = document.getElementById('list');
for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  list.appendChild(li); // 매번 DOM 트리가 변경됨
}

// 좋은 예 — DocumentFragment로 배치 처리
const fragment = document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {
  const li = document.createElement('li');
  li.textContent = `Item ${i}`;
  fragment.appendChild(li); // 아직 실제 DOM에는 안 붙음
}

document.getElementById('list').appendChild(fragment); // 한 번만 DOM 변경

const button = document.querySelector('#myBtn');

button.addEventListener('click', function (e) {
  console.log('클릭됨!', e.target);
});

// 세 번째 인자로 옵션 전달 가능
button.addEventListener('click', handler, {
  once: true,    // 한 번만 실행 후 자동 제거
  passive: true, // preventDefault를 호출하지 않겠다는 힌트 (스크롤 성능 향상)
  capture: true  // 캡처링 단계에서 실행
});

1. 캡처링 (Capturing) — window → document → html → body → ... → target
2. 타겟 (Target) — 실제 이벤트가 발생한 요소
3. 버블링 (Bubbling) — target → ... → body → html → document → window

// 버블링 확인
document.querySelector('.outer').addEventListener('click', () => {
  console.log('outer'); // 3번째 출력
});

document.querySelector('.middle').addEventListener('click', () => {
  console.log('middle'); // 2번째 출력
});

document.querySelector('.inner').addEventListener('click', () => {
  console.log('inner'); // 1번째 출력 (타겟)
});
// inner를 클릭하면: inner → middle → outer 순서로 출력

// 이벤트 전파 중단
document.querySelector('.inner').addEventListener('click', (e) => {
  e.stopPropagation(); // 부모로 이벤트가 올라가지 않음
  console.log('inner만 실행');
});

// 기본 동작 막기
document.querySelector('a').addEventListener('click', (e) => {
  e.preventDefault(); // 링크 이동 안 함
  console.log('링크 클릭했지만 이동 안 됨');
});

// 폼 제출 막기
document.querySelector('form').addEventListener('submit', (e) => {
  e.preventDefault(); // 페이지 새로고침 방지
  // AJAX로 처리
});

// 안 좋은 예 — 각 버튼마다 리스너 등록
document.querySelectorAll('.btn').forEach((btn) => {
  btn.addEventListener('click', handleClick);
});
// 버튼이 100개면 리스너도 100개

// 좋은 예 — 부모 하나에만 리스너 등록
document.getElementById('button-container').addEventListener('click', (e) => {
  // 클릭된 게 버튼인지 확인
  const btn = e.target.closest('.btn');
  if (!btn) return;

  console.log('클릭된 버튼:', btn.dataset.id);
});

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

// 리스너는 한 번만 등록
list.addEventListener('click', (e) => {
  if (e.target.matches('.delete-btn')) {
    e.target.closest('li').remove();
  }
  if (e.target.matches('.toggle-btn')) {
    e.target.closest('li').classList.toggle('done');
  }
});

// 나중에 동적으로 추가해도 이벤트가 알아서 작동한다
function addTodo(text) {
  const li = document.createElement('li');
  li.innerHTML = `
    <span>${text}</span>
    <button class="toggle-btn">완료</button>
    <button class="delete-btn">삭제</button>
  `;
  list.appendChild(li);
  // 별도 이벤트 등록 필요 없음!
}

// URL을 /about으로 변경 (새로고침 없음)
history.pushState({ page: 'about' }, '', '/about');

// 브라우저 뒤로가기/앞으로가기를 감지
window.addEventListener('popstate', (e) => {
  console.log('이동:', location.pathname);
  console.log('state:', e.state);
  renderPage(location.pathname);
});

class Router {
  constructor() {
    this.routes = {};
    this.init();
  }

  init() {
    // 뒤로가기/앞으로가기 처리
    window.addEventListener('popstate', () => {
      this.render(location.pathname);
    });

    // 링크 클릭 가로채기
    document.addEventListener('click', (e) => {
      const link = e.target.closest('a[data-link]');
      if (!link) return;

      e.preventDefault();
      this.navigate(link.getAttribute('href'));
    });
  }

  addRoute(path, handler) {
    this.routes[path] = handler;
    return this; // 체이닝 지원
  }

  navigate(path) {
    history.pushState(null, '', path);
    this.render(path);
  }

  render(path) {
    const handler = this.routes[path] || this.routes['/404'];
    if (handler) {
      document.getElementById('app').innerHTML = handler();
    }
  }
}

// 사용
const router = new Router();

router
  .addRoute('/', () => '<h1>홈</h1><p>메인 페이지입니다.</p>')
  .addRoute('/about', () => '<h1>소개</h1><p>소개 페이지입니다.</p>')
  .addRoute('/404', () => '<h1>404</h1><p>페이지를 찾을 수 없습니다.</p>');

router.render(location.pathname);

<!-- HTML 쪽 -->
<nav>
  <a href="/" data-link>홈</a>
  <a href="/about" data-link>소개</a>
</nav>
<div id="app"></div>

class HashRouter {
  constructor() {
    this.routes = {};
    window.addEventListener('hashchange', () => {
      this.render(location.hash.slice(1) || '/');
    });
  }

  addRoute(path, handler) {
    this.routes[path] = handler;
    return this;
  }

  render(path) {
    const handler = this.routes[path] || this.routes['/404'];
    if (handler) {
      document.getElementById('app').innerHTML = handler();
    }
  }
}

// URL이 /#/about 형태가 된다
const router = new HashRouter();
router
  .addRoute('/', () => '<h1>홈</h1>')
  .addRoute('/about', () => '<h1>소개</h1>');

function TodoItem({ id, text, done }) {
  return `
    <li class="todo-item ${done ? 'done' : ''}" data-id="${id}">
      <span class="todo-text">${text}</span>
      <button class="toggle-btn" data-action="toggle">
        ${done ? '취소' : '완료'}
      </button>
      <button class="delete-btn" data-action="delete">삭제</button>
    </li>
  `;
}

function TodoList(todos) {
  return `
    <ul class="todo-list">
      ${todos.map(TodoItem).join('')}
    </ul>
  `;
}

function App(state) {
  return `
    <div class="app">
      <h1>할 일 목록 (${state.todos.filter((t) => !t.done).length}개 남음)</h1>
      <input type="text" id="todo-input" placeholder="할 일을 입력하세요" />
      <button id="add-btn">추가</button>
      ${TodoList(state.todos)}
    </div>
  `;
}

let state = {
  todos: [
    { id: 1, text: '블로그 글 쓰기', done: false },
    { id: 2, text: 'DOM 정리', done: true },
  ],
};

function setState(newState) {
  state = { ...state, ...newState };
  render();
}

function render() {
  document.getElementById('root').innerHTML = App(state);
  bindEvents();
}

function bindEvents() {
  document.getElementById('root').addEventListener('click', (e) => {
    const action = e.target.dataset.action;
    const id = Number(e.target.closest('[data-id]')?.dataset.id);

    if (action === 'toggle') {
      setState({
        todos: state.todos.map((t) =>
          t.id === id ? { ...t, done: !t.done } : t
        ),
      });
    }

    if (action === 'delete') {
      setState({
        todos: state.todos.filter((t) => t.id !== id),
      });
    }
  });

  document.getElementById('add-btn')?.addEventListener('click', () => {
    const input = document.getElementById('todo-input');
    if (!input.value.trim()) return;

    setState({
      todos: [
        ...state.todos,
        { id: Date.now(), text: input.value.trim(), done: false },
      ],
    });
  });
}

render();

// 이걸 직접 하려면 너무 고통스럽다
function updateTodoItem(id, newText, newDone) {
  const li = document.querySelector(`[data-id="${id}"]`);
  if (!li) return;

  const span = li.querySelector('.todo-text');
  if (span.textContent !== newText) {
    span.textContent = newText;
  }

  if (newDone) {
    li.classList.add('done');
  } else {
    li.classList.remove('done');
  }

  const btn = li.querySelector('.toggle-btn');
  btn.textContent = newDone ? '취소' : '완료';
}
// 항목이 늘어날수록 이런 함수를 계속 만들어야 한다

상태 변경 → 새 Virtual DOM 생성 → Diff → 최소한의 실제 DOM 업데이트

const userInput = '<img src=x onerror="alert(\'XSS\')">';

// 위험 — XSS 공격 가능
element.innerHTML = userInput; // 스크립트가 실행될 수 있다

// 안전 — 태그가 텍스트로 이스케이프됨
element.textContent = userInput; // 문자열 그대로 출력된다

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'childList') {
      console.log('자식 노드 변경:', mutation.addedNodes, mutation.removedNodes);
    }
    if (mutation.type === 'attributes') {
      console.log('속성 변경:', mutation.attributeName);
    }
  });
});

observer.observe(document.getElementById('target'), {
  childList: true,     // 자식 노드 추가/제거 감시
  attributes: true,    // 속성 변경 감시
  subtree: true,       // 하위 트리 전체 감시
  characterData: true, // 텍스트 내용 변경 감시
});

// 감시 중단
observer.disconnect();

// 부드러운 애니메이션 구현
function animate(element) {
  let position = 0;

  function step() {
    position += 2;
    element.style.transform = `translateX(${position}px)`;

    if (position < 300) {
      requestAnimationFrame(step); // 다음 프레임에 이어서 실행
    }
  }

  requestAnimationFrame(step);
}

// DOM 배치 읽기/쓰기 최적화
// 안 좋은 예 — 강제 동기 레이아웃 발생
elements.forEach((el) => {
  const height = el.offsetHeight; // 읽기 → 레이아웃 계산 강제
  el.style.height = height + 10 + 'px'; // 쓰기 → 레이아웃 무효화
});

// 좋은 예 — 읽기와 쓰기를 분리
const heights = elements.map((el) => el.offsetHeight); // 읽기를 먼저 모아서
requestAnimationFrame(() => {
  elements.forEach((el, i) => {
    el.style.height = heights[i] + 10 + 'px'; // 쓰기를 한 번에
  });
});

// main.js
const worker = new Worker('worker.js');

worker.postMessage({ data: largeArray }); // 워커에 데이터 전달

worker.onmessage = (e) => {
  console.log('결과:', e.data); // 워커에서 보낸 결과 수신
  updateUI(e.data);
};

worker.onerror = (e) => {
  console.error('워커 에러:', e.message);
};

// worker.js
self.onmessage = (e) => {
  const result = heavyComputation(e.data); // 무거운 연산
  self.postMessage(result); // 결과 전달
};