2022. 8. 10. 20:40ㆍEvery moment/Daily
API란?
- 은행으로 치면 창구 직원, 음식점으로 치자면 점원같은 존재
- 이를 풀어 설명하자면, API는 손님(프로그램)이 주문할 수 있게 메뉴(명령 목록)를 정리하고, 주문(명령)을 받으면 요리사(응용프로그램)와 상호작용하여 요청된 메뉴(명령에 대한 값)를 전달
→ API는 프로그램들이 서로 상호작용하는 것을 도와주는 매개체
다음 우편번호 서비스 API 문서 살펴보기
https://postcode.map.daum.net/guide#info
Daum 우편번호 서비스
우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.
postcode.map.daum.net
개인적으로 여러가지 API를 직간접적으로 경험해보았는데, 가장 인상깊은건 다음에서 제공하는 우편번호 서비스이다. 다양한 쇼핑몰에서 보았을 때, UI가 깔끔하다고 느꼈고, 입력 하면서도 편하다고 느꼈기 때문이다. 그래서 API문서를 살펴보는 오늘 과제로 평소에 가장 마음에 들었던 기능을 바탕으로 분석해보고 싶었다.
[I] 기본 사용법
모든 유저는 다음이 제공하는 스크립트를 삽입하여, 우편번호 입력 기능을 제공받을 수 있다.
[II] 제공하는 구조
우선 '도도베이커리' 라는 웹페이지로 구현된 수제 베이커리 쇼핑몰을 가정하여 적어보겠다.
(0) 도도베이커리 소속 개발자가 주소 기입과 관련된 모든 페이지에 해당 소스를 삽입하여 다음 지도 API 연동해둔다.
(1) 고객이 도도베이커리 홈페이지 내에서 다음 지도 UI를 사용하여 특정 주소를 지정한다.
예: 고객이 배송지를 입력하는 상황 (예: 마이페이지, 배송지 목록 페이지, 결제 페이지 등)
(2) 다음 API에서 제공된 정보 구조는 key value 형태로 속성 페이지의 항목들과 함께 날아오게 된다.
예: 가령 개발자가 "data.zonecode" 라고 접근했을 경우, 13494 라는 값을 얻을 수 있다.
(3) 도도베이커리 개발자는 이러한 key value 데이터를 가공하여
예: 고객이 결제창에서 기입한 주소가 휘발되지 않고 도도베이커리 데이터베이스에 저장되도록 설정한다.
(4) 원하는 data를 처리하도록 개발한다.
예1: 고객이 마이페이지에서 기입한 주소가, 추후 고객이 결제페이지에 진입했을 때 자동으로 기입되도록 설정한다.
예2: 고객이 기입한 주소가 자체 배송기사 시스템에 연결되도록 연동시킨다.
'Every moment > Daily' 카테고리의 다른 글
[코드스테이츠 13기] 배달특급의 유저스토리 (0) | 2022.08.16 |
---|---|
[코드스테이츠 13기] ABLY의 유저 구매 플로우 차트 회고 & 보강 (0) | 2022.08.12 |
[코드스테이츠 13기] 네이티브 앱, 모바일 웹, 웹 앱, 하이브리드 앱의 특징과 장단점 (0) | 2022.08.09 |
[코드스테이츠 13기] 당근마켓 랜딩페이지 html/css/js 분석 (0) | 2022.08.08 |
[코드스테이츠 13기] 인스타그램 인플루언서를 태블로로 분석해보기 (0) | 2022.08.07 |