# 기본기에 대하여

> 기초를 배우려고 속도를 늦추는 것이, 막히지 않는 가장 빠른 길인 이유.

게시일: 2026-04-03  
태그: fundamentals, learning, javascript  
출처: https://rittwoodford.com/ko/articles/on-fundamentals

---

특히 처음에는, 곧바로 작동하는 부분으로 건너뛰고 싶은 유혹이 있다. 라이브러리를 가져오고, 스니펫을 복사하고, 데모를 돌린다. 그렇게 하면 빠르게 나아간다 — 막히기 전까지는. 행복한 경로(happy path)를 벗어나는 순간, 받아 든 에러는 추상화 세 겹 아래에 있고, 무엇이 왜 실패하는지 전혀 알 수 없을 때까지는.

나도 그런 사람이었다. 작동하는 코드를 손에 쥐고도 왜 작동하는지는 전혀 모르는 기분을 안다. 그 불편함은 사라지지 않는다 — 일이 매끄럽게 풀릴 때 잠시 조용해질 뿐, 어긋나는 순간 아주 시끄러워진다.

## 가장 아래 층이 중요한 이유

무언가가 무엇 위에 세워졌는지 이해하면, 에러에 주소가 생긴다. "이 콜백이 실행되지 않는다"는 말은, 이벤트 루프가 실제로 무엇을 하는지 알 때 다른 의미를 갖는다. "컴포넌트가 너무 자주 리렌더링된다"는, React가 리렌더링을 어떻게 결정하는지 이해할 때 진단 가능해진다. 추상화는 여전히 유용하다 — 가상 DOM을 직접 구현해야 쓸 수 있는 건 아니다 — 하지만 그 아래에서 무슨 일이 일어나는지 알면, 그것이 언제 깨지고 어디를 봐야 하는지 알 수 있다.

> [!tip] 끝까지 내려가지 말고, 한 층만 더 내려가라
>
> 더 나은 JavaScript를 쓰기 위해 V8 내부까지 이해할 필요는 없다. 하지만 이벤트 루프, 클로저, 프로토타입 체인은 이해해야 한다. 실제로 마주치는 버그를 설명해 주는 층을 골라라.

목표는 전지전능이 아니다. 일이 어긋났을 때 쓸모 있을 만큼 정확한 멘탈 모델을 세우는 것이다.

## 구체적인 예: 이벤트 위임

기초를 아는 것이 모든 것을 바꾸는 전형적인 사례. `addEventListener`가 요소에 핸들러를 붙인다는 것만 안다면, 반복문 안에서 항목마다 핸들러를 붙이는 게 괜찮아 보인다 — 목록이 커지거나 항목이 동적으로 추가·제거되기 전까지는. 하지만 클릭 이벤트가 DOM을 타고 위로 버블링된다는 걸 안다면, 부모에 하나의 핸들러만 붙이고 이벤트가 찾아오게 둘 수 있다.

```js
// 항목마다 핸들러 하나 — 목록이 동적이면 무너진다
items.forEach((item) => {
  item.addEventListener("click", handleClick);
});

// 부모에 핸들러 하나 — 이벤트가 도착하면 target을 읽는다
list.addEventListener("click", (e) => {
  const item = e.target.closest("[data-item]");
  if (!item) return;
  handleClick(item);
});
```

작고 고정된 목록이라면 어느 쪽도 틀리지 않았다. 하지만 크고 동적인 목록에서는 두 번째가 압도적으로 저렴하고, 그 이유는 버블링을 이해해야만 보인다. 그것이 기초를 배우는 것의 수익이다: 최적화는 필요해지기 전까지 보이지 않다가, 필요한 순간 정확히 그것이 답이 된다.

## 맺으며

의도적으로 천천히 가라. 속도가 중요하지 않아서가 아니라, 이해는 복리로 쌓이기 때문이다. 진짜로 이해한 개념 하나하나가 만료되지 않는 도구가 된다. 훑고 지나가면 흐려지고, 직접 쌓으면 남는다.

다시, 더 똑똑하게. 🔁