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을 통한 서비스 배포

오늘 할 일을 작은 단위(Slice)로 나눠 관리하며, 여러 목표의 진행 상태를 대시보드에서 한눈에 확인할 수 있는 Todo 서비스

• 대시보드 화면 구성 및 상태 기반 데이터 노출 구현 • 목표 진행 상태에 따른 정보 구조 및 UX 설계

1. 아키텍처 • TanStack Query를 활용해 서버 상태 중심의 상태 관리 구조 구성 • 캐시 기반 갱신으로 데이터 변경 시 UI가 즉시 반영되는 흐름 구축 • 대시보드와 목표 상세 페이지 간 데이터 일관성 유지 • useSuspenseQuery와 react-error-boundary를 적용해 로딩과 에러 처리를 공통 레이어에서 관리하는 구조로 구성 2. 핵심 기능 • 목표 상세 페이지에서 목표 조회·수정·삭제 기능 구현 • 사용자가 목표 상태를 직접 관리할 수 있는 핵심 플로우 담당 영역 구현 3. 데이터 관리 • 대시보드 / 목표 상세 페이지에 데이터 패칭 구조 적용 • 화면별로 동일한 데이터를 단일 데이터 소스 기준으로 공유하도록 구성 • 목표 목록이 2개 이상일 때 무한 스크롤 방식으로 로딩되도록 구현해 초기 로딩 부담 감소 및 탐색 UX 개선 • useSuspenseQuery로 데이터 패칭을 처리하고, 로딩 상태는 Suspense로 위임해 컴포넌트 단위 로직 단순화 • react-error-boundary를 통해 패칭 에러를 공통 에러 UI로 처리해 화면별 예외 처리 중복 제거 4. 시각화 (대시보드 & 목표 상세) • 서비스 진입 시 전체 진행 흐름을 빠르게 파악할 수 있도록 구성해 인지 부담 감소 4-1. 대시보드 개발 ▪ 최근 할 일과 전체 진행 상황을 한 화면에서 확인할 수 있도록 대시보드 화면 구성을 설계 ▪ 진행 중 / 완료 상태별 목표 카드 분류 및 시각화 4-2. 목표 상세 페이지 ▪ 목표 정보와 목표별 할 일 진행률을 한 화면에서 확인할 수 있도록 목표상세 화면 구성을 설계 ▪ 진행 중 / 완료 상태로 할일 목록 카드 분류 및 시각화 5. 배포 및 운영 • Vercel을 통한 서비스 배포 • GitHub 이슈 관리 및 PR 머지 흐름을 활용한 팀 협업 경

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

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

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 환경 구성