메인으로 돌아가기

포트폴리오

프론트엔드 개발자 노현수의 포트폴리오

React와 TypeScript로 개발한 개인 포트폴리오 웹사이트입니다. Supabase와 TanStack Query를 활용해 프로젝트 데이터를 효율적으로 관리하고, location state 기반 모달 라우팅을 구현했습니다. Motion을 활용한 애니메이션과 스크롤 기반 네비게이션으로 인터랙티브한 사용자 경험을 제공하며, ARIA 라벨과 Schema.org 구조화 데이터 적용을 통해 웹 접근성과 SEO를 최적화했습니다. 그 결과 Lighthouse에서 전 항목 85점 이상을 달성했습니다.

TypeScriptReactTailwind CSSMotionShadcn/uiTanstack QueryReact RouterReact Hook FormSupabaseBiomeGoogle Analytics
참여 인원
1명
기간
2024.12 ~ 진행 중
관련 링크
깃허브배포 사이트

상세 내용

  • 모달 라우팅 및 프로젝트 상세 페이지

    • React Router의 location state를 활용하여 모달과 전체 페이지 두 가지 방식으로 프로젝트 상세를 표시할 수 있는 라우팅 시스템을 구현
    • URL 직접 접근과 모달 팝업 모두 지원
    모달 라우팅 및 프로젝트 상세 페이지

  • Supabase 기반 프로젝트 데이터 관리

    • Supabase와 React Query를 활용하여 프로젝트 데이터의 조회, 캐싱, 에러 처리 개발
    • 코드 재배포 없이 Supabase 대시보드를 통해 실시간으로 프로젝트 정보를 추가하고 수정할 수 있도록 구현
    • snake_case에서 camelCase로의 자동 변환 유틸리티 함수 caseConverter.ts를 작성하여 적용
    Supabase 기반 프로젝트 데이터 관리

  • 성능 최적화 및 스켈레톤 UI

    • useProjectSkeletonLoading 훅을 통한 로딩 상태 관리와 최소 표시 시간 보장으로 사용자 경험을 개선
    • es-toolkit의 throttle을 사용한 스크롤 이벤트 최적화를 적용
    성능 최적화 및 스켈레톤 UI

  • 웹 접근성 및 SEO 최적화

    • ARIA 라벨, 시맨틱 HTML, 키보드 네비게이션 지원으로 웹 접근성을 확보
    • 구조화된 데이터(Schema.org)와 메타태그 최적화로 SEO 성능을 개선

  • 지속적으로 성능 최적화 진행 중

    • Google Lighthouse 성능 측정을 통해 Performance, Accessibility, SEO, Best Practices를 성능을 지속적으로 최적화 하고 있습니다. Performance의 경우 평균적으로 70점 이상을 유지하고 있습니다.
    • 이미지 최적화, 코드 스플리팅, ARIA 접근성 개선, 메타태그 최적화 등 종합적인 웹 표준 준수를 구현했습니다.
    • 데스크탑 기준 FCP 70% 단축(1.75초→0.5초), LCP 46% 개선(4.6초→2.5초)을 달성했으며, 지속적인 성능 최적화를 통해 사용자 경험을 개선해나가고 있습니다.
    Lighthouse 성능 측정 결과