⛺️ Camping In Life

공공데이터를 활용한 캠핑장 검색

주변 캠핑장과 캠핑장을 검색하여 캠핑장에 대한 정보를 알 수 있는 플랫폼

📑 관련 링크 모음

배포

Figma 레이아웃

프로젝트 관련 정보 계획 Notion

🌲 기능구현

1. GPS를 활용한 주변 캠핑장 검색
2. 주변 캠핑장 범위 조절
3. 캠핑장 검색
4. 디바운싱 - 검색어 관련 캠핑장 출력
5. mouseUp mouseDown 관련 검색어 처리
6. 상세 페이지 무한 슬라이더 구현
7. KakaoAPI로 상세 페이지 캠핑장 위치 출력

🚫 API Key 숨기기

문제점

• URL에 포함된 Service_Key가 사용자가 확인 할 수 있는 것은 해당 Key가 중요한 Key라면 악용될 가능성도 있기 때문에 숨겨야한다고 판단

메인페이지 - 문제상황

• API에 Service_Key가 존재한다.

메인페이지 - 해결책 (API Routing Response)

• Client의 GPS의 유무가 확인된 후 API를 호출해야하므로 SSR로는 불가능하다.

이때 API Key를 숨기는 것은 API Routing을 통해 진행한다. API Routing Response

---

상세페이지 - 문제상황

• API에 Service_Key가 존재한다.

• 받아온 HTML이 상세 캠핑장의 데이터가 존재하지 않은 상태로 가져온다.

상세페이지 - getServerSideProps

• url에 상세 캠핑장의 Id와 이름의 정보를 통해 필요한 API 데이터를 미리 요청하기가 가능하므로 SSR이 가능하다.

• 받아온 HTML이 상세 캠핑장의 데이터가 채워진 형태로 가져와서 Client에서 상세 캠핑장에 대한 API 정보 요청을 할 필요가 없다.

이때 API Key를 숨기는 것은 getServerSideProps를 이용해 서버에서 API를 미리 요청하므로 Client에서는 해당 API url에서의 API Key를 숨길 수 있다.