AWS EC2(Ubuntu)에 Django와 Nginx, Gunicorn을 연동하여 백엔드를 구축하고, S3 정적 호스팅을 통해 Vue.js 프론트엔드를 배포하는 전체 과정을 정리했습니다. CORS 설정과 Vite 빌드 시 정적 에셋 경로 문제 해결 방법도 포함합니다.

금융 목표 달성을 돕는 '모아톤' 프로젝트의 최종 회고록입니다. Django Signals를 활용한 뱃지 시스템, GSAP 트랙 애니메이션 구현 등 기술적 성취와 협업 프로세스, 그리고 프론트엔드와 백엔드 역할에 대한 인사이트를 담았습니다.

단순한 게이지 바 대신 육상 경기장 트랙을 달리는 사용자 프로필 애니메이션을 구현했습니다. GSAP MotionPathPlugin과 SVG stroke-dashoffset을 활용한 기술적 구현 디테일과 비동기 데이터 로딩 시점 문제를 해결한 트러블슈팅 로그입니다.

모아톤 프로젝트의 최종 디자인을 적용하며 전역 CSS 변수를 설정하고, 마이페이지 레이아웃 깨짐, 페이지네이션 계산 오류, 무한 API 호출, 스크롤 위치 유지 등 다양한 프론트엔드 이슈를 해결한 과정을 정리했습니다.

서비스의 전역 권한 정책을 IsAuthenticatedOrReadOnly로 변경하여 보안을 강화하고, 비로그인 사용자가 상세 페이지나 기능에 접근할 때 발생하는 무한 로딩 및 UX 문제를 해결한 과정을 정리했습니다.

회원가입 후 온보딩과 프로필 수정 기능을 구현하면서 발생한 Pinia 상태 동기화 문제, 이미지 경로 처리, 그리고 Serializer 유효성 검증 충돌 문제를 해결한 트러블슈팅 로그입니다.

모아톤의 메인 및 랜딩 페이지를 구현하면서 발생한 Pinia 상태 동기화 문제, 로그아웃 시 401 에러, 데이터 오염 문제, 그리고 Vue 라이프사이클 관련 이슈들을 해결한 과정을 정리했습니다.

로그인 직후 메인 페이지로 이동했을 때 팔로우 목록이 로드되지 않고 401 Unauthorized 에러가 발생하는 문제를 해결한 기록입니다. 비동기 처리 시점(Race Condition)을 분석하고, async/await과 watch를 활용하여 데이터 동기화를 보장했습니다.

서버 API의 정렬 한계를 극복하기 위해 전체 데이터를 초기에 로딩하여 클라이언트 사이드에서 필터링과 정렬을 처리하도록 아키텍처를 변경했습니다. 또한 pinia-plugin-persistedstate를 활용해 데이터를 로컬 스토리지에 캐싱하여 불필요한 네트워크 요청을 줄였습니다.

저축의 지루함을 덜어줄 게이미피케이션 요소인 '뱃지 리워드 시스템'을 기획하고, 이를 구현하는 과정에서 발생한 데이터 누락 및 비동기 렌더링 문제를 해결한 트러블슈팅 로그입니다.