대규모 공고 리스트 최적화(가상화/무한 스크롤) 및 SSR 안정화 전략

[yujinimda]

1. 성능 최적화 성과 (Performance Milestone)

모든 PR이 공통적으로 TanStack Query와 Virtual을 도입하여 압도적인 성능 향상을 증명했습니다.,,,

• DOM 노드 98.3% 절감: 기존 일반 렌더링 시 1,000개 데이터 기준 약 34,000개였던 노드 수를 453개로 최적화하여 브라우저 메모리 부하를 최소화했습니다.,
• 응답성 개선: 메인 스레드 점유 시간(Long Task)을 기존 대비 약 33%~73% 단축하여 저사양 기기에서도 끊김 없는 스크롤 환경을 구축했습니다.,,
• 반응형 대응: useBreakpointLimit 훅을 통해 디바이스 별로 최적의 열(1~3열)을 자동으로 계산하도록 설계했습니다.,

2. 핵심 기술적 과제: Hydration Mismatch 해결

SSR(Next.js) 환경에서 localStorage를 사용할 때 발생하는 렌더링 불일치 문제를 다음과 같이 표준화하여 해결합니다.,

• 문제 원인: 서버는 사용자의 localStorage 필터 값을 알 수 없어 '기본 데이터'를 프리패치하지만, 클라이언트는 저장된 필터 값으로 첫 화면을 그리려 함으로써 데이터 구조가 충돌함.,
• 즉각적 조치 (현재 적용 방식):
  1. 초기값 통일: 필터 상태의 초기값을 서버와 동일하게 null로 고정하여 첫 하이드레이션을 통과시킵니다.,
  2. 지연 주입: 컴포넌트 마운트 직후(useEffect)에만 localStorage 값을 읽어 상태를 업데이트함으로써 오류를 방지합니다.,
• 구조적 보완: 서버에서 가져온 데이터를 useInfiniteQuery가 기대하는 InfiniteData 구조로 변환해주는 JobListPrefetcher를 도입해 데이터 정합성을 확보했습니다.,,

3. 향후 고도화 제안: URL 기반 상태 관리로의 전환

localStorage 방식의 한계를 극복하기 위해 필터 상태를 URL Query Parameter로 이전하는 것을 제안합니다.

• 제안 이유:
  • SSR 완벽 지원: 서버가 URL을 직접 읽을 수 있어, 첫 HTML 생성 시점부터 사용자가 원하는 필터링된 결과를 프리패치하여 전달 가능합니다.
  • 정합성 보장: 서버와 클라이언트의 데이터가 항상 일치하므로 useEffect를 통한 복잡한 하이드레이션 회피 로직이 불필요해집니다.
  • 사용자 편의: 필터링된 결과 페이지의 URL을 복사하여 다른 사용자에게 공유하거나 북마크할 수 있습니다.
• 실행 방안: 현재 구현된 BFF(Route Handler)의 sigungu, fitLevel 파라미터 수신 로직을 활용하여, 주소창의 변화를 감지하고 데이터를 페칭하는 구조로 확장합니다.

4. 추가 품질 강화 항목

• 웹 접근성 준수: 가상 리스트에 role="list", aria-setsize, aria-posinset 등 ARIA 속성을 필수로 적용하여 보조 기기 사용자의 탐색 경험을 보장합니다.
• 서버 부하 관리: 서버사이드 필터링 시 외부 API의 Rate Limit을 고려하여, 한꺼번에 모든 데이터를 요청하는 대신 적절한 페이지 수 제한(예: 최대 1,000개) 및 캐싱 전략을 병행합니다.
• 검증 자동화: 성능 저하를 방지하기 위해 Playwright 기반의 성능 측정 스크립트를 지속적인 모니터링 도구로 활용합니다.,

---

요약: 본 프로젝트는 가상화를 통해 성능을 극대화하고 프리패칭으로 초기 로딩을 최적화했습니다. 현재 발생한 하이드레이션 이슈는 '초기값 null + useEffect' 전략으로 안정화하였으며, 향후 URL 기반 상태 관리를 도입하여 더욱 견고한 SSR 아키텍처로 진화할 것을 권고합니다.

[yujinimda]

저희 pr내용이 거의 같은데 Hydration Mismatch 해결 이부분만 서로 다르게 해서 내일 같이 내용 보고
근본적인 로컬스토리지를 변경하는것도 괜찮을꺼같아서 같이 내일 보고 정하면 좋을꺼같아요~!