미리보기

매일 식단과 운동을 기록하며 맞춤형 체중 관리를 도와주는 애플리케이션 개발

깃허브 : https://github.com/uudeok/eat-fit
배포URL : https://eat-fit.net

• Frontend: Next.js, TypeScript, Tanstack Query, Zustand

• Backend: Supabase

• Deployment: AWS S3, CloudFront, Route53, Lambda, API Gateway, ACM

Next.js 서버리스 아키텍처 및 CI/CD 구축

• S3, CloudFront, Lambda 를 활용한 서버리스 아키텍처 구축

• CI/CD 자동화를 통한 배포 프로세스 효율화 및 배포 오류 감소와 운영 효율성 개선

• Next.js standalone 빌드 도입으로 배포 시간을 8분 -> 2분으로 단축

• AWS 배포 과정을 문서화

생산성 향상을 위한 테스트 도구 개발

• 비효율적인 테스트 및 디버깅 과정을 해결하기 위한 커스텀 테스트 도구 개발

• 그래프 시각화를 통해 테스트 단계를 직관적으로 표현하고 각 단계를 클릭만으로 빠르게 이동 가능

• 개발 모드에서 테스트와 탐색을 간소화하여 개발 생산성 향상에 기여

• 테스트 도구 제작기 관련 기록

Fetch API 커스텀 함수로 코드 중복 최소화

• Fetch API 사용 시 반복되는 URL 설정, 헤더, 에러 처리로 인한 코드 중복과 유지보수 부담 해결

• 클로저를 활용한 커스텀 Fetch 함수로 공통 설정을 사전 정의하고, 일관된 요청 처리가 가능하도록 구조화

• 에러 핸들링 및 공통 로직 중앙화로 중복 코드 약 40% 감소

• 관련 블로그 상세 기록

OpenAI 을 활용한 사용자 맞춤형 기능 개발

• OpenAI 을 활용한 사용자 맞춤형 체중 분석 및 피드백 시스템 개발

• 캐싱 전략 도입으로 동일한 데이터에 대한 중복 요청을 최소화, AI 호출 비용 약 78% 절감 효과

• 세부 구현 및 최적화 과정 블로그에 기록

브라우저 저장소 관리 통합 인터페이스 설계

• 로컬, 세션, 쿠키 저장소 관리의 복잡성 해결을 위한 통합 인터페이스 설계

• 팩토리 패턴을 활용하여 저장소 객체를 중앙 관리하고 커스텀 useCache 훅을 도입하여 데이터 호출 간소화

• 저장소 관리의 일관성 및 확장성 확보

• 구현 및 설계 과정을 블로그에 기록

실시간 에러 알림 시스템 구축

• Nodemailer 를 활용한 실시간 에러 알림 시스템 구축으로 서비스 안정성 향상

• 에러 로깅 시스템 도입 및 관련 경험 기록

카카오 맵 API 를 활용한 위치 기반 음식점 조회, 리뷰 작성 및 팔로워 기반 커뮤니티 사이트 개발

깃허브 : https://github.com/uudeok/omuk
배포URL : https://omuk-beta.vercel.app

• Frontend: Next.js, TypeScript, Tanstack Query, Zustand

• Backend: Supabase

• Deployment: Vercel

SEO 최적화

• 동적 메타데이터 적용으로 페이지별 openGraph 이미지 최적화

• 사이트맵 개선, robots.txt 적용으로 검색엔진 최적화 강화

• Lighthouse 분석을 활용한 LCP 성능 개선

• 구글 및 네이버 검색 결과 1페이지 상단에 노출 성과 달성

• SEO 최적화 작업을 블로그에 기록

성능 최적화를 위한 노력

• Next/Image 사용, Link 태그를 사용한 prefetch 로 페이지 로드 시간 단축

• Dynamic Import로 코드 스플리팅으로 초기 로딩 성능 개선

• 이미지 사이즈 최적화를 통한 이미지 업로드 속도 개선 (용량 15MB->1MB, 업로드 시간 3초->1초대 단축)

UI/UX 개선

• Tanstack-Query 활용한 Optimistic UI 적용으로 좋아요 및 북마크 기능에 즉각적인 사용자 피드백 제공

• 콘텐츠 로딩 시 Skeleton UI 도입으로 데이터 로딩 상태를 직관적으로 표현하여 사용자 경험 향상