오랜만에 면접을 보러 갔다.

준비도 나름 했다.

그런데 면접관 앞에 앉아 첫마디를 꺼내는 순간, 머릿속이 이상하게 멈췄다.

어... 그게... 음... (아, 분명 아는 건데...)

이 글은 그 어색한 침묵에서 시작된 이야기다.

DOM과 BOM의 차이가 뭔가요?

면접관이 던진 너무나 간단한 첫 번째 기술 질문이었다.

DOM은 매일 다룬다.
document.querySelector를 얼마나 많이 써 봤는가.
BOM도 낯설진 않다. window, location, navigator 모두 익숙한 이름이다.

그런데 이 둘의 차이를 설명해보라는 말에 갑자기 문장이 꼬이기 시작했다.

DOM은 Document Object Model이고요... 그러니까... BOM은 브라우저... 음...

머릿속에 개념이 없는 건 아니었다. 다만 정리가 되어 있지 않았다.

마치 책장에는 책이 가득한데, 정작 어디에 꽂혀 있는지 모르는 사서가 된 기분이었다.

async/await과 Promise는 어떻게 다르죠?

두 번째 질문이 들어왔을 때는 식은땀이 났다.

async/await는 비동기 처리를 할 때 늘 쓰고, Promise는 그것의 기반이 되는 객체라는 것도 알고 있었다.

그런데 막상 “둘의 차이가 뭐냐” 라는 질문을 받으니 또 머리가 새하얘졌다.

async/await이... Promise를 더 쉽게 쓸 수 있게 해주고... 결국 비슷한데... 차이점은...

알고 있는데 설명하지 못했다.

그 이상한 어긋남이 다시 찾아왔다.

안다는 건 대체 뭘까

면접이 끝나고 집에 오는 길에 계속 그 생각이 머릿속을 맴돌았다.

분명 매일 쓰는 기술이다. 코드도 잘 돌아간다. 그런데 왜 말로 설명하려 하면 자꾸 막히는 걸까.

곰곰이 생각해보니 답은 의외로 단순했다.

1줄로 설명할 수 없으면, 사실은 아직 내 것이 아니다.

스쿼트를 제대로 아는 트레이너는 “무릎보다 고관절을 먼저 접는 동작”이라고 핵심을 짚는다.
반대로 어설프게 아는 사람은 자세를 이것저것 설명하지만, 왜 그렇게 해야 하는지는 말하지 못한다.

개발 지식도 똑같다.

머릿속에서 정리가 끝난 사람만이 짧고 분명하게 말할 수 있다.
물론 면접 답변까지 한 줄이면 곤란하겠지만, 적어도 한 줄로 시작할 수는 있어야 한다.

그래서, 핸드북을 만들기로 했다

면접이 끝난 그날 밤, 노트를 펼쳤다.

그리고 모르는 것들,
정확히는 안다고 생각했지만 설명하지 못했던 것들을 하나씩 적기 시작했다.

이 시리즈는 그 노트의 확장판이다.

규칙은 단 하나다.

모든 개념은 1줄로 요약한다.

모든 글에는 1줄 요약과 상세한 설명을 넣을 예정이다.

다루는 범위는 꽤 넓다.
프론트엔드 핵심 개념은 물론이고, CS 기초 지식, 그리고 디자이너·기획자·백엔드 개발자와 협업할 때 자주 듣는 타 직군의 용어까지 담아보려 한다.

프론트엔드 개발자는 결국 경계에 서 있는 사람이라고 생각한다.
사용자와 서버 사이, 디자인과 코드 사이, 기획과 구현 사이를 오가며 일한다.

그래서 알아야 할 것도 많다.
물론 그 모든 것을 깊게 파고들 수는 없다.
하지만 적어도 한 줄로 설명할 수 있을 만큼은 정리해두고 싶었다.

같이 모르면, 같이 알아가자

솔직히 말하면, 이 핸드북은 내 정리 노트에 가깝다.

그런데 쓰려다 보니 욕심이 생겼다.

나처럼 면접장에서 말문이 막혀본 사람,
나처럼 안다고 생각했지만 사실은 제대로 정리하지 못했던 순간을 겪어본 사람.

그런 사람에게도 도움이 되지 않을까 싶었다.

누구나 그런 순간이 있다.

매일 쓰는 기술인데, 누군가 “그게 정확히 뭐예요?”라고 묻는 순간 갑자기 말이 꼬여버리는 순간.

그럴 때 이 핸드북을 펼쳐 1줄짜리 정의를 슬쩍 가져가도 좋고,
“나는 이렇게 정리하겠는데?” 하며 더 나은 한 줄을 덧붙여도 좋다.

이 시리즈는 정답을 적어두는 책이라기보다, 흐릿한 개념을 또렷한 문장으로 바꿔가는 기록에 가깝다.

그럼, 이제 첫 장을 넘겨보자.