하이드레이션 비교기

목표

서버가 그린 트리와 클라이언트가 그린 트리를 견줘 어긋난 자리를 찾아내고,
그것을 어느 경계까지 다시 그려야 하는지로 옮기는 비교기를 만듭니다.

왜 중요한가

하이드레이션은 이미 있는 DOM 에 처리기를 붙이는 일이라, 두 쪽이 다른 것을
그리면 화면은 조용히 틀린 채로 남습니다. 그래서 프레임워크들은 어긋난 자리를
찾아 알려 주는 일에 공을 들이는데, 그 알림이 쓸모 있으려면 두 가지가 필요합니다.

첫째, 모양이 어긋난 자리에서 멈춰야 합니다. 목록에 항목 하나가 앞으로
끼어들면 그 아래가 통째로 밀리는데, 계속 내려가면 불일치 수백 건이 쏟아지고
진짜 원인이 묻힙니다. 둘째, 경계를 알아야 합니다. 같은 불일치라도 경계
안쪽이면 그 하위만 다시 그리면 되지만, 경계 밖이면 페이지 전체를 다시 그립니다.

트리와 경로의 모양

노드는 둘 중 하나입니다.

• 문자열 — 텍스트 노드
• { tag, props, children } — 요소. 경계를 여는 노드는 boundary: "이름" 을 더 가집니다

경로는 뿌리가 "$" 이고, i 번째 자식은 부모 경로 + "/" + i 입니다.
예: 뿌리의 두 번째 자식의 첫 자식은 "$/1/0".

불일치 하나는 { path, kind } 이고, kind 는 text · attr · tag ·
children 중 하나입니다. attr 이면 name 에 속성 이름을 더 담습니다.

단계

1. 텍스트 비교와 경로
2. 속성 비교 — 순서는 불일치가 아니다
3. 모양이 어긋나면 멈춘다
4. 억제는 한 겹만
5. 가장 가까운 경계 붙이기
6. 다시 그릴 곳 계산 — repairPlan
7. 직접 재서 적기 — /root/work/hydrate/07-report.txt
8. 정리 — /root/work/hydrate/08-notes.md

참고

• 7단계가 읽는 트리 한 쌍은 이미지에 들어 있습니다:

/opt/fixtures/ssr-hydrate/pair.json (server 와 client 두 열쇠).

• 채점기는 여러분의 /root/work/hydrate/hydrate.mjs 를 import 해서 계약만

확인합니다. 브라우저도 프레임워크도 쓰지 않습니다.

• 흔한 실수 둘: 속성 순서를 불일치로 세는 것, 그리고 자식 수가 다른데도 계속

내려가 불일치를 부풀리는 것.

단계 8개

1. 텍스트 비교와 경로
2. 속성 비교 — 순서는 불일치가 아니다
3. 모양이 어긋나면 멈춘다
4. 억제는 한 겹만
5. 가장 가까운 경계 붙이기
6. 다시 그릴 곳 계산
7. 직접 재서 적는다
8. 무엇이 불일치를 가뒀나