Next.js + App Router

Next.js의 App Router 구조를 기반으로 페이지 라우팅, 동적 세그먼트, 레이아웃 구성, SEO 최적화까지 직접 적용해 구조적인 웹 애플리케이션을 개발했습니다. H-Helper App, To-do 리스트, 순간 기억력 게임 등 다양한 프로젝트에 활용했습니다.

React Query

React Query로 서버 상태를 관리했습니다. H-Helper App 사이트에서 사용자 운동 기록을 불러오고, 자동 캐싱 및 리패칭으로 UX를 최적화한 경험이 있습니다.

Tailwind CSS + Shadcn UI

Tailwind로 유연하게 UI를 구성하고, Shadcn UI를 활용해 일관된 컴포넌트를 빠르게 구성할 수 있습니다. 반응형 디자인과 커스텀 UI 구현 모두에 능숙합니다.

GSAP + Lenis로 인터랙션 구현

포트폴리오와 순간 기억력 게임 프로젝트에서 Lenis로 부드러운 스크롤을 적용하고, ScrollTrigger로 각 요소가 등장하는 애니메이션을 구성했습니다. 시각적 몰입감과 UX를 함께 고려한 설계를 할 수 있습니다.

Next Auth

Google, GitHub OAuth를 연동하여 인증/세션을 관리해 본 경험이 있습니다. Credentials 로그인도 함께 구현했으며, 사용자 정보를 MongoDB에 저장하고, JWT 기반으로 role, provider 같은 사용자 메타데이터를 세션에 포함시켜 클라이언트에서 인증 상태에 따라 유연하게 대응할 수 있도록 구성했습니다.

MongoDB

MongoDB를 사용해 유연한 데이터 저장 구조를 설계하고, 데이터를 효율적으로 관리한 경험이 있습니다. 특히 Health Timer App에서 운동 기록을 populate하는 과정에서 MongoDB의 장점을 활용했습니다.