프론트엔드
자료구조를 활용한 복잡한 프론트엔드 컴포넌트 제작하기
두줄요약
토스증권 PC의 그리드 레이아웃을 이진 트리 자료구조로 직접 구현한 사례를 소개했습니다. 복잡한 요구사항을 데이터 구조와 컴포넌트 분리로 해결하고 저장·복구까지 구현했습니다.
핵심 내용
- 토스증권 PC 종목 상세 페이지의 드래그·리사이즈 가능한 그리드 레이아웃을 라이브러리 없이 직접 구현한 사례
- 패널 추가/제거, 최소 크기, 저장/복구, 터치 지원, 디자인 커스텀 등 복잡한 요구사항을 만족시키기 위해 이진 트리 기반 표현을 선택
- 패널 노드와 스플릿 노드로 레이아웃을 모델링하고, 트리 순회로 좌표를 계산해 DOM에 렌더링하는 구조
- Layout Manager와 Movable Grid 컴포넌트를 분리해 상태 관리, 상호작용 처리, 외부 패널 주입을 담당하게 구성
선택 이유
- 요구사항이 라이브러리의 설계 범위를 넘어 커스텀 비용이 커지는 상황
- 직접 구현이 장기적으로 더 유리하다고 판단
구조와 흐름
- 레이아웃 이진 트리로 패널 배치 상태를 완전 표현
- 트리 순회로 패널 위치와 크기 산출
- 저장된 트리와 패널 정보를 복구해 동일 레이아웃 재현
적용해볼 점
- 복잡한 UI는 화면 모양보다 데이터 구조부터 설계할 필요
- 조작 규칙이 많은 컴포넌트는 상태 표현과 렌더링 계층 분리로 단순화 가능