[개인프로젝트] 반려동물 동반 식당 정리 사이트 만들기 - 카카오맵 연동

오랜만에 작성하는 블로그 글인 것 같다.

오늘 번뜩 생각나는게 최근 거지맵이라는 것을 알게되어 사이트를 조금 구경해봤는데, 이 사이트를 보면서 반려동물과 함께 갈 수 있는 식당이나 카페를 정리해둔 사이트를 이렇게 편리하게 보면 얼마나 좋을까 싶은 생각이 들더라.

물론 네이버로도 검색을 하면 충분히 얻을 수 있는 정보이지 않느냐라고 하면 거지맵 역시 가성비 식당이라는 키워도로 찾을 수 있지 않나.

그리고 반려동물 동반 식당을 제대로 안나오는 경우도 있기에 매번 블로그 후기 등을 통해 사진을 확인하는 것이 제일 정확한 방법이었기에 항상 불편했던게 내가 개인 프로젝트로 만들어보면서 풀스택에 대한 맛보기를 할 겸, 장소 수집은 크롤링으로 하고 DB 관리 공부도 좀 할 겸 딱 혼자하기에 괜찮아 보이는데? 싶어서 바로 시작하기로 마음먹었다.

서론이 길지만 그래도 조금 더 적어보자면, 뭐라도 직접 하면서 겪어보는게 있어야 지식도 얻기가 수월하다고 겪어본 나로서는 이 프로젝트를 성공시켜서 무료로 배포하는 것을 목적으로 하고있다.

거지맵, 모두의 프린트 같이 공공의 이익을 위해 누구나 사용할 수 있도록 하는 그런 서비스를 제공해보고자 하는 마음으로 시작했는데 내가 이런걸 만들 능력은 확실히 없다.

왜냐? 배운적도 없고 개인적으로 공부한 적도 없어서 스스로의 힘으로 해내기에는 공부를 할 게 더 많아서 바이브 코딩을 이용해보고자 한다.

요즘은 바이브 코딩도 역량이고, 프롬프트를 활용하는 것도 요구되는 사회니까 딱 시대에 맞춤화된 발상 아닌가? 하며 오늘도 그렇게 자기 합리화를 하고있다. ㅋㅋㅋㅋ

여튼 이제 본론으로 들어가자면, 클로드 ai를 통해 워크 플로우를 정리하고 각 단계별로 어떻게 해야하는지를 정리를 했고, 무료 크레딧으로만 해보고 있는 중이라서 나머지는 gpt를 이용해서 코드를 받아 Next.js 설치, supabase 연동, 카카오맵 연동까지 현재 진행을 한 상태이다.

그 중 정말 오랜시간동안 안된게 있었는데 카카오 맵 연동이었다.

 

 

kakao developers - 카카오 맵 연동 방법

전체적으로 개편이 되어 플랫폼 이라는 카테고리도 없고, 카카오맵을 js키를 기준으로 연동하는데 이게 vscode로 맞게 입력을 넣어줬음에도 403이라는 에러가 뜨더라.

카카오에서 api를 사용하지 못하게 한다는거라는데 왜 그런건지 설정하라는 걸 모조리 했음에도 안되길래 한참을 헤매었다.

그러다 발견한 카카오맵 설정이 따로 있다는 사실!!

근데 보이다싶이 신청 불필요 라고 되어 있어서 또 허탕인가 싶었다.

혹시나 하고 신청 불필요에 마우스 커서를 올리니 링크가 걸려있는게 아닌가???!

눌러보니 창이 하나 뜨는데 거기에 하이퍼링크가 걸려있어서 눌렀더니..

이렇게 별도로 사용 설정을 눌러야하더라..ㅋㅋㅋㅋ

사용설정 없이 해서 api가 승인을 하지 못한 상태였고, 다른건 다 맞으니 왜 안되나 하고 지칠 수밖에!

여튼 결과적으로는 카카오맵을 사용 설정하자마자 임의로 설정한 창이 딱 뜨더라 ㅠㅠㅠㅠ

혹시 나처럼 몰라서 헤메인 사람들을 조금이라도 도움이 되길 바라며 오늘의 주절주절과 트러블슈팅 끝!