김동혁

Next.js, TypeScript 기반으로 30개 이상 화면과 50개 이상의 컴포넌트 설계 및 개발

60개 이상 API 연동을 통해 복잡한 상태 흐름 안정적 설계 및 유지보수 가능한 구조 구축

페이지별 SSR과 CSR에 맞는 렌더링 전략을 분리 적용

• 주요 5개 페이지는 SSR 기반 데이터 패칭을 통해 초기 로딩 속도 및 SEO 점수 향상
  
• 나머지 CSR 페이지는 TanStack Query의 prefetchQuery를 활용해 콘텐츠 깜빡임 및 초기 로딩 지연 문제 해결
  
• SEO 점수 84 → 100, FCP 1.6s → 0.4s로 개선 (Lighthouse 기준)
  
• 관련 블로그 포스트
  

Infinite Query와 리스트 가상화를 결합하여 무한 스크롤 구현

• 첫 콘텐츠 로딩 시간 1.5s -> 0.3s, 체류 시간 20% 증가
  
• 관련 블로그 포스트
  

WebSocket과 STOMP를 활용한 실시간 채팅 및 알림 시스템 구현

• Zustand 상태 캐싱과 자동 재연결 로직을 통해 안정성과 사용자 경험 개선
  

Feature-Sliced Design 아키텍처로 관심사 분리와 코드 가독성 향상

디자이너 없이 다양한 디바이스에 대응하는 반응형 UI를 직접 구현

이력서와 포트폴리오를 각각 독립된 앱으로 운영하는 Turbo 기반 모노레포 환경 설계

• /rs, /pf 을 하위 도메인으로 분리.
  

정적 사이트 생성(SSG)기반의 웹사이트

반응형 레이아웃 설계로 모든 디바이스에서 일관된 UI/UX를 제공

• 디자인 없이 CursorAI를 활용해 빠르게 UI를 설계 및 구현.
  

모듈화된 컴포넌트 구조 설계

• 새로운 프로젝트나 콘텐츠 추가 시에도 손쉽게 유지보수 및 확장 가능하도록 구성.
  

커스텀 마크업을 React 엘리먼트로 변환해주는 텍스트 파서 훅을 구현.

Framer Motion 활용 부드러운 인터랙션 구현

Next.js SSR SSG 부분 적용 및 SEO 구성

랜딩 페이지 CSS scroll-snap을 적용해 사용자 중심의 직관적인 스크롤 흐름을 구현

다국어 환경을 위해 Recoil 기반 글로벌 상태 관리 구조를 설계

PC 디자인 시안에 맞춰 모든 페이지 반응형 웹 디자인 적용.

Cursor AI를 활용해 Figma 없이 UI를 바로 구현.

Next.js + Supabase 기반의 서버리스 구조로, 비용 효율적인 개발 환경 구성