본문 바로가기
📚배우기

[3주차] API실전 : 실시간 주소 검색툴 만들기

by 오자몽 2023. 2. 3.

📔 오늘의 공부 목록

API 소통 방식 2가지_GET / POST
개발자 도구 훑어보기
카카오 디벨로퍼를 사용한 주소 API 만들기

 

 

API로 서버와 소통하는 대표적으로 사용되는 2가지 방식

 

1. GET 요청 : 받아오는 요청

예시 : 구글 QR CODE API

 

2. POST 요청 : 보내는 요청

예시 : 카페 게시글 작성, 로그인 등

 

* 보통 요청을 할 때, URL과 JSON 형식으로 요청을 하지만, 결과값은 복합적이기 때문데 JSON형식으로 리다이렉트 된다.

* 로그인을 하는 과정은 POST 요청으로, 기록으로 남기기에 이상 접속 등을 판단할 수 있다.

 

개발자 도구 훑어보기

브라우저 창에서 항상 실수로 눌렀던 F12키로 개발자 도구 창을 열 수 있다.

1. 클릭하고 페이지에 커서를 갖다대면 요소의 설명[2]이 나온다.

 

3. NETWORK : 페이지에 접속 하고 난 이후 어떤 데이터를 받아오는지, 완성된 페이지를 보기 위해 어떠한 요청들이 발생하는지에 대한 나열[4]

 

5. Headers(머릿글)

부가 정보를 포함, 누가/언제/어디로/무엇을/어떻게의 정보 등을 담는다.

Header에 담겨있는 정보에 따라 받아오는 요청이 달라진다.

예시 : 헝가리에 가서 유튜브 재생 시 헝가리의 광고가 나옴

- Request Header(요청헤더)를 보면 어디서/어떤 브라우저를 사용하는지 등의 정보가 담겨있음

- cookie : 자동로그인 데이터, 그동안의 접속 정보 등이 담겨있음, 보안이 약한 홈페이지는 쿠키로 그 사람의 정보를 습득 가능

 

6. NETWORK 구성 요소

- Fetch/XHR : FETCH>>긁어옴, 주로 JSON 데이터의 값을 봄

- JS : 자바스크립트

- CSS : 디자인

- IMG : 이미지

- FONT : 폰트

- DOCS : 문서, 페이지 안에서 사용된 문서

 

* 보통 Fetch/XHR, DOCS 두 가지를 가장 먼저 살펴본다.

 

 

API 요청 시, 서버에 전달할 부가정보를 담는 "Request Header(요청헤더)"의 주요 목적

 

① Authorization : API Key(인증정보)

② Content-Type : 데이터 전송 방식

 

* 기업에서 제공하는 API 설명에 해당 정보를 제공한다.

 

 


 

카카오 디벨로퍼를 사용한 주소 API 만들기

 

카카오 디벨로퍼 가입 후 상단의 '내 애플리케이션-애플리케이션 추가하기'를 클릭함

정보를 입력 후 저장

그럼 내 앱에 대한 정보가 나오는데 앱 키를 메모장에 복붙한다.

* 앱 키는 공개하면 안됨, 일정 사용 건수(?) 이후에 요금이 부가된다고 함, 구글 QR API의 경우 무료로서 Authorization의 정보가 필요 없었지만, 카카오API는  Authorization에 개인의 API KEY를 넣어야 한다.

 

상단의 메뉴의 '문서'를 클릭하면 카카오API가 제공하는 여러 서비스가 보이는데,

이 중의 '로컬'-왼쪽 메뉴 'REST API' 클릭한다.

로컬 API의 기본 정보

GET 요청을 하는 API 이며 Authorization에 위에서 받은 내 API KEY를 넣으면 된다.

스크롤을 아래로 내려보면, 구글 QR API와 동일하게 파라미터(매개변수)가 나와있는데,

필수값인 query만을 사용할 것 이다.

 

 

API에 필요한 정보를 정리해보자면

 

1. 기본URL : dapi.kakao.com/v2/local/search/address.....(샘플을 보면 더 쉽다)

2. 파라미터 : query=주소

3. Request Header

Authorization: KakaoAK Rest_API KEY

 

 

이 카카오 주소 API를 브라우저가 아닌 엑셀을 통해 불러오도록 해볼 것이다.

 

 

우선 엑셀에서 '개발 도구'를 활성화 시키고 Visual Basic을 실행한다.

창이 새로 뜨면 삽입-모듈을 통해 모듈 창을 실행한다.

 

 

그리고 오빠두 엑셀에서 제공해준 모듈을 붙여넣기 하여 필요한 정보를 입력한다.

(모듈은 공개해도 될지 의문... 필요하신 분은 오빠두엑셀에서 참고하시길..!!)

 

>>>이 과정은 카카오맵에서 주소를 가져오는 함수를 만드는 과정이라고 이해했다.

 

 

이후 엑셀 창에 =GetKakaoAddress(주소입력셀)을 치면

 

 

주소입력셀에 대략적인 주소를 치면 이렇게 전체 주소 정보가 추출된다.

브라우저가 아닌 엑셀에서 직접 카카오가 제공하는 API에 요청하여 바로 출력되는 것이다.

 

 

 

3주 챌린지를 마치며🙇‍♀️

더보기

데이터 정리부터 QR 만들기까지 실제로 업무에 필요한 순간들이 생겨, 기억을 더듬어 실제로 업무에 적용하며 매우 뿌듯했다. 그동안은 이걸 해결하는 방법을 몰랐기에 필요한 순간이 있다고 생각하지 않았지만, 지금은 좀 더 효율적인 방법으로 업무에 적용하니 스스로 성장한 것 같아 뿌듯하다.

마지막 API 활용은 매우 어렵고 겨우겨우 따라하는게 전부지만, 또 다시 필요를 느끼게 되어 더욱 더 공부를 해봐야겠다.

 

* 노션 강의 매우 기대됨

**ppt 강의 또한 매우 기대됨!!!