자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기

간단 소개

토스증권 PC의 복잡한 그리드 레이아웃 UI를 이진 트리 자료구조를 활용하여 직접 구현한 사례를 소개합니다.

AI Summary

요구사항 분석 및 라이브러리 선택
- 토스증권 PC의 종목 상세 화면 레이아웃 기능 구현을 위해 패널 추가/제거, 크기 변경, 레이아웃 저장 등 복잡한 요구사항이 필요했습니다.
- 기존 라이브러리 커스터마이징의 어려움을 고려, 직접 구현을 결정했습니다.
자료구조를 활용한 레이아웃 표현
- 패널 레이아웃을 좌표가 아닌 이진 트리 구조로 표현하여 패널 간의 관계를 명확하게 했습니다.
- 스플릿 노드와 패널 노드를 사용하여 레이아웃의 상태를 완전하게 표현했습니다.
컴포넌트 구성 및 레이아웃 저장
- Layout Manager 모듈을 통해 이진 트리에서 패널 좌표를 계산하고, Movable Grid 컴포넌트로 화면에 그렸습니다.
- Headless 컴포넌트 개념을 활용하여 패널 내부 기능은 외부에서 주입하도록 설계했습니다.
- 레이아웃 이진 트리와 패널 정보를 JSON 형태로 저장하여 레이아웃 저장/불러오기 기능을 구현했습니다.