핵심 요약
여기어때가 앱 여부와 화면 폭의 두 축을 독립적으로 다루는 프런트엔드 설계와 서버 렌더링 하이드레이션 관리 방안을 공유했습니다.
주요 경험
- 서버에서 width를 모르는 상태를 useSyncExternalStore로 안전하게 다루고 브라우저에서 재측정
- 데스크톱/모바일 두 레이아웃을 한 벌로 관리하는 트레이드오프를 비교하고 상황에 맞게 선택
- 드롭다운/모달/바텀시트의 열림 상태를 부모에서 관리해 일관성 유지
얻은 인사이트
- 서버 렌더링 시 width 모름은 CLS를 관리하는 핵심 포인트
- 두 축 분리 설계가 유지보수와 확장성에 도움
- 한 벌 컴포넌트로 시작하면 초기 비용은 커지나 이후 변경은 수월