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

이 글은 토스증권 PC의 종목 상세 페이지에서 사용되는 복잡한 그리드 레이아웃 기능을 직접 구현한 경험을 공유합니다. 패널 추가/제거, 크기 조절, 최소 크기 지원, 레이아웃 저장, 터치 스크린 지원 등 다양한 요구사항을 만족시키기 위해 기성 라이브러리 대신 직접 구현을 선택했습니다.

복잡한 요구사항을 가진 UI를 구현할 때 라이브러리 사용과 직접 구현 사이의 장단점을 비교하고, 자료구조를 활용하여 이러한 복잡성을 어떻게 해결했는지에 대한 과정을 설명합니다. 궁극적으로는 라이브러리의 한계를 극복하고 요구사항에 완벽하게 부합하는 커스텀 UI를 성공적으로 구축한 사례를 보여줍니다.