API4 React Naver Map api 활용하기 요즘 개인 프로젝트로 인해 다양한 지도 api를 사용하고 있는데 그 중에서 Naver 지도에 대해 설명해보고자 한다. 1. 모든 API를 사용하는 것이 그렇듯 API key를 발급 받는다. 발급 방법에 대해서는 아래 링크를 통해 확인할 수 있다. https://console.ncloud.com/dashboard 2. 발급 받은 key를 Public 파일 안에 있는 index.html에 head 부분에 아래 코드를 발급 받은 client id와 함께 넣어준다. 3. 아래 코드를 참고하여 map을 만들어보면 된다. 해당 지도는 기본 기능의 Web Dynamic Map 의 형태이며, 기능에 대해 주석을 달아놓았습니다. import { Container as MapDiv, NaverMap, useNavermap.. 2023. 10. 31. React Google Map으로 지역간 거리 및 이동 시간 계산하기 1. 구글 맵 API key 받아오기 모든 api가 거의 그러하듯 인증키를 받아와야한다. 아래 링크에 접속하여 API key를 발급받으면 된다. https://console.cloud.google.com/google/maps-apis/start?utm_source=Docs_GS_Button&ref=https:%2F%2Fdevelopers.google.com%2Fmaps%2F&hl=ko Google 클라우드 플랫폼 로그인 Google 클라우드 플랫폼으로 이동 accounts.google.com 2. React에 입력창 제작하기 저는 간단한 기능 테스트용이라 2지역간의 좌표를 받아오는 입력창을 제작하였습니다. 더보기 import React, { useState } from "react"; import axi.. 2023. 10. 27. [React] Open api clientId 값 알아내기 (공공 데이터 포털) 무장애 관광 api를 가져오던 중 api 값을 불러오기 위해 clientId 값이 필요하였는데 도저히 찾을 수가 없어 관광 데이터 관리자분께 문의를 드려보았다. 답변이 10분만에 와 놀랐고, 꼼꼼하게 보지 않는 나의 무지에 놀랐다.. 위에 사진과 같이 답이 왔는데 보통 맨위에 조회라는 데이터를 통해 쉽게 확인할 수 있고, Response body를 확인해보자! 2023. 10. 16. [React] 공공데이터 포털 Open API 사용하기 Axios로 Spring과 연동 연습을 한 후 새로운 api 사용 방법에 대해 공부해 보았다. 2023.07.18 - [코딩/React] - [React] 서버 연동을 위한 Axios 개념과 사용 방법&Tip [React] 서버 연동을 위한 Axios 개념과 사용 방법&Tip Axios란? Axios는 JavaScript에서 HTTP 요청을 보내는 데 가장 많이 사용되는 라이브러리이다. 주로 웹 애플리케이션과 API를 통신하는 데 사용되는데, Axios는 HTTP 요청을 보내고 해당 작업이 완료되면 Pro quddkflty.tistory.com 이번 글에서는 공공데이터 포털에 있는 국가 Open Api를 사용하는 방법을 적어보고자 한다. 1. 원하는 공공 API 검색 공공데이터 포털에 회원 가입을 한 후.. 2023. 10. 16. 이전 1 다음
