반응형 OpenAPI16 [OpenAPI] 네이버 지도 API(4) - 데이터베이스 연동 지난 포스팅에서는 다음과 같이 마커와 정보창을 손수 추가해줬다. https://kimcoder.tistory.com/351 저번 예제에서는 마커를 2개만 썼기 때문에 큰 문제는 없었다. 그러나 나중에 마커의 수가 매우 많아지면, 코드의 수도 매우 길어지고 그만큼 유지 보수도 매우 힘들어질 것이다. 즉, 우리는 DB에서 데이터를 가져오는 기능을 수행하는 php파일을 작성하고, javascript의 ajax를 이용해서 해당 php파일에 접근할 것이다. 1. DB 확인 (Mysql) Mysql에 home테이블을 생성하고, (이름, 위도, 경도) 데이터 쌍을 가지는 레코드를 2개 추가했다. (phpMyAdmin 사용법) https://kimcoder.tistory.com/9 서버 호스팅 구매없이 DB외부접근 허.. 2021. 8. 13. [OpenAPI] 네이버 지도 API(3) - 마커와 정보창 표시 지도 API에서는 아래 이미지와 같이 특정 좌표에 마커와 정보창을 표시하는 기능을 제공한다. 이번 예제에서는 필자와 필자의 애인의 집 주소에 마커를 찍고, 마커 위에 누구의 집인지 정보창으로 표시해볼 것이다. 먼저 전체 소스 코드를 보여주고 각각의 내용을 설명해보도록 하겠다. 1. 전체 소스 코드 2. 소스 코드 부분 설명 1) HTML 부분 ... javascript에서 네이버 지도에서 제공하는 클래스들을 이용하기 위해, 태그로 maps.js 파일을 불러왔다. 그리고 지도는 웹 페이지의 전체 화면에 표시되게 하였다. vh는 웹 페이지의 높이를 100분의 1단위로 쪼갠 것이다. 2) Map 생성 map = new naver.maps.Map('map', { center: new naver.maps.LatL.. 2021. 8. 11. [OpenAPI] 네이버 지도 API(2) - javascript 튜토리얼 1. API 문서 페이지 소개 아래 링크는 javascript로 지도를 표현하는 방법들에 대해 안내하는 문서이다. https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html NAVER Maps API v3 NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다. navermaps.github.io 해당 문서로 들어가서 Tutorials, Examples를 참고하며 학습하면 된다. 2. 기본 예제 1) 샘플 코드 [Tutorials -> 시작하기 -> Hello, World]에 있는 샘플 코드이다. 이 샘플 코드에서 필자가 밑줄친 부분에, 여러분이 생성한 애플리케이션의 .. 2021. 8. 10. [OpenAPI] 네이버 지도 API(1) - 내 애플리케이션 생성 Naver에서 제공하는 API들중 하나인 Maps API를 이용해보자. 이번 포스팅에서는 네이버 지도 서비스를 제공하기 위한 애플리케이션을 생성하고, 생성된 애플리케이션의 Client ID와 Client Secret을 확인하는 방법까지 다룰 것이다. 1. Naver Cloud Platform 접속 Naver Cloud Platform은 Naver API들을 제공하는 개발자 페이지다. 서비스를 이용하기 위해서 회원가입을 수행해주자. https://www.ncloud.com/ NAVER CLOUD PLATFORM cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certif.. 2021. 8. 10. [OAuth] Naver Login Github 소스 코드 - Naver Login with SpringBoot https://github.com/jooyeokkim/Naver-Login-with-SpringBoot GitHub - jooyeokkim/Naver-Login-with-SpringBoot Contribute to jooyeokkim/Naver-Login-with-SpringBoot development by creating an account on GitHub. github.com OAuth의 3번째 예제로 네이버 로그인 연동을 준비해보았다. 예제 소스 코드를 일일이 설명하기에는 연동 과정이 카카오 로그인과 매우 흡사하기 때문에, 소스 코드를 공유만 할 것이다. Kakao Login + SpringBoot 연동 https://.. 2021. 8. 9. [OAuth] Kakao Login(3) - 사용자 email 받기 / 로그 아웃 1. HomeController 나머지 부분 access_token을 이용하여 사용자의 정보를 받아오는 과정은 GetUserInfoService에서 처리했다. package com.example.demo.controller; import com.example.demo.service.GetUserInfoService; import com.example.demo.service.RestJsonService; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframewor.. 2021. 8. 8. [OAuth] Kakao Login(2) - Access Token 받기 ◎ 예제 프로젝트 정보 Editor : IntelliJ Web Framework : SpringBoot - Maven https://github.com/jooyeokkim/Kakao-Login-with-SpringBoot GitHub - jooyeokkim/Kakao-Login-with-SpringBoot Contribute to jooyeokkim/Kakao-Login-with-SpringBoot development by creating an account on GitHub. github.com 이제 Kakao Login API 문서를 참고하여, 사용자의 Access Token을 받아볼 것이다. https://developers.kakao.com/docs/latest/ko/kakaologin/rest.. 2021. 8. 8. [OAuth] Kakao Login(1) - 내 애플리케이션 설정 OAuth 2번째 예제이다. OAuth가 무엇인지 잘 모른다면, 아래 포스팅을 읽고 오는 것을 권한다. https://kimcoder.tistory.com/320 [OAuth] OAuth 2.0 소개 1. OAuth이 왜 필요한가? 자신이 운영하는 서비스에 소셜 로그인같은 다른 서비스를 연동시킨다고 생각해보자. 그리고 사용자가 여러분에게 ID, PW를 알려주면, 여러분이 사용자 대신에 SNS 로그인 kimcoder.tistory.com Access Token을 받아오는 과정은 Google Calendar 예제에서 자세히 설명했으며, 그 과정이 Kakao API도 매우 유사하기 때문에, 본 포스팅에서는 이전 포스팅에 비해 설명이 다소 적을 것임을 미리 밝힌다. 이러한 이유로 Google Calendar 예.. 2021. 8. 7. [OAuth] Google Calendar(4) - 내 서비스에 적용하기 들어가기 앞서... Google Calendar(1)~(3)에 걸쳐 우리는 성공적으로 access_token을 얻어왔다. 다시 말하지만, access_token은 인증된 사용자를 식별하는 토큰이다. 이제 이 access_token을 이용하여 구글 캘린더 정보를 프로젝트의 콘솔상에 출력해볼 것이다. 필자는 SpringBoot - Maven 프로젝트를 사용했으며, Google API의 데이터 반환 형식은 기본적으로 JSON이기 때문에 JSON 데이터 파싱을 위한 라이브러리들도 프로젝트 내에 설치했다. 설치할 라이브러리들과 JSON 데이터 파싱 방법은 아래 포스팅에서 설명해두었으니 읽고 오는것을 권장한다. https://kimcoder.tistory.com/333 [OpenAPI] 코로나 19 감염 현황(2).. 2021. 8. 4. 이전 1 2 다음
