오늘 끝나면

API

  • API의 핵심 문제를 한 문장으로 설명한다
  • 오른쪽 실습에서 API이 어떻게 움직이는지 관찰한다
  • 다음 강의와 이어지는 한계를 말할 수 있다

실습 미션

프로그램끼리 대화하는 약속 — REST와 JSON 이 문장이 실제로 무슨 뜻인지 실습에서 한 번 손으로 확인한다.

성공 조건

  • 실습의 기본값을 먼저 관찰
  • 입력값이나 모드를 한 번 이상 바꿔 결과 비교
  • 왜 결과가 바뀌었는지 한 문장으로 설명

개발 · Day 18 / 프로그램끼리의 대화

프로그램끼리
말 거는 법

내 앱은 날씨도 지도도 모른다. 화면에 떠 있는 건 남의 프로그램한테 물어봐서 받아온 것이다. 그 약속된 창구가 API다.

P.01개발 · Day 18

API = 약속된 창구

은행 창구와 같다. 금고 안엔 못 들어가고, 대신 창구 직원한테 부탁한다.

"10만 원 출금이요"라고 말하면 직원이 알아서 해 준다. 금고가 어떻게 생겼는지는 몰라도 되고, 정해진 양식으로 부탁만 하면 된다.

프로그램끼리도 똑같다. 남의 프로그램 속은 직접 못 만지고, 그쪽이 열어둔 창구에 정해진 양식으로 요청한다. 그게 API, Application Programming Interface다.

날씨, 지도, 결제, 로그인을 전부 남의 창구에 부탁해서 가져온다. 바퀴를 다시 안 만들어도 된다.

앱 → 창구 → 다른 프로그램
속은 몰라도 된다, 창구만 통하면 된다내 앱날씨를 모른다요청API창구응답날씨 서버금고(데이터)은행 금고엔 못 들어간다, 창구 직원한테 부탁한다

남의 프로그램 속은 몰라도, 정해진 창구로 부탁하면 된다

P.02개발 · Day 18

REST, 주소와 동작으로 다룬다

창구가 수백 개면 외우기 힘들어서 규칙을 정한다. 그중 제일 흔한 게 REST다.

핵심은 둘이다. 다룰 대상은 URL 주소로 가리킨다(글 하나는 /posts/42). 무얼 할지 메서드로 정한다.

메서드는 네 개가 기본이다. GET은 읽기, POST는 만들기, PUT은 고치기, DELETE는 지우기다.

그래서 한 줄로 뜻이 통한다. GET /posts/42는 "42번 글 보여줘"다. 동사 하나에 주소 하나면 끝난다.

METHOD + URL
메서드(동사)와 URL(주소)로 한 줄에 통한다GET/posts/42= 42번 글 보여줘POST/posts= 새 글 만들어줘PUT/posts/42= 42번 글 고쳐줘DELETE/posts/42= 42번 글 지워줘

보기, 쓰기, 고치기, 지우기. 네 동사로 거의 다 된다

P.03개발 · Day 18

데이터는 JSON으로 오감

요청을 보내면 답이 온다. 그 답을 담는 공용 포장지가 거의 다 JSON이다.

JSON은 키 : 값을 묶은 글자 덩어리다. 사람도 읽을 수 있고 컴퓨터도 바로 알아먹는다. "temp": 19처럼 이름표를 붙여 적는다.

글자로 주고받는 건 언어가 달라도 통하기 때문이다. 파이썬이 보낸 걸 자바스크립트가 읽고, 자바가 만든 걸 스위프트가 읽는다. 같은 포장지로 대화한다.

그래서 흐름이 늘 똑같다. URL+메서드로 묻고 JSON으로 받는다. API의 90%는 이 한 줄로 설명된다.

키 : 값 묶음
JSON, 이름표(키) : 값{"city":"서울","temp":19,"unit":"C","sky":"맑음"}파이썬이 보내고 자바스크립트가 읽는다, 언어 달라도 통한다

사람도 읽을 수 있고 컴퓨터도 바로 알아먹는 공용 포장지

P.04개발 · Day 18

직접 호출해보기

오른쪽에서 직접 불러 본다. 창구를 고르고 버튼을 누르면 JSON이 온다.

날씨 가져오기는 GET, 관심 도시 등록은 POST다. 창구를 고르면 실제로 보낼 메서드 + URL이 만들어진다.

요청을 보내면 멀리 있는 서버까지 갔다 오느라 잠깐 걸린다. 그러고 나면 200 OK 상태와 함께 JSON 응답이 떨어진다.

같은 창구라도 보낸 값이 다르면 답이 달라진다. 우리가 쓰는 앱이 매 순간 하는 일이다. 끊임없이 묻고, JSON으로 받는다.

코드 보기
// 날씨 API에 GET 요청 보내고 JSON 받기
const res = await fetch(
  "https://api.weather.kr/weather?city=서울"
);
const data = await res.json();   // JSON → 객체로

console.log(data.temp);          // 19
console.log(data.sky);           // "맑음"
요청 버튼 → JSON 응답
API 실험실 · 창구에 요청 → JSON 응답
1. 부를 창구 고르기
도시의 현재 날씨 가져오기
2. 보낼 값 (도시)
3. 이 요청을 보냄
GEThttps://api.weather.kr/weather?city=서울
4. 돌아온 응답 (JSON)
위에서 [요청 보내기]를 눌러 본다.
P.05개발 · Day 18

우리가 매일 쓰는 API

API는 멀리 있는 얘기가 아니다. 오늘 켠 앱 거의 다 안에서 API가 돌고 있었다.

배달 앱이 가게를 지도에 찍는 건 지도 API, 날씨 위젯 숫자는 날씨 API다. "카카오로 로그인"은 로그인 API, 결제창은 결제 API다. 다 남의 창구를 빌려 쓴 것이다.

요즘은 AI도 API로 쓴다. 챗봇한테 질문 보내고 답을 JSON으로 받는다. 우리가 방금 한 것과 똑같은 흐름이다. 창구에 묻고, JSON으로 받는다.

Q. API 키는 뭔가많은 창구는 아무한테나 안 열어준다. 요청에 API 키라는 비밀 출입증을 같이 보내야 한다. "나 정식 사용자다"를 증명하는 표다. 누가 얼마나 썼는지 세고, 요금 매기고, 함부로 못 쓰게 막는 데 쓴다. 남에게 보이면 안 되는 비밀번호라서 코드에 함부로 적어두면 안 된다.
EVERYDAY APIs
오늘 켠 앱 안에서 돌던 API들지도 API배달 앱이 가게를 찍는다날씨 API위젯의 온도 숫자로그인 API카카오로 로그인결제 API주문 끝 결제창AI API챗봇한테 질문하고 답 받기

다 남의 잘 만든 창구를 빌려 쓴다. 바퀴를 다시 안 만든다

3줄 요약

  1. 1프로그램끼리 대화하는 약속 — REST와 JSON
  2. 2API은 코딩 기본 → 인터넷과 웹 → 프론트/백엔드 → 데이터 → 배포 흐름 안의 한 칸이다.
  3. 3개념을 외우는 것보다 입력을 바꾸면 무엇이 달라지는지 보는 것이 우선이다.

완료 전 점검

복습 카드

API

프로그램끼리 대화하는 약속 — REST와 JSON

입력

프로그램이 받아들이는 값이나 사용자 행동

규칙

입력을 처리하는 코드의 절차