TravelStory
프로젝트 소개
사용자들에게 여행지 정보를 제공하고 여행 경험을 공유, 기록할 수 있는 플랫폼입니다 .
사용자들이 자신의 여행 이야기를 작성하고 사진과 함께 공유할 수 있습니다 .
반응형 디자인으로 모바일에서도 편리하게 사용 가능합니다.
구현 목록
- 도시,나라 소개 페이지 제작
- 리뷰, 북마크, 일정 생성 등의 기능 구현
- 해당 도시의 여행지 페이지 제작
- 페이지 성능 최적화
기술적 의사결정 - Tanstack Query
데이터에 대한 자동 캐싱 및 리페칭 기능 및 비동기 작업의 효율적 관리제공하는 훅들의 강력한 성능으로 인한 SSR, 낙관적 업데이트 등에 대한 간편한 구현
트러블 슈팅 - 북마크 기능
원인
Optimistic Update를 적용하는 도중 입력받는 데이터 형식이 요구하는 형식과 맞지 않아 에러 발생.
해결
Tanstack Query에서 요구하는 데이터 형식의 임시 객체를 로직 내부에 선언 후 형식을 통일시켜 Optimistic Update를 적용.
Portfolio
프로젝트 소개
저의 기술과 경험, 프로젝트를 소개하는 리뉴얼 포트폴리오 웹사이트입니다 .
GSAP 기반 네온 애니메이션, FSD(Feature-Sliced Design) 아키텍처, 프로젝트·기술·트러블슈팅 등 다양한 정보 제공.
구현 목록
- GSAP을 활용한 네온사인 텍스트 및 메뉴 애니메이션 구현
- FSD 아키텍처 기반 폴더 구조 설계 및 UI/로직 분리
- 스냅 스크롤, 부드러운 섹션 이동, 반응형 웹 구현
- 서버 컴포넌트/클라이언트 컴포넌트 분리 및 타입 안전성 개선
기술적 의사결정 - GSAP
복잡하고 정교한 네온 애니메이션 및 텍스트 효과 구현에 최적React와의 연동 및 커스텀 훅 분리로 재사용성/유지보수성 향상
트러블 슈팅 - GSAP 네온 애니메이션 구현
원인
텍스트의 특정 글자만 번갈아가며 깜빡이는 네온 효과, 메뉴 오픈 시 네온 불빛 애니메이션 등 고난이도 애니메이션 구현에 어려움.
해결
GSAP 커스텀 훅 분리, useGSAP/react 활용, 글자별 ref 관리로 원하는 네온 flicker 효과 완성.
Js_Portfolio
프로젝트 소개
Next.js와 TypeScript로 개발된 개인 포트폴리오 사이트입니다 .
자기소개, 프로젝트, 경험, 기술스택, 문제해결 경험 등 다양한 정보를 한눈에 볼 수 있도록 구성했습니다.
구현 목록
- 자기소개, 기술스택, 프로젝트, 경험, 교육 등 다양한 섹션의 포트폴리오 메인 페이지 구현
- 프로젝트 상세/문제해결 경험 모달 구현
기술적 의사결정 - Next.js(App Router)
파일 기반 라우팅과 SSR/CSR 지원으로 SEO 및 초기 로딩 속도 최적화
PlayWithMe
프로젝트 소개
발로란트 듀오 매칭 서비스이며, 꾸준히 버전 업데이트를 진행중입니다.
구현 목록
- 1:1 듀오 매칭 서비스
- 1:1 채팅 서비스
- 유저 정보 관리
기술적 의사결정 - Next.js
서버 컴포넌트를 활용한 성능 최적화SSR/SSG를 활용한 SEO 최적화App router를 활용한 성능 최적화
트러블 슈팅 - Next.js 15버전 async Dynamic APIs
원인
Dynamic routing에서 params를 받을 때 await를 써야한다는 경고 문구 표시
해결
공식문서의 async Dynamic APIs를 참고하여 params를 Promise 타입으로 감싸서 사용해야 하는 점을 적용