개요
팀과 개인의 회고 작성부터 분석까지 다루는 서비스입니다. 디프만 16기에서 9명(프론트 4, 백엔드 3, 디자인 2)이 만들었고, 활동이 끝난 뒤에도 핵심 개발과 운영을 이어가고 있습니다. 트래픽이 늘면서 모바일 중심이던 서비스를 데스크톱으로 확장하는 일을 맡았습니다.
데스크톱 레이아웃과 겹치는 모달
데스크톱에는 좌측 네비게이션(LNB)이 생기고, 그 위로 여러 모달이 겹칩니다. 네비게이션의 접힘·활성 탭 같은 상태를 여러 컴포넌트가 알아야 해서 prop drilling이 깊어졌습니다.
이 상태를 쓰는 트리는 레이아웃 안에 닫혀 있었습니다. 앱 전체에 열린 전역 상태로 올리기보다, 범위를 레이아웃으로 제한한 Context(NavigationProvider)로 해결했습니다. 쓰는 곳이 정해져 있으면 상태의 범위도 거기까지만 두는 게 추적하기 쉽기 때문입니다.
모달은 Portal로 DOM 트리 밖에 렌더하고, Header·Content·Footer를 나눈 구조에 호출용 훅을 둬서 옵션 하나로 여러 형태를 띄울 수 있게 했습니다.
토큰 만료와 자동 갱신
토큰이 만료돼도 로그인이 유지되도록 자동 갱신을 넣었습니다. 여기서 신경 쓴 건 두 가지입니다.
- 여러 요청이 동시에 만료를 만나도 갱신 요청은 1회만 나가게 했습니다.
- 갱신 요청 자신이 실패해 다시 갱신을 부르는 무한 루프를 차단했습니다.
쿼리 키와 훅 규칙
쿼리 키가 파일마다 흩어져 있어, 데이터를 바꾼 뒤 캐시를 갱신할 때 빠뜨리는 일이 생겼습니다. 쿼리 키를 한곳에 모으고 커스텀 훅 관리 규칙을 제안해 팀 표준으로 채택됐습니다.
규칙을 문서로만 두면 지켜지지 않는다는 것도 배웠습니다. 그래서 "훅은 2곳 이상 재사용될 때만 추출한다"처럼 판단할 수 있는 기준까지 함께 합의했습니다.