brunch

You can make anything
by writing

C.S.Lewis

by choikyunghee May 24. 2019

[MD역량강화 6] 비개발자들을 위한 API활용

문송들도 개발차처럼 API써보자~

마켓디자이너스 크루들의 역량 강화를 위한 여섯 번째 시간! 비개발자들을 위한 API 활용 교육이 지난 4월 30일 위워크 삼성역 2호점에서 열렸습니다.


이번 강좌는 튜터링에서 CTO를 맡고 계신 Ken님이 진행해 주셨습니다. 켄님은 복잡한 개발툴 없이 구글 크롬과 스프레드시트만 가지고 원하는 대로 데이터를 수집 및 활용할 수 있는 방법을 알려주셨는데요, 마켓디자이너스 크루들에게 실질적으로 도움이 됐으면 하는 마음에서 이 강의를 준비하셨다고 합니다.


강의 시작에 앞서 켄님은 튜터링에 등록된 모든 튜터들의 정보를 1분 만에 엑셀로 옮겨오는 엄청난 능력을 보여주셨는데요. 이걸 API만 이용하면 누구나 손쉽게 할 수 있다는 사실!! 그럼 본격적인 강의 내용을 통해 API를 이용하여 데이터를 수집하고 활용하는 방법에 대해 함께 알아볼까요?


Chapter 1. API란?

API(Application Programming Interface)

이종 시스템 간에 응용 프로그래밍이 가능하도록 정의된 명세를 말합니다. 이전에는 Win32, OpenGL, DirectX처럼 전문적인 프로그래밍에서 사용했지만, 최근에는 HTTP를 만나 인터넷에서 브라우저만 가지고 있으면 API를 사용할 수 있게 되었습니다.

현재는 웹 애플리케이션 개발에서 API를 사용하는데요, 특정 정보를 제공할 목적으로 웹 서비스 형태로 제공합니다. 여기서 요청하는 내용은 정보(Data)가 될 수도 있고, 행위(Action)가 될 수도 있습니다.


데이터 vs. 정보

- 데이터: 날것 그대로의 식재료

ex) 고객 구매 / 환불 내역

- 정보: 의도에 의해 조리된 요리

 ex) 4월 무빙패키지 재구매자 환불율

즉, 정보는 데이터보다 추상화된 개념이라고 할 수 있습니다. 그렇지만, 일반적으로 구분해서 쓰진 않고 보통 ‘(정보화된)데이터’라고 부릅니다.


서비스 / 앱

정보화된 데이터를 고객에게 제공을 할 때, 그냥 제공하지 않겠죠? 레스토랑에서 음식을 제공할 때도 플레이팅을 하고 음식을 서빙을 해주는 사람이 있는 것처럼, 데이터를 제공할 때도 UI나 UX로 보기 좋게 만들어서 서비스한답니다.


“API를 활용하는 것은 보물찾기가 될 수도 있고 자원 재활용이 될 수도 있습니다.”


Chapter 2. 네트워크 기초 다지기

네트워크: 물리적으로 떨어져 있는 Peer 간의 연결 기술  

    Server-based: 중앙에 서버가 있어 Peer 간 연결  

    P2P-network: Peer와 Peer끼리 그물망식으로 연결  


패킷교환방식: ‘패킷’이란 데이터를 잘게 쪼개서 빨리 도착하도록 풀어주는 것을 의미합니다. 송신지점에서 데이터를 분리해서 보내면 수신지점에서 재조립이 이루어지는데, 이것이 TCP / IP의 기본 원리입니다. 복잡한 네트워크망에서 병목지점 없이 데이터를 효과적으로 전달할 수 있게 해준 것이죠.


프로토콜: 통신 상호간에 약속된 송수신 규칙을 의미합니다. 전화를 할 때 ‘여보세요’ 하고 자연스럽게 말하는 것처럼 암구호, 모스부호, 바코드, QR코드가 모두 프로토콜에 해당합니다.


Client / Server: 네트워크 상에서 두 Peer 사이에서 한 사람은 클라이언트, 한 사람은 서버가 됩니다.

클라이언트: 서비스를 요청하는 Peer

ex) API 클라이언트 = HTTP 클라이언트 (브라우저, 포스트맨 등)

서버: 클라이언트로부터 받은 요청을 처리 및 응답하는 Peer

ex) API 서버 = 웹서버 (Web Application Server)


인터넷 브라우저의 역할

1. HTTP 클라이언트: HTML 수신, API 데이터 수신, 기타 리소스 파일 수신

2. HTML/CSS 해석

3. Javascript 해석

4. UI 렌더링 엔진

=> 인터넷 브라우저는 이러한 작업을 통해 HTML 정보를 화면에 프린팅하여 우리가 볼 수 있도록 해준답니다.


URL이란?

https://api.tutoring.co.kr:8080/eng/tutor/profile?email=ken%40tutoring.co.kr&t_type=native

여기 API URL을 가져왔습니다. 이 URL이 어떻게 구성되어 있는지 볼까요?


1. 프로토콜: HTTP 프로토콜은 인터넷상에서 HTML 문서를 주고 받기 위해 쓰이며 서버-클라이언트 사이에 요청과 응답으로 통신. HTML 이외에 다양한 데이터를 요청/응답받을 수 있다. HTTP가 누구나 열람 가능한 일반 우편 같은 것이라면, HTTPS는 권한이 있는 사람만 열람 가능하고 내용을 변조할 수 없는 등기나 내용증명 같은 것. 현재는 해킹의 우려 때문에 대부분 HTTPS만 사용합니다.


2. 포트: 고유 서비스별로 할당된 숫자, 일반적으로 URL에서 포트를 생략하게 되면 프로토콜마다 표준 포트가 지정되어 있기 때문에 자동으로 매핑이 됨.

포트를 모르면 서비스를 받을 수 없기 때문에 포트는 반드시 알아야 합니다. 하지만 프로토콜을 입력하면 브라우저가 자동으로 그것에 해당하는 포트를 매핑해주기 때문에 프로토콜을 알면 포트를 자동으로 알 수 있답니다.


3. 호스트

- 도메인: 접속해야 하는 대상, 건물 주소의 개념 (tutoring.co.kr)

- IP: 도메인과 일대일로 매핑이 되는 물리적인 주소, 건물 위도/경도 좌표의 개념


4. path: 층/호실, 접속 경로, 카테고리와 같은 개념

filename: 사람 이름, 이것을 통해 많은 것을 식별해 낼 수 있고, 명령을 보내기도 함


5. Querystring: ★★API의 입력 부분, 가장 중요★★

key = value 의 형태

ex) 나이 = 40

구분자: &

ex) key1=value1&key2=value2&...

URL 해석을 할 때 스페이스와 특수문자를 허용하지 않기 때문에 스페이스, 특수문자 사용시 URL 인코딩, 디코딩이 필요합니다.


Rest API(Representational State Transfer API): HTTP 프로토콜의 Method(POST, GET, PUT, DELETE)를 활용하여 웹서비스에 CRUD(Create, Read, Update, Delete) 서비스를 요청


HTTP METHOD

1. POST: 해당 URI를 요청하면 리소스를 생성 (Create)

2. GET: 해당 리소스를 조회, 해당 도큐먼트에 대한 자세한 정보를 가져옴 (Read)

3. PUT: 해당 리소스를 수정 (Update)

4. DELETE: 리소스를 삭제 (Delete)


JSON(JavaScript Object Notation): 이종 시스템 간 데이터를 효과적으로 전달하기 위해 고안된 데이터 표기법, 유연하고 빠르며 모든 구조의 데이터 표현이 가능해 복잡하고 재귀적인 구조의 데이터 표현이 불가한 CSV와 장황하고 복잡하며 무겁고 느린 XML을 모두 보완함. 아직 산업계 표준은 XML이지만 open API 활용에 있어 XML이 너무 무거워 JSON 형태가 최근에 가장 많이 사용됨.


JSON포맷: 하나의 object 또는 array로 이루어져 있음

array = [object, object, …] 형식

object = {attribute, attribute, …] 형식

attribute = key : value

key = 문자열

value = 수, 문자열, object, array (nested 구조가 가능)

ex) ‘가족’이라는 object 안에 ‘가족 구성원’과 함께 ‘사람’이 들어갈 수 있음, 이런 관계화 된 데이터를 표현하기 위해 nested 구조의 포맷이 필요



Chapter 3. Postman 맛보기

이론 수업은 여기까지 끝이 났고요. 이제 Postman이라는 프로그램을 활용해 볼 시간이 왔습니다. 그 전에 잊지 말아야 할 것 두 가지!

1. key=value 형태로 전송하기

2. 한 번에 한 개씩 전송 가능

다들 기억하셨죠? 그렇다면 아래 표를 참고해서 Postman을 활용하면 된답니다~!



Tip 1. POST와 PUT은 무조건 Body에 내용을 써야한다!

: GET과 DELETE는 키가 되는 정보만 조작하고 POST와 PUT은 내용을 적어서 전달하는 경우가 많기 때문입니다.

Tip 2. Postman을 사용하는 이유?

: URL에 Querystring 보내는 것에 글자 수 제한이 있어 body 영역에 적어서 보내야 하는 경우 브라우저를 사용할 수 없었기 때문입니다.



Chapter 4. Open API를 구글 스프레드시트에 연동하기

공공데이터 포털에서 데이터 가져오기

1. http://data.go.kr 에 접속해 회원가입

2. 오픈 API 중 원하는 데이터를 선택해 활용 신청

3. 마이페이지 > 오픈API > 개발계정 리스트 > ‘미세먼지 경보 정보’ 이동

4. ‘일반 인증키 발급’ 클릭

5. 상세기능정보 > 실행 > 미리보기 클릭

6. XML 포맷의 데이터가 표시되면 URL 마지막에 “&_returnType=json”을 추가하여 새로고침 후 JSON 포맷으로 표시되는지 확인

7. 해당 URL을 구글 스프레드시트에 불러오기


ImportJSON 설치

1. https://raw.githubusercontent.com/bradjasper/ImportJSON/master/ImportJSON.gs 에 접속

2. 코드 전체를 복사하여 구글 스프레드시트 > 도구 > 스크립트 편집기에 기존 내용(myFunction)을 삭제하고 붙여넣기

3. 저장 후 프로젝트 이름 수정

* 이후 해당 스프레드시트에서만 ImportJSON 함수 사용 가능, 새로운 스프레드시트 생성할 때마다 위 작업 반복 필요


데이터 갱신 방법

1. URL 캐싱 회피: URL 뒤에 &’+timestamp+’ 코드 추가

2. 버튼 트리거: 도형 삽입 후 스크립트 할당창에 갱신함수 입력

- 수동으로 버튼을 클릭할 때마다 갱신

3. 오픈 시 트리거: onOpen 함수 추가 후 refresh함수 실행코드 작성

- 브라우저를 껐다가 다시 켜야만 작동

4. 타이머 트리거: 스크립트 편집기에서 타이머 트리거 추가

- 설정한 시간 간격마다 자동으로 갱신


다들 여기까지 잘 따라오셨나요? 이상으로 API 활용에 대한 정리를 마치도록 하겠습니다. 마켓디자이너스에서 진행하고 있는 [MD 역량강화 프로젝트]는 여기서 끝이 아니니 앞으로도 지켜봐주세요!!!


혜자스러운 CTO님께서 강의 배포본도 주셨습니당.


작성 - 인턴 Hazel


매거진의 이전글 마켓디자이너스의 경영지원팀 위크숍을 해보았다.
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari