프론트엔드
보통
코딩
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 수행
- 변경 사항이 없으면 빈 배열 반환
힌트
힌트를 활용하세요
실행 버튼을 눌러 코드를 실행하세요.