JDaseul

Next.js를 활용한 프론트엔드 포트폴리오 사이트 개발

기획, 설계, 프론트엔드 개발 및 배포

1. 아키텍처 • Next.js App Router 기반으로 페이지 구조 설계 • Notion API 연동을 통한 서버 사이드 데이터 패칭 구조 구성 • Promise.all을 활용해 intro 페이지에 필요한 여러 데이터 병렬 요청 • 필터 탭 상태를 URL 기반 상태로 관리해, 새로고침 및 공유 시에도 동일한 화면 유지 • React Suspense와 전역 Error 핸드링을 적용해 로딩/에러/성공 상태를 명확히 분리 2. 핵심 기능 • Notion DB에서 프로젝트 / intro / 메뉴 데이터 조회 기능 구현 • 필터 탭에 따른 프로젝트 리스트 동적 필터링 • 데이터 로딩 중 스켈레톤 UI를 노출하는 Loading 컴포넌트 적용 • API 요청 실패 시 전역 에러 화면으로 전환되는 에러 처리 구조 구성 • 스크롤 위치 기반 ProgressBar 구현으로 페이지 탐색 진행도 시각화 3. 데이터 관리 • 서버 컴포넌트에서 Notion API를 호출하는 Read 전용 데이터 흐름 설계 • 페이지별로 필요한 데이터만 요청하도록 로직 분리 • Suspense 경계를 기준으로 데이터 패칭 컴포넌트를 분리해 부분 로딩 UI 제공 • 병렬 요청 구조를 통해 초기 로딩 성능 최적화 4. 시각화 • Tailwind CSS로 반응형 UI 구성 • 스크롤 비율에 따라 0% ~ 100%로 변화하는 상단 Progress Bar UI 적용 • 데이터 로딩 상태에 따른 스켈레톤 UI로 사용자 대기 경험 개선 5. 배포 및 운영 • Vercel을 통한 서비스 배포

기존에 구글 스프레드시트로 관리하던 영어 단어 학습의 불편함을 해결하기 위해, 월별 학습량 분석·검색·북마크·메모 기능을 갖춘 개인 맞춤형 단어 관리 서비스

기획, 설계, 프론트엔드 개발 및 배포

1. 아키텍처 • Supabase Auth를 활용해 회원가입 및 로그인 기능을 구현하고, 개인 계정 단위로 단어 데이터를 관리하는 구조 설계 • TanStack Query를 도입해 서버 상태와 UI 상태를 분리하고, 캐시 기반 구조로 데이터 동기화 및 상태 일관성 확보 • 필터, 검색, 페이지네이션을 URL 상태로 통합해 UI 상태와 URL이 항상 일치하는 탐색 구조 설계 2. 핵심 기능 • 단어 생성·수정·삭제 시 사용자 계정 기준 접근 제어 적용 • 중복 단어 등록을 사전에 차단하는 검증 로직 구현 • 메모 입력 데이터 정규화 처리로 필터 조건 처리 및 데이터 일관성 유지 3. 데이터 관리 • Supabase의 from / to range와 count를 활용해 페이지네이션 및 전체 개수 관리 구조 구현 • 레코드 페이지에서 debounce 기반 단어 검색을 적용해 불필요한 요청을 줄이고 검색 UX 개선 • 최근 등록 단어 데이터를 대시보드에 노출하고, 데이터 변경 시 즉시 반영되는 흐름 유지 • 대용량 데이터 환경에서도 안정적인 목록 탐색이 가능하도록 데이터 로딩 흐름 구성 4. 시각화 ◦ 대시보드에서 최근 등록한 단어 목록과 함께, 단어 추가 흐름을 Chart.js로 시각화해 학습 추이를 한눈에 확인할 수 있도록 구성 ◦ 단어 등록 시점의 연·월·일 데이터를 가공해 일 / 월별 학습 통계를 확인할 수 있는 대시보드 구현 5. 배포 및 운영 ◦ GitHub Actions와 Vercel을 연동해 main 브랜치 기준 자동 빌드·배포가 이루어지는 CI/CD 환경 구성