오전 : 수업
오후 : 자습
주소 : 국가 것, 우체국, 카카오 주소 등등API 가 있음
오늘 : API , 카카오 주소 가져오기
카카오 주소 API
https://developers.kakao.com/docs/latest/ko/local/dev-guide
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
API란?
[ application programming interface ]
Interface: 무언가 실행하기위한 보조 장치 ex.마우스or키보드 , 특정 url, ..
- 운영체제와 응용프로그램 사이의 통신에 사용되는 언어나 메시지 형식
- 스마트폰 app 생기면서 발전
- 응답을 json으로 주는 것뿐 !
요청하기전 key 발급
Server ---req with Key ---> KAKAO ----res in json ---> Server
* 응답을 json 으로 받는게 국룰
API 실습
1. 기본 폴더,파일 생성 / 기본 코드 작성
터미널 명령 :
$npm init
$npm express nunjucks
server.js 코드 작성
const express=require('express');
const app = express();
const nunjucks = require('nunjucks');
nunjucks.configure('views',{
express:app,
})
app.set('view engine', 'html');
app.get('/', (req,res)=>{
res.render('index.html');
})
app.listen(3000,()=>{
console.log('server start port : 3000')
})views 폴더 생성 - 그 안에 index.html 파일 생성 & 코드 작성
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API</title>
</head>
<body>
HELLO API
</body>
</html>
2. https://developers.kakao.com/로그인 -> 지도/로컬 클릭 -> 맨아래 문서보기 -> 메뉴 '개발가이드 ->
API 할 때 가장 중요한 ↓↓↓ 카카오에게 우리가 요청하는 형식 -> 아래 보내면 응답주겠다.
get : start line
header 값 : Authorization
rest API 테스트 도구 click -> 카카오 설명/ 문서를 보고 API 를 혼자 사용할 줄 알아야 함.
3. script 레이아웃 잡기
API는 html, server 둘 다 요청 가능
우리는 html에서 요청할 것
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API</title>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',init);
function init(){
console.log('이벤트리쓰너 성공')
}
</script>
</head>
<body>
HELLO API
</body>
</html>
server on -> console 확인
4. 요청 url
주소창에 원래 한글이 안들어감 : 한글 표현위해 무언가가 encoding해야함. js 내장객체에서 있어서 괜춘.
https://dapi.kakao.com/v2/local/search/address.json?analyze_type=similar&page=1&size=10&query=
저 요청코드 예시에서
1. 주소 index.html 에 주석 처리
2. 아래 나온 Authorization : ~ header에 들어갈 내용 복사 -> 주석 처리
3. '내 어플리케이션' -> REST API 키 복사해서 주석 처리
QeuryString 의 뜻 : get 값으로 보낸다 = ulr /?~ 뒤에 붙여 보내겠다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API</title>
<script type="text/javascript">
/*
https://dapi.kakao.com/v2/local/search/address.json?analyze_type=similar&page=1&size=10&query=
headers = Authorization: KakaoAK {REST_API_KEY}
RES API = f219czxc72f1eb147e757978ac0e323f
*/
document.addEventListener('DOMContentLoaded',init);
function init(){
console.log('이벤트리쓰너 성공')
}
</script>
</head>
<body>
HELLO API
</body>
</html>
5. 코드 작성
fetch로 사용해볼게
첫번쨰 - url
두번째 = 옵션값
query 내용은 우리가 검색하고 싶은 내용 -일단 경일 아카데미 주소 넣기
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API</title>
<script type="text/javascript">
/*
https://dapi.kakao.com/v2/local/search/address.json?analyze_type=similar&page=1&size=10&query=
headers = Authorization: KakaoAK {REST_API_KEY}
RES API = f219cecc72f1eb147e757978ac0e323f
*/
document.addEventListener('DOMContentLoaded',init);
async function init(){
let options = {
method:'GET',
}
let result = await fetch (`https://dapi.kakao.com/v2/local/search/address.json?analyze_type=similar&page=1&size=10&query=강동구 올림픽로 651`, options)
console.log(result);
}
</script>
</head>
<body>
HELLO API
</body>
</html>server on -> console.log -> 401 Unauthorized 에러 (API key값 아직 안줘서)
304 / 401/ 404 세개 뜨는데 함께 뜬거 비동기래 -> 잘 모르겟 - 공부
여기까지 첫째 줄 보낸 것
firefox networks 가보면
host : 일치
format : json
주소rul : ㅇㅋ
Authorization 만 넣으면 됨
GET /v2/local/search/address.json?analyze_type=similar&page=1&size=10&query=%EA%B0%95%EB%8F%99%EA%B5%AC%20%EC%98%AC%EB%A6%BC%ED%94%BD%EB%A1%9C%20651 HTTP/1.1
Host: dapi.kakao.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0
Accept: */*
Accept-Language: ko-KR,ko;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate, br
Referer: http://localhost:3000/
Origin: http://localhost:3000
Connection: keep-alive
Cache-Control: max-age=0
API key 값 전달해주기 - 예제를 보면 header 쪽에
document.addEventListener('DOMContentLoaded',init);
async function init(){
let options = {
method:'GET',
headers:{
'Authorization':'KakaoAK feb147e757978ac0e323f' // 추가
}
}
let result = await fetch (`https://dapi.kakao.com/v2/local/search/address.json?analyze_type=similar&page=1&size=10&query=강동구 올림픽로 651`, options)
console.log(result);
}
server on -> console.log -> 상태값 200 ok 첵
요청 헤더 :
GET /v2/local/search/address.json?analyze_type=similar&page=1&size=10&query=%EA%B0%95%EB%8F%99%EA%B5%AC%20%EC%98%AC%EB%A6%BC%ED%94%BD%EB%A1%9C%20651 HTTP/1.1
Host: dapi.kakao.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:88.0) Gecko/20100101 Firefox/88.0
Accept: */*
Accept-Language: ko-KR,ko;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate, br
Referer: http://localhost:3000/
Authorization: KakaoAK f219cecc72f1eb147e757978ac0e323f //수기로 headers 추가
Origin: http://localhost:3000
Connection: keep-alive
Cache-Control: max-age=0카카오가 원했던 rul 내용과 같음
result :
이제 안에 있는 json data 가져오기
document.addEventListener('DOMContentLoaded',init);
async function init(){
let options = {
method:'GET',
headers:{
'Authorization':'KakaoAK f219cecc72f1eb147e757978ac0e323f'
}
}
let result = await fetch (`https://dapi.kakao.com/v2/local/search/address.json?analyze_type=similar&page=1&size=10&query=강동구 올림픽로 651`, options);
let json = await result.json(); //.text()는 우리가 또 내용parsing해야함 .json()이 편함
console.log(json);
}
json 내용
여기까지가 주소 API 가져오기 끝
다른 주소도 url 끝에 써서 console.log 검색해보기 ex.성내2동
우편번호도 같이 나오게
x,y 값 (좌표) 상세주소 보여주는 API가 또 따로 있음.
총 2개의 API를 써야함
kakao developers - local - 좌표로 주소 변환하기 (우편번호까지 가져올 수 있)
x, y 값 넣으면 아래처럼 나옴
road_address - 길주소
address - 동주소
전체 내용
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API</title>
<script type="text/javascript">
/*
https://dapi.kakao.com/v2/local/search/address.json?analyze_type=similar&page=1&size=10&query=
headers = Authorization: KakaoAK {REST_API_KEY}
RES API = f2f1eb147e757978ac0e323f
*/
document.addEventListener('DOMContentLoaded',init);
async function init(){
let options = {
method:'GET',
headers:{
'Authorization':'KakaoAK f219cecc72f1eb147e757978ac0e323f'
}
}
let result = await fetch (`https://dapi.kakao.com/v2/local/search/address.json?analyze_type=similar&page=1&size=10&query=성내2동`, options);
let json = await result.json(); //.text()는 우리가 또 내용parsing해야함 .json()이 편함
console.log(json);
}
</script>
</head>
<body>
HELLO API
</body>
</html>
변수 작성 기법
1. tableName : carmel case
2. table_name : snake case
3. TableName : pascal case
4. tablename 얜 뭘까
변수 쓸 때 통일성 있게
API를 가져오는 FLOW
이제 만들어 볼 것 : 주소입력textbox , 검색버튼 -> 결과 : 동, 길 두개 모두 나오게 / 비동기 형태로 / 원하는 주소 클릭하면 아래 inputbox에 내용 채워지도록
index.html 작성 (아까 쓴건 일단 주석처리)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API</title>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded',init);
function init(){
/*
let options = {
method:'GET',
headers:{
'Authorization':'KakaoAK f219cecc72f1eb147e757978ac0e323f'
}
}
let result = await fetch (`https://dapi.kakao.com/v2/local/search/address.json?analyze_type=similar&page=1&size=10&query=성내2동`, options);
let json = await result.json(); //.text()는 우리가 또 내용parsing해야함 .json()이 편함
console.log(json);
*/
const searchBtn=document.querySelector('#addressSearch');
searchBtn.addEventListener('click',getAddress);
}
function getAddress(){
const addressInput = document.querySelector('#addressInput')
console.log(addressInput.value)
}
</script>
</head>
<body>
<div>
<input type="text" id ="addressInput" name="addressInput" placeholer="주소를 입력해 주세요" >
<button id="addressSearch">주소 검색하기 </button>
</div>
<ul id="addressList">
<li></li>
</ul>
</body>
</html>
init 안에 const
DOMContentLoaded : 로드되면 init 함수 바로 시작 ~ script를 head쪽 위에 적어서 그럼
server on -> 아무거나쓰고 버튼 클릭 -> console check
이제 console에 나온 값을 url 끝에 보내면 됨
document.addEventListener('DOMContentLoaded', init);
function init() {
const searchBtn = document.querySelector('#addressSearch');
searchBtn.addEventListener('click', getAddress);
}
async function getAddress() {
const addressInput = document.querySelector('#addressInput')
console.log(addressInput.value)
let options = {
method: 'GET',
headers: {
'Authorization': 'KakaoAK f219cecc72f1eb147e757978ac0e323f'
}
}
let result = await fetch(`https://dapi.kakao.com/v2/local/search/address.json?analyze_type=similar&page=1&size=10&query=`+addressInput.value, options);
let json = await result.json(); //.text()는 우리가 또 내용parsing해야함 .json()이 편함
console.log(json);
}
주의점 : query=끝나고 바로 +addressInput.value 붙여쓰기 / 띄어쓰기 없이
documents 안에 배열로 있음 forEach, for 문으로 각각 address_name 찍기
json.documents.forEach(v=>{
console.log(v.address_name)
})
내용 - li tag에 한줄 한줄 넣어주기
document.addEventListener('DOMContentLoaded', init);
function init() {
const searchBtn = document.querySelector('#addressSearch');
searchBtn.addEventListener('click', getAddress);
}
async function getAddress() {
const addressInput = document.querySelector('#addressInput');
const addressList=document.querySelector('#addressList'); //추가
console.log(addressInput.value)
let options = {
method: 'GET',
headers: {
'Authorization': 'KakaoAK f219cecc72f1eb147e757978ac0e323f'
}
}
let result = await fetch(`https://dapi.kakao.com/v2/local/search/address.json?analyze_type=similar&page=1&size=10&query=`+addressInput.value, options);
let json = await result.json(); //.text()는 우리가 또 내용parsing해야함 .json()이 편함
json.documents.forEach(v=>{ //array
console.log(v.address_name);
const li = document.createElement('li');
li.innerHTML=v.address_name;
addressList.appendChild(li);
})
}console 쳌
x,y 추가
date.set 변수 명만 객체 형태로 선언하면 사용가능
각각 li 요소에 x,y값 넣기
json.documents.forEach(v=>{ //array
console.log(v.address_name);
const li = document.createElement('li');
li.innerHTML=v.address_name;
li.dataset.x=v.x;
li.dataset.y=v.y;
addressList.appendChild(li);
})html elements ul tag 봐봐
dataset - 값을 꺼내오기 쉽게 만들기
친절한 html 이 하나 만들어줌
element 안에 값을 저장할 수 있다. (값이그대로 나오기때문에 비번, 주민등록번호 등은 지양)
해당 요소 클릭했을 때 그 내용을 input에 넣기
html 화면부터 그려보기 // 우편번호 받기, 우편 주소, 상세주소
index.html
<body>
<div>
<input type="text" id="addressInput" name="addressInput" placeholder="주소를 입력해 주세요">
<button id="addressSearch">주소 검색하기 </button>
</div>
<ul id="addressList">
</ul>
<input type="text" name="addressNumber" id="addressNumber" size="10" placeholder="우편번호">
<input type="text" name="address1" id="address1" size="40" placeholder="주소">
<input type="text" name="address2" id="address2" placeholder="상세주소">
</body>
li 주소 나온걸 클릭하면 이벤트 나오도록 만들기
json.documents.forEach(v=>{ //array
console.log(v.address_name);
const li = document.createElement('li');
li.innerHTML=v.address_name;
li.dataset.x=v.x;
li.dataset.y=v.y;
li.addEventListener('click',getAddressdetail);
addressList.appendChild(li);
})
}
async function getAddressdetail(){
console.log(this)
}
console check
li HTML 클릭하면 아래처럼 나옴
datase.x , y check
async function getAddressdetail(){
console.log(this)
console.log(this.dataset.x, this.dataset.y)
}
이렇게 접근한 x,y를 변수에 넣기
kakao developers - 주소 변환 문서
요기서 가져온 url 그대로 붙여넣기, 변수에 담기
index.html
async function getAddressdetail(){
let x = this.dataset.x;
let y = this.dataset.y;
let url = `https://dapi.kakao.com/v2/local/geo/coord2address.json?input_coord=WGS84&x=${x}&y=${y}`;
let options = {
method: 'GET',
headers: {
'Authorization': 'KakaoAK f219cecc72f1eb147e757978ac0e323f'
}
}
let result= await fetch(url,options);
console.log(result)
}
server on -> 주소 입력 -> 주소 하나 클릭 -> console.log check
result 값을 .json()
async function getAddressdetail(){
let x = this.dataset.x;
let y = this.dataset.y;
let url = `https://dapi.kakao.com/v2/local/geo/coord2address.json?input_coord=WGS84&x=${x}&y=${y}`;
let options = {
method: 'GET',
headers: {
'Authorization': 'KakaoAK f219cecc72f1eb147e757978ac0e323f'
}
}
let result= await fetch(url,options);
let json = await result.json();
console.log(json)
}
배열 0 번째 키만 있음
address/ road_address
fetch - promise 반환 //요청에 대한 결과값만
result.json() //응답의 body영역을 읽기 위해
body영역 type = application/json으로 오기 때문에
상태코드에 대한. 상태 body 내용을 읽을 때 text를 쓰면 되었는데 우리 결과값을 읽을 때 json 형태로 바로 쓰려면 .json 매서드를 사용하게되면 promise 객체로 json 으로 반환해줌
API는 결과 항상 json이다.
응답 헤더 내용 : 항상 요거
contentType : application/json
json으로 줬구나. 읽을 때도 json으로 받으면 편하게 사용할 수 있다. (.text()는 내용이 json이 아니었기때문)
이걸 구분하는 방법은 contetn-type을 봐 !
배열 0번째에 접근
road_address에 접근
address_name, building_name, zone_no
필요
여기에 하나하나 접근 해보기
index.html
async function getAddressdetail(){
let x = this.dataset.x;
let y = this.dataset.y;
let url = `https://dapi.kakao.com/v2/local/geo/coord2address.json?input_coord=WGS84&x=${x}&y=${y}`;
let options = {
method: 'GET',
headers: {
'Authorization': 'KakaoAK f21eb147e757978ac0e323f'
}
}
let result= await fetch(url,options);
let json = await result.json();
console.log(json)
let address_name = json.documents[0].road_address.address_name;
let building_name=json.documents[0].road_address.building_name;
let zone_no = json.documents[0].road_address.zone_no;
document.querySelector('#addressNumber').value=zone_no;
document.querySelector('#address1').value=`${address_name} ${building_name}`;
}server on ->list 중 하나 누르면 input textbox에 뜸
여기까지 오류 : 동 주소로 list 뜬거를 클릭하면 road_name이 없어서 오류가 뜸 / 주소 검색할 떄마다 li 가 생겨서 reset이 필요함 => building name 때문인듯..
li 내용 지우기
addressList.innerHtml='';
json.documents.forEach(v=>{ //array요렇게 붙여주기
내용 아무것도 없을 때 버튼 누르면 에러 처리
addressList.innerHtml='';
if(json.document.length == 0){
addressList.innerHTML = '<li>결과값이 존재하지 않습니다.</li>'
return false; // 아래 코드가 처리되지 않게
}
맨처음 입력 할 떄 오류 고치기
async function getAddress() {
const addressInput = document.querySelector('#addressInput');
const addressList=document.querySelector('#addressList'); //추가
console.log(addressInput.value)
if(addressInput.value.length==0){
alert('주소를 입력해주세요');
addressInput.focus();
return false;
}
road_address 안나오는거 오류 고치기 -
if(json.documents[0].road_address == null){
let address_name = json.documents[0].address.address_name;
document.querySelector('#address1').value = `${address_name}`;
} else {
let address_name = json.documents[0].road_address.address_name;
let building_name = json.documents[0].road_address.building_name;
let zone_no = json.documents[0].road_address.zone_no;
document.querySelector('#addressNumber').value = zone_no;
document.querySelector('#address1').value = `${address_name} ${building_name}`;
}
전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>API</title>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', init);
function init() {
const searchBtn = document.querySelector('#addressSearch');
searchBtn.addEventListener('click', getAddress);
}
async function getAddress() {
const addressInput = document.querySelector('#addressInput');
const addressList=document.querySelector('#addressList'); //추가
console.log(addressInput.value)
if(addressInput.value.length==0){
alert('주소를 입력해주세요');
addressInput.focus();
return false;
}
let options = {
method: 'GET',
headers: {
'Authorization': 'KakaoAK f211eb147e757978ac0e323f'
}
}
let result = await fetch(`https://dapi.kakao.com/v2/local/search/address.json?analyze_type=similar&page=1&size=10&query=`+addressInput.value, options);
let json = await result.json(); //.text()는 우리가 또 내용parsing해야함 .json()이 편함
console.log(result)
console.log(json)
addressList.innerHTML='';
if(json.documents.length == 0){
addressList.innerHTML = '<li>결과값이 존재하지 않습니다.</li>';
return false; // 아래 코드가 처리되지 않게
}
json.documents.forEach(v=>{ //array
console.log(v.address_name);
const li = document.createElement('li');
li.innerHTML=v.address_name;
li.dataset.x=v.x;
li.dataset.y=v.y;
li.addEventListener('click',getAddressdetail);
addressList.appendChild(li);
})
}
async function getAddressdetail(){
let x = this.dataset.x;
let y = this.dataset.y;
let url = `https://dapi.kakao.com/v2/local/geo/coord2address.json?input_coord=WGS84&x=${x}&y=${y}`;
let options = {
method: 'GET',
headers: {
'Authorization': 'KakaoAK f219cecc72f1eb147e757978ac0e323f'
}
}
let result= await fetch(url,options);
let json = await result.json();
console.log(result);
console.log(json)
if(json.documents[0].road_address==null){
let address_name=json.documents[0].address.address_name;
document.querySelector('#address1').value=`${address_name}`;
}else{
let address_name = json.documents[0].road_address.address_name;
let building_name=json.documents[0].road_address.building_name;
let zone_no = json.documents[0].road_address.zone_no;
document.querySelector('#addressNumber').value=zone_no;
document.querySelector('#address1').value=`${address_name} ${building_name}`;
}
}
</script>
</head>
<body>
<div>
<input type="text" id="addressInput" name="addressInput" placeholder="주소를 입력해 주세요">
<button id="addressSearch">주소 검색하기 </button>
</div>
<ul id="addressList">
</ul>
<input type="text" name="addressNumber" id="addressNumber" size="10" placeholder="우편번호">
<input type="text" name="address1" id="address1" size="40" placeholder="주소">
<input type="text" name="address2" id="address2" placeholder="상세주소">
</body>
</html>
'블록체인 기반 핀테크 및 응용 SW개발자 양성과정 일기' 카테고리의 다른 글
| [52일차]20210527 JWT token 토큰 만들어 브라우저 cookie에 저장하기 (0) | 2021.05.27 |
|---|---|
| [51일차 복습] 카카오 API / 주소, 우편번호 요청 및 가져오기 (0) | 2021.05.26 |
| [50일차 복습] HTTP protocol 구조 개요와 예제 (1) | 2021.05.26 |
| [50일차] 20210525 HTTP post, get 공부 (0) | 2021.05.26 |
| [49일차 복습] JavaScript & Oauth 기능으로 kakao login 연결하기 (0) | 2021.05.25 |
