K
KRYFT Problem Bank
프론트엔드 보통 코딩

Virtual DOM Diff 알고리즘

두 가상 DOM 트리의 차이를 찾는 간단한 diff 알고리즘 구현

30분
100점
#3630

문제 설명

React의 Virtual DOM처럼 두 트리 구조의 차이점을 찾는 간단한 diff 알고리즘을 구현하세요.

노드 구조

{
    type: "div",
    props: { className: "container" },
    children: [...]
}

반환 형식

[
    { type: "CREATE", node: {...} },
    { type: "REMOVE", index: 0 },
    { type: "REPLACE", newNode: {...} },
    { type: "UPDATE", props: {...} }
]

요구사항

  • 노드 추가(CREATE), 삭제(REMOVE), 교체(REPLACE), 속성 변경(UPDATE) 감지
  • 자식 노드에 대해 재귀적으로 diff 수행
  • 변경 사항이 없으면 빈 배열 반환

힌트

실행 버튼을 눌러 코드를 실행하세요.