전체 글 (4) 썸네일형 리스트형 [React] 전역 상태 충돌과 복잡성 제어 여러 상태가 서로 영향을 미칠 때 어떻게 관리해야 할까?대규모 애플리케이션의 UI 레이아웃은 수많은 상태들의 유기적인 결합체이다. 이번 프로젝트에서 사이드바, 헤더의 뷰 모드, AI 프롬프트 창 등 서로 공간을 차지하는 UI 요소들을 전역으로 관리하는 작업을 맡았다.처음에는 각 상태를 useState로 선언하고 useEffect로 연결하면 될 줄 알았다. 하지만 "AI 창을 켜면 사이드바가 닫혀야 하는데, 다시 끄면 사이드바가 안 돌아와요./ 페이지 이동했더니 갑자기 사이드바가 닫혀버려요." 등의 문제가 발생했다. 심지어 useEffect가 서로를 트리거하며 무한 루프에 빠지는 상황까지 발생했다.디자인 시안문제 상황1.1. 요구사항: 유기적으로 반응하는 레이아웃기획팀의 요구사항은 단순한 ON/OFF가 아.. [Design System] 버튼 컴포넌트의 확장성 문제 디자인 시스템에서의 공통 컴포넌트는 뭘까? 이번 프로젝트에서 디자인 시스템을 구축하며 가장 먼저 마주한 과제는 바로 Button 컴포넌트였다.처음에는 단순하게 생각했다. 디자인 시스템이니까, 어디서든 가져다 쓸 수 있도록 공통적이고 확장성 있게 만들면 되는 거 아냐?하지만 막상 구현에 들어가니, 이 확장성이라는 단어가 주는 무게감은 상당했다. 나는 원래 해당 컴포넌트를 사용하는 팀원이 간편하게 import할 수 있도록 분기처리를 통해 구현했었다. 그런데 이번 프로젝트에서 개발 도중에도 사이즈, 색상, 테두리, 상태(Disabled/Hover)... 지원해야 할 옵션이 늘어날수록 경우의 수는 기하급수적으로 늘어났고, 모든 것을 지원하면서도 코드는 깔끔하게 유지해야 한다는 모순적인 상황에 빠지게 되었다.특히.. [React] 확장성 있는 Toggle UI 구현기: Compound Component Pattern 도입 그냥 Props로 넘기면 되는 거 아냐?프로젝트 진행 중 뷰 모드 전환(Card View ↔ Tree View) 기능을 위한 Toggle 컴포넌트 개발이 필요했다. 기획 요구사항은 단순해 보였지만, UI 디테일과 확장성을 고려했을 때 일반적인 방식으로는 한계가 있었다.단일 컴포넌트 구조에서 발생한 문제를 Compound Component Pattern(컴파운드 컴포넌트 패턴)으로 해결해 보았다.문제 상황1.1. 요구사항 분석다형성: 카드/트리 뷰 외에도, 향후 다크/라이트 모드 등 다양한 맥락에서 재사용 가능해야 함.애니메이션: 선택된 항목으로 배경 슬라이더가 부드럽게 이동해야 함 (transition).유연한 UI: 각 항목은 텍스트일 수도, 아이콘일 수도, 둘 다일 수도 있음.접근성: 스크린 리더가 .. [Frontend] 기술 중심 폴더 구조의 한계와 FSD의 필요성 목차합동세미나 회고합동세미나 프로젝트를 시작할 때, 기능 중심이 아닌 기술 중심으로 폴더 구조를 구성했다. components/, hooks/, types/, apis/ 등과 같은 기술 단위로 크게 폴더를 나누고, 그 안에서 다시 common과 각 도메인별 폴더를 섞어두는 방식이었다. 지금까지 진행했던 프로젝트들은 대부분 기술별 폴더 구조로 시작했고, 개발 일정에 쫓기다 보니 이를 깊이 고민할 여유가 없었다. 하지만 이번 합동세미나 프로젝트에서는 팀원 모두가 폴더 구조에 대한 불편함을 느끼기 시작했다. 컴포넌트를 추가할 때마다 이 파일이 components/common에 들어가야 하는지, 특정 도메인 컴포넌트 폴더에 넣어야 하는지, 혹은 공통 로직은 어디에 둬야 하는지 매번 헷갈렸고, 관련된 코드들이 서.. 이전 1 다음
