✔️ 들어가기 전
지도에 관련된 api 중 api 인증키가 없어도 무료로 사용할 수 있는 것을 알았습니다. 이번 시간에는 지도 api를 사용해 지도 앱을 만들었고 조금이라도 기억에 남기기 위해 이번 글을 작성합니다.
사용 기술
- vite (프로젝트 구성)
- React
- TypeScript
- Tailwind Css
api
- Nominatim
Nominatim은 오픈스트리트맵(OpenStreetMap) 프로젝트의 일환으로 개발된 지오코딩 서비스입니다.
지오코딩
텍스트 기반의 주소나 장소 정보를 지리적 좌표로 변환하거나 그 반대로 수행하는 프로세스를 의미
Nominatim은 이러한 지오코딩 서비스를 제공하여 사용자가 주소나 장소 이름을 검색하여 해당 위치의 지리적 좌표를 얻을 수 있게 해줍니다.
Nominatim은 무료로 사용할 수 있는 오픈소스 지오코딩 서비스로 사용자가 입력한 주소나 장소 이름을 Nominatim에 전달하여 해당 위치의 좌표를 얻은 뒤, 이를 지도에 표시하거나 다른 지리 정보와 연계하여 활용할 수 있습니다.
library
- Leaflet
Leaflet은 2010년에 제작된 오픈소스 JavaScript library로, 웹 상에서 대화식 지도를 만들고 다양한 지리 정보를 시각화합니다.
약 48KB의 가벼운 무게와 사용하기 쉽다는 것이 커다란 장점이며, 만들어진지 오래된 library인 만큼 다수의 기능과 커뮤니티가 존재합니다.
자신이 만들고자 하는 앱에 제작할 지도가 3D 기능 및 최신 기능을 필요로 하지 않을 경우 Leaflet가 좋을 수 있습니다.
- React Leaflet
React에서 Leaflet library를 사용할 수 있게 해주는 래퍼 library입니다.
🔎 지도 앱 살펴보기
폴더 구조
/src
├ /api
│ └ search.ts
├ /components
│ └ LocationSearch.tsx
│ └ Map.tsx
├ /types
│ └ Map.ts
└ App.tsx
└ main.tsx기본 화면
초기 화면에서 서울이 오도록 설정
검색 화면
검색 후 지역이 나온 경우
검색 후 여러 개가 나온 경우
🔎 코드 살펴보기
Map.ts
Place: 앱 내부에서 검색에 사용할 객체
SearchResponse: 요청에 의해 온 응답 데이터 객체
search.ts
위의 사진과 같이 객체에 많은 정보가 담겨서 오지만 필요한 데이터만 반환하여 사용하였습니다.
Map.tsx
React Leaflet를 처음 사용했기 때문에 가장 오랜 시간이 들어간 코드입니다.
✏️ 마무리
React Leaflet의 경우 오래된 library라 그런지 생각보다 많은 기능들이 있었습니다. '가볍다'라는게 장점 중 하나인데 나중에 프로젝트를 진행하면서 지도 앱이 필요할 때, 3D 지도앱이나 최신 지도 기능을 필요로 하지 않는다면 사용을 고민할 거 같습니다.
🙏 글 작성에 도움받은 목록
