김영인

Skills Next.js 15, React 18, TypeScript 5, TanStack Query 5, Zustand 4, Axios, Tailwind CSS, Radix UI, ESLint 9, Husky

Key Achievements

• [인터랙션 성능] 레이아웃 사이드바 리사이즈에서 고빈도 이벤트로 프레임 드랍/버벅임 발생 → requestAnimationFrame 기반 스케줄링 적용 → 프레임 드랍 80%+ 개선 및 INP 80ms대 안정화
  기술 블로그: AppSidebar WAI-ARIA & rAF 최적화
• [상태/캐싱] 시나리오 토글에서 객체 배열 정렬 불일치로 쿼리 키가 흔들려 최대 4~5회 API 재호출 → 정렬된 집합 기반 리팩터링 및 쿼리 키 재설계 → 동일 조합은 최초 1회 호출 후 stale 전 추가 0회로 캐시 재사용
  기술 블로그: TanStack Query 캐시 키 안정화로 댓글·증거 조회 성능 개선하기
• [인증] 토큰 만료 시 세션 검증과 401 인터셉터가 동시에 refresh를 호출해 최대 10회 이상 중복 → refreshViewer의 Singleton Promise + failedQueue 재시도 큐로 단일화 → refresh 10회→1회 수렴 및 인증 흐름 안정화
  기술 블로그: Signleton Promise 기반 JWT 유저 인증 기능 구현

Basic Implementations

• App Router + FSD 레이어 표준화 및 ESLint로 의존성 방향 고정
• WAI-ARIA(role/aria-*) 및 키보드 조작 핸들러 반영
• FCM 알림 파이프라인 통합 + BroadcastChannel 멀티탭 동기화
• Vitest+MSW로 유닛→통합→E2E 인증 테스트 인프라 구축 및 회귀 차단

Skills Next.js 15, React 19, TypeScript 5, TanStack Query 5, Zustand 5, Supabase(PostgreSQL/Auth/Storage), Tailwind CSS 4, shadcn/ui, Zod

Key Achievements

• [성능/캐시] 읽기 요청이 매번 DB 조회로 이어져 중복 fetch 및 SSR Hydration 계약 불일치 발생 → Next.js Data Cache(unstable_cache)와 태그 기반 무효화로 읽기 스냅샷을 공유하고, TanStack prefetch/dehydrate/HydrationBoundary로 queryKey를 정렬 → 재방문 시 DB 접근/중복 요청 감소
• [SEO] 검색 유입을 위해 색인 품질을 높일 필요 → App Router metadata/ generateMetadata로 페이지별 title/description/OG/JSON-LD를 구성하고 sitemap.xml, robots.txt, semantic tags를 정리 → Lighthouse SEO 100점
• [검색/필터 UX] 뒤로가기·새로고침·URL 공유 후에도 동일 필터 조합 재현이 어려워 탐색 흐름이 끊김 → URLSearchParams 동기화와 useInfiniteQuery 기반 검색을 구성하고, Supabase RPC get_posts_with_all_hashtags로 다중 해시태그 AND/정렬을 서버 처리 → 동일 조건 재현

Basic Implementations

• useInfiniteQuery + IntersectionObserver 무한 스크롤, Suspense/Skeleton
• Supabase OAuth/RLS/Middleware/Server Actions로 Admin-only 쓰기·수정·삭제 권한 제어
• 마크다운 실시간 미리보기, 드래그&드롭 이미지 업로드, Zod 검증으로 입력 신뢰도 확보
• QueryClient 분리 및 쿼리 키 팩토리로 캐시 invalidate 키를 일관화하고 좋아요 동기화 정책 적용

Skills Next.js 15, React 19, TypeScript, Tailwind CSS, Supabase(PostgreSQL), ImageKit CDN, Vercel

Key Achievements

• [성능(LCP)] Cold Start에서 LCP가 4.69s 까지 지연 → ImageKit CDN 경로 분리 + next/image priority/sizes/ 로더 최적화 → 4.69s→2.81s(약 40% 단축), 전송 용량 76KB→26KB로 개선
• [전환 성능] 검색 후 상세 페이지 진입 후 지도 이미지 요청이 늦게 시작돼 전환 직후 체감 지연 → onMouseEnter/onPointerDown에서 new Image() preload로 네비게이션 전 요청 → ~5.8s→~4.3s로 전환 타임라인 개선
• [UX] Hard navigation으로 맥락이 끊겨 탐색 효율 저하 → Intercepting/Parallel route 모달과 스크롤 잠금, 모달 top 보정 적용 → 연속 검색/위치 확인 UX 안정화

Basic Implementations

• URL query로 검색 상태 유지(새로고침/공유 재현)
• Suspense/Skeleton + 반응형 레이아웃과 모달 스크롤 잠금
• generateMetadata로 검색/상세 SEO 및 OG 동적 구성
• ImageKit/next/image 전달 최적화 + 터치 대응(preload onPointerDown)