1. 간단한 레이아웃, 그리고 네이버와 카카오 지도 API의 한계

🐈‍⬛ 깃허브 코드

https://github.com/Choi-JY1107/find-kagong-react 

https://github.com/Choi-JY1107/find-kagong-nest

---

3️⃣ 3일 차 : 간단한 화면 구성 (2025.01.28)

🅵🅴 FE : openlayers를 활용한 화면 설정, 좌표 인식

2025.01.27 ~ 2025.01.30은 2025년 구정 연휴이다.
그래서 개발 일정을 많이 이어가진 못 하고, 진짜 매우매우 기본적인 기능을 구현하는 데에 집중하였다.
 

(자형들과 헬스장을 갔다.)

 
 
참고로 나는 react를 한번도 써본 적이 없어서 TDD는 커녕 스스로 코드를 거의 못 짠다.
대신 네이버 부스트캠프 기간동안 진짜 많이 공부한 FSD 구조로 정리하여 코드를 짜기로 했다.
나는 디렉토리 틀만 잡고, GDD(GPT Driven Development)를 이용한 개발을 정말 많이 진행하기로 하였다.
 
 

(현재 프로젝트에 적용한 FSD 구조)

(이건 부스트캠프에서 공부했었던 나만의 FSD의 UI단 정의)

 
 
 
 
 
 

🗺️ OpenLayers 연동

사실 이미 정말 좋은 지도 API들이 있다.
대표적으로 카카오 지도, 네이버 지도, 구글 맵 등이 있다.
하지만 이러한 지도 api의 경우, 내가 잘못 사용하면 과금 위험도 있고, api 키 관리하기 귀찮아서 오픈 소스를 사용하기로 했다.
특히 내가 인턴 때 OpenLayers라는 지도 api를 활용한 경험이 있으므로, 이를 활용하기로 결심하였다.
 

(다른 지도들에 비하면 많이 난잡하긴 하다)

 
 
 
 
 
 
 
 

---

 

🄱🄴 BE : 네이버와 카카오의 한계

이번 프로젝트의 핵심인 장소 API를 활용하기 위해 네이버 지도 > 카카오 지도 > 구글 맵 순으로 리서치하였다.
결론부터 말하자면, 네이버와 카카오는 카페 영업 시간에 대한 정보를 따로 제공하지는 않는다.
너무 두괄식으로 말했는데, 실제로는 '이거 진짜에요?' 라고 생각하면서 계속 알아보는데만 2~3시간정도 걸렸다.
 
 

🟩 네이버

 
 
개인적으로 NCP가 정말 UI적으로 깔끔하고 AWS보다 러닝 커브가 훨씬 낮기 때문에 매우 좋아한다.
그래서 가장 먼저 찾아보았고, 금방 찾겠다는 생각이 들었다.
그런데....
 
 
 
 
 

 
 
위 사진은 Geocoding API에 대한 설명이다.
영업 시간은 커녕 실제 장소 정보에 대한 세부 내용이 없다.
그래서 다른 방법들도 많이 찾아보았지만 결국엔 네이버는 놓아주기로 했다.
 
 
 
 
 
 
 
 
 
 

🟨 카카오

네이버 API 문서는 개발자 친화적으로 정리가 잘 되어 있었다면, 카카오 API 문서는 사용자 친화적으로 정리가 되어 있다는 느낌을 많이 받았다.
 

(UX적으로는 카카오가 원탑인듯...)

 
 
하지만 막상 response 형식은 네이버와 전혀 다를 것이 없었다.
 

 
나는 결국 카카오도 놓아주고, 구글 API를 찾아보기로 결정했다.
그런데 만약 구글도 없다면 어쩔까...하는 고민이 정말 많이 들었다.
 
 
 
 
 
 
 
 

🟥🟨🟩🟦 구글

사실 네이버나 카카오는 "국내 위치 정보 및 경로 탐색"에 최적화되어 있다.
그래서 가게 정보와 관련된 API는 많이 없다고 생각이 들었다.
자포자기로 더 찾아보았는데, 구글에서는 Places API라는 것을 제공하고 있었다.
 

 
 
놀랍게도 영업 시간에 대한 정보가 있었다.
역시 갓 구글을 찬양하며 구글 API를 활용하기로 했다.
 

---

4️⃣ 4일 차 : 구글 API의 영업 시간 관련 API (2025.01.30)

🄱🄴 BE : 구글 API 연동

GPT에게 코드를 부탁하니 바로 구현이 되었다.
예전같았으면 GPT에 물어봐도 분명 예기치 못 한 에러가 발생해서 시간을 많이 끌었을 것이다.
그런데 이번에는 긴 코드를 한 번에, 실수 없이 짜준 것을 보고 굉장히 신기했다.
 

(GPT는 신이야)

 
 
이미 프론트엔드 코드에는 연동할 수 있도록 짜두었기 때문에 바로 실행을 하였다.
1. 프론트에서 "현재 위치 추출하기" 버튼을 클릭한다.
2. 구글 Places API 호출 후, 프론트에 잘 들어오는 지 확인한다.

(1. 우측 상단 버튼 클릭)

(2. 콘솔창에 정보가 들어온다.)

 
 
Places API의 결과값이 생각보다 일관적으로 반환되는 것 같진 않았다.
위경도를 기준으로 정렬해야할 것 같다.
그리고 정보가 없는 곳들도 많았는데, 이거는 내가 따로 정보 수정 요청을 할 지 고민이다.
 
다음 번에는 프론트에는 "마커 및 목록 출력"을, 백엔드에는 "영업 시간 데이터 정제"를 진행할 것 같다.
너무 재밌다.