포트폴리오 — 캠핑가자

프로젝트 소개 (Project Overview)

'캠핑가자'는 한국관광공사의 GoCamping API를 기반으로 전국 캠핑장 정보를 한눈에 확인하고 탐색할 수 있는 웹 어플리케이션입니다. 사용자에게 빠른 반응 속도와 안정적인 데이터를 제공하는 것을 최우선 목표로 설계되었습니다.

공공데이터 API는 응답이 느리거나 일시적으로 중단될 수 있습니다. 이를 극복하기 위해 Server-side Caching 레이어를 도입하여, API 장애 상황에서도 사용자에게 끊김 없는 탐색 경험을 제공하고자 했습니다.

Client (React) Vite, Router, AuthContext

API Server (Node.js) Express, Axios, Cache

In-Memory Cache Camping Data (JSON)

Database MongoDB (User Info)

External API GoCamping, Weather API

React 19 Vite React Router Context API Tailwind CSS Fast Refresh와 모던한 상태 관리를 통한 경쾌한 UX 제공.

Node.js Express MongoDB (Mongoose) JWT Auth 인증 시스템 및 고성능 캐시 레이어 구축.

Kakao Maps SDK Kakao Share OpenWeather API Axios 외부 API와의 안정적인 통신 및 SDK 캡슐화.

Lodash Puppeteer GIF Encoder Prettier 코드 품질 유지 및 자동화된 문서화 도구 활용.

JWT 기반의 토큰 인증 시스템을 구축하였습니다. AuthContext를 통해 전역적으로 로그인 상태를 관리하며, 보호된 라우트(Protected Routes) 처리를 통해 사용자 데이터를 안전하게 보호합니다.

GoCamping API의 응답속도 저하 문제를 해결하기 위해, 서버 기동 시 약 3,000건의 데이터를 선로딩(Preload)하여 인메모리에 저장합니다. 이를 통해 클라이언트 요청 시 50ms 미만의 초고속 응답을 보장합니다.

지능형 검색: Lodash.debounce를 적용하여 사용자 입력 시 불필요한 API 호출을 방지하고 성능을 최적화했습니다.
무한 스크롤: Intersection Observer API를 활용하여 장치 자원을 효율적으로 사용하면서 끊김 없는 데이터 브라우징을 구현했습니다.
컴포넌트 기반 지도 제어: Kakao Maps SDK를 React 라이플사이클에 맞춰 캡슐화하여, 지도 중심 이동(panTo), 마커 클러스터링 기반의 주변 시설 검색을 구현했습니다.

모든 핵심 로직에 구체적인 한국어 주석을 작성하여, 협업 및 미래의 유지보수 효율을 극대화했습니다. Prettier 설정을 강제하여 일관된 코드 스타일을 유지하고 있습니다.

campingController.js: 데이터 가공 및 캐시 제어 메커니즘.
index.js: 캐시 선로딩 및 배치 스케줄링.

CampingList.jsx: 고성능 목록 필터링 및 무한 스크롤.
CampingDetail.jsx: 복합 SDK 연동 및 지도 제어 로직.

Local Cache 적용 전 2~3s → 적용 후 30ms 수준으로 대폭 단축.

외부 API 장애 발생 시에도 캐시 데이터를 통해 100% 가용성 유지.

모바일 환경을 고려하여 모든 버튼은 터치에 최적화된 크기로 설계되었습니다. 특히 상세 페이지의 지도 영역은 스크롤 시 방해되지 않도록 적절한 터치 영역(Sticky Interaction)을 분리하여 구현했습니다.