2025/01/07 2

[Next.js] 카카오맵 api 사용하기 - 2 (+ Geocoder)

병원 상세페이지에 주소를 좌표로 바꾸어 표시하기 위해 카카오맵을 사용하기로 했다.이전 글에 이어서 이번 게시글에서는 카카오맵을 Next.js 14 App Router 환경에서 방법을 정리해보려고 한다. 1. 패키지 설치하기React와 카카오맵을 같이 사용할 때 많이들 카카오가 아닌 개인이 만든 sdk를 추가 설치해 사용한다.npm install react-kakao-maps-sdkyarn add react-kakao-maps-sdk 또한 TS를 같이 사용하는 경우 같은 분이 정리한 'kakao.maps.d.ts'를 추가 설치하면 좋다. 그러면 전역에 `kakao` 객체를 알아서 추가해준다.npm install kakao.maps.d.ts --save-devyarn add kakao.maps.d.ts --..

Frontend/Projects 2025.01.07

[Next.js] 카카오맵 api 사용하기 - 1

병원 상세페이지에 주소를 좌표로 바꾸어 표시하기 위해 카카오맵을 사용하기로 했다.글이 길어질 것 같아서 두개로 나누어 작성했고, 이번 게시글에서는 카카오맵 api 키 받고 활성화하는 방법을 정리해보려고 한다.카카오맵 api 시작하기기본적으로 카카오맵 api 가이드에 잘 나와있긴 하다.1. 개발자 등록 및 앱 생성먼저 Kakao Developers에 회원가입해서 개발자 등록을 한다. 그 후 상단에 '내 애플리케이션'에 들어가 '애플리케이션 추가하기'를 클릭한다.클릭 후 적당한 정보를 입력하고 저장한다.등록한 애플리케이션에 들어가면 왼쪽 사이드바에서 '앱 키'를 누르면 발급된 키를 확인할 수 있다.'앱 키' 아래에 '플랫폼'에 들어가면 사이트 도메인을 추가할 수 있다.개발 환경에서 사용할 경우 'http:/..

Frontend/Projects 2025.01.07