15_Oct_2021 ๐Ÿฐ์—˜๋ฆฌ์Šค AI ํŠธ๋ž™ TIL: API & HTTP

์œ ํ™˜์ตยท2021๋…„ 10์›” 16์ผ
1

API๋ž€?

API๋Š” Application Programming Interface์˜ ์ค„์ž„๋ง๋กœ ๋‹ค์–‘ํ•œ ์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก, ์šด์˜์ฒด์ œ๋‚˜ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๊ฐ€ ์ œ๊ณตํ•˜๋Š” ๊ธฐ๋Šฅ์„ ์ œ์–ดํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“  ์ธํ„ฐํŽ˜์ด์Šค์ด๋‹ค.

์ฆ‰, ํ”„๋กœ๊ทธ๋žจ๊ณผ ํ”„๋กœ๊ทธ๋žจ์„ ์—ฐ๊ฒฐํ•ด ์ฃผ๋Š” ๋‹ค๋ฆฌ ์—ญํ• ์ด๋ผ๊ณ  ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋‹ค.

HTTP์˜ ์ดํ•ด

๋ชจ๋“  ์›น ๋ธŒ๋ผ์šฐ์ €์— ์žˆ๋Š” ์ •๋ณด์— ์ ‘๊ทผํ•  ๋•Œ์—๋Š” URL์„ ํ†ตํ•ด ์ ‘๊ทผํ•œ๋‹ค. ์ด๋ฅผ ๋’ค์ง‘์— ๋งํ•˜๋ฉด URL์„ ๋ชจ๋ฅธ๋‹ค๋ฉด ํ•ด๋‹น ์ •๋ณด์— ์ ‘๊ทผ ํ•  ์ˆ˜ ์—†๋‹ค.

์ด๊ฒƒ์ด ํ˜„์žฌ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” WWW(World Wide Web)์˜ ๊ธฐ๋ณธ์ ์ธ ํ‹€์ด๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, ๊ฐ€์žฅ ์œ ๋ช…ํ•œ ์›น ํฌํ„ธ์ธ https://google.com/ ์ด ๊ตฌ๊ธ€์˜ URL์ด๊ณ , ์•ž์— ๋ถ™์€ https๋Š” ์›น์˜ ํ†ต์‹  ๊ทœ์•ฝ์„ ์˜๋ฏธํ•œ๋‹ค.

์›น ์ƒ์—์„œ ์ •๋ณด๋ฅผ ์ƒ์„ฑํ•˜๊ณ  ๊ฐ€๊ณตํ•˜๋Š” ์ฃผ์ฒด๊ฐ€ ์žˆ๊ณ , ๊ทธ ์ •๋ณด์— ์ ‘๊ทผํ•˜๋ ค๋Š” ๊ฐ์ฒด๊ฐ€ ์กด์žฌํ•œ๋‹ค. ๊ฐ์ฒด๊ฐ€ URL์„ ํ†ตํ•ด ์ •๋ณด๋ฅผ ์š”์ฒญํ•˜๋ฉด, ์ฃผ์ฒด๋Š” ์š”์ฒญํ•œ ์ •๋ณด๋ฅผ ๊ฐ์ฒด์—๊ฒŒ ๋‹ค์‹œ ์ „๋‹ฌํ•ด์ค€๋‹ค.
HTTP๋Š” ๋ฐ”๋กœ ์ด๋Ÿฌํ•œ ์›น์˜ ํ†ต์‹  ๊ทœ์น™์ด๋‹ค.

HTTP ๊ฐœ๋… ์žก๊ธฐ

HTTP๋Š” Hypertext Transfer Protocol์˜ ์•ฝ์ž์ด๋‹ค.

  • Hypertext: ์ปดํ“จํ„ฐ์˜ ํ™”๋ฉด์ด๋‚˜ ์ „์ž ๊ธฐ๊ธฐ์—์„œ ๋ณผ ์ˆ˜ ์žˆ๋Š” ๋ฐ์ดํ„ฐ๋กœ, ๋‹ค๋ฅธ ๋ฐ์ดํ„ฐ์™€ ์—ฐ๊ฒฐ๋œ ์ˆ˜ ์žˆ๋Š” ์ฃผ์†Œ๋ฅผ ์ฐธ์กฐํ•˜๊ณ  ์žˆ๋‹ค.
  • Transfer: ์‚ฌ๋žŒ๋“ค์ด ๋ธŒ๋ผ์šฐ์ €๋ฅผ ํ†ตํ•ด ํ™•์ธํ•˜๋Š” ์›น ์ƒ์˜ ๋ฐ์ดํ„ฐ๋Š” HTTP์— ์˜ํ•ด ์ „๋‹ฌ๋œ๋‹ค.
  • Protocol: ๊ทœ์น™ ๋˜๋Š” ๊ทœ์•ฝ์„ ์˜๋ฏธํ•œ๋‹ค.

์›น ๋ธŒ๋ผ์šฐ์ €์˜ ์ฃผ์†Œ์ฐฝ์— URL์„ ์ž…๋ ฅํ•˜๋ฉด ๊ทธ์— ํ•ด๋‹นํ•˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•˜๊ณ  ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ์€ ๋ธŒ๋ผ์šฐ์ €์˜ ์—ญํ• ์ด๋‹ค. ์š”์ฒญ ๋ฐ›์€ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒƒ์€ ์›น ์„œ๋ฒ„์˜ ์—ญํ• ์ด๊ณ  HTTP๋Š” ์ด๋Ÿฌํ•œ Client์™€ Server ๊ฐ„์˜ ํ†ต์‹  ๊ทœ์น™์ด๋‹ค. ์ด๋•Œ, Client์˜ ์š”์ฒญ์„ HTTP Request, ์„œ๋ฒ„์˜ ์‘๋‹ต์„ HTTP Response๋ผ๊ณ  ํ•œ๋‹ค.

HTTP Methods

HTTP ํ†ต์‹ ์„ ์œ„ํ•ด ์•„๋ž˜์™€ ๊ฐ™์€ Method๋“ค์„ ์ œ๊ณตํ•œ๋‹ค.

  • GET: ์•”ํ˜ธํ™”๋˜์ง€ ์•Š์€ ํ˜•ํƒœ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์„œ๋ฒ„๋กœ ์ „์†กํ•˜๋Š”๋ฐ ์‚ฌ์šฉ๋˜๋Š” ๊ฐ€์žฅ ์ผ๋ฐ˜์ ์ธ method.
  • HEAD: GET๊ณผ ์œ ์‚ฌํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ Response Body๋ฅผ ํฌํ•จํ•˜์ง€ ์•Š๊ณ  ์‚ฌ์šฉํ•œ๋‹ค.
  • POST: ํŠน์ • ์–‘์‹์˜ ๋ฐ์ดํ„ฐ๋ฅผ ์•”ํ˜ธํ™”ํ•˜์—ฌ ์„œ๋ฒ„๋กœ ์ „์†กํ•˜๋Š”๋ฐ ์‚ฌ์šฉํ•œ๋‹ค.
  • PUT: ํŠน์ • ๋Œ€์ƒ์˜ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐฑ์‹ (Update)ํ•˜๋Š”๋ฐ ์‚ฌ์šฉํ•œ๋‹ค.
  • DELETE: URL์— ์ง€์ •๋œ ๋Œ€์ƒ์„ ์‚ญ์ œ(Delete)ํ•˜๋Š”๋ฐ ์‚ฌ์šฉํ•œ๋‹ค.

HTTP status code

HTTP status code (์‘๋‹ต ์ƒํƒœ ์ฝ”๋“œ)๋Š” ํŠน์ • HTTP ์š”์ฒญ์ด ์„ฑ๊ณต์ ์œผ๋กœ ์™„๋ฃŒ๋˜์—ˆ๋Š”์ง€ ์•Œ๋ ค์ฃผ๋Š” ์ฝ”๋“œ์ด๋‹ค. ์ด ์‘๋‹ต์€ 5๊ฐœ์˜ ๊ทธ๋ฃน์œผ๋กœ ๋‚˜๋ˆ„์–ด์ง„๋‹ค. (์ƒํƒœ ์ฝ”๋“œ์— ๋Œ€ํ•˜์—ฌ๋Š” section 10 of RFC 2616์— ์ •์˜๋˜์–ด ์žˆ๋‹ค.)

  • ์‘๋‹ต: 100
  • ์„ฑ๊ณต์ ์ธ ์‘๋‹ต: 200
  • ๋ฆฌ๋‹ค์ด๋ ‰ํŠธ: 300
  • ํด๋ผ์ด์–ธํŠธ ์—๋Ÿฌ: 400
  • ์„œ๋ฒ„ ์—๋Ÿฌ: 500

Axios๋ž€?

Axios๋Š” ์›น ๋ธŒ๋ผ์šฐ์ €์™€ Node.js๋ฅผ ์œ„ํ•œ HTTP ๋น„๋™๊ธฐ(์ฝ”๋“œ์˜ ์ˆœ์„œ๋Œ€๋กœ ์‹คํ–‰๋˜์ง€ ์•Š๋Š” ์ฒ˜๋ฆฌ) ํ†ต์‹  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค. ๋ฐฑ์—”๋“œ์™€ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐ„ ํ†ต์‹ ์„ ์‰ฝ๊ฒŒ ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉ๋˜๋Š” ๊ฒƒ์œผ๋กœ Ajax์ฒ˜๋Ÿผ ์‚ฌ์šฉ๋˜๋Š” ๊ฒƒ์ด๋‹ค. ๋น„๋™๊ธฐ ํ†ต์‹  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์œผ๋ฉด ๋ชจ๋“  ์ฝ”๋“œ๊ฐ€ ์ˆœ์ฐจ์ ์œผ๋กœ ์ฒ˜๋ฆฌ๋˜์–ด์•ผ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ฝ”๋“œ์˜ ์ž‘์„ฑ ์ˆœ์„œ์— ์ฃผ์˜๋ฅผ ๊ธฐ์šธ์—ฌ์•ผ ํ•œ๋‹ค. ๋‹ค์‹œ ๋งํ•˜๋ฉด, ์ฝ”๋“œ์˜ ์ž‘์„ฑ์ด ๋งค์šฐ ๋ณต์žกํ•ด์ง€๋Š” ๊ฒƒ์ด๋‹ค. ๋”ฐ๋ผ์„œ, ๋น„๋™๊ธฐ ํ†ต์‹ ์„ ์‰ฝ๊ฒŒ ํ•ด์ฃผ๋Š” Axios๋‚˜ Ajax ๊ฐ™์€ ๊ฒƒ์ด ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ๊ฒƒ์ด๋‹ค.

Ajax๋ž€ ๋น„๋™๊ธฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ผ๋Š” ์˜๋ฏธ๋กœ Asynchronous JavaScript and
XML์˜ ์•ฝ์ž์ด๋‹ค. Ajax๋Š” ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” XMLHttpRequest ๊ฐ์ฒด๋ฅผ ์ด์šฉํ•˜์—ฌ ํ™”๋ฉด ์ „์ฒด๋ฅผ ์ƒˆ๋กœ ๊ณ ์นจ ํ•˜์ง€ ์•Š๊ณ  ๋ณ€๊ฒฝ๋œ ์ผ๋ถ€ ๋ฐ์ดํ„ฐ๋งŒ ๋กœ๋“œํ•˜๋Š” ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๊ฐ€ ๊ฐ€๋Šฅํ•˜๋‹ค. Axios๋Š” React์—์„œ ์ œ๊ณตํ•˜๋Š” Ajax์™€ ์œ ์‚ฌํ•˜๋ฉฐ OpenAPI๋ฅผ ์ด์šฉํ•œ ํ†ต์‹ ์„ ํ•  ๋•Œ ์ฃผ๋กœ ์‚ฌ์šฉํ•œ๋‹ค.

Axios๋Š” Promise๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ ๋งŒ๋“ค์–ด์ง„ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค. Promise๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ES6์—์„œ ๋น„๋™๊ธฐ ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•ด ์ฃผ๋กœ ์‚ฌ์šฉ๋˜๋Š” ๊ฐ์ฒด์ด๋‹ค.

CRUD

CRUD๋Š” Create, Read, Update, Delete์˜ ์ œ์ผ ์•ž ๋ฌธ์ž๋ฅผ ํ•˜๋‚˜์”ฉ ๋”ฐ์™€ ๋งŒ๋“  ์ค„์ž„๋ง๋กœ, ๊ฐ๊ฐ์€ ์•„๋ž˜์™€ ๊ฐ™์ด ๋งค์นญ๋œ๋‹ค.

C: Create(์ƒ์„ฑ) - POST
R: Read(์กฐํšŒ) - GET
U: Update(์ˆ˜์ •) - PUT
D: Delete(์‚ญ์ œ) - DELETE

Axios ์‚ฌ์šฉ๋ฒ•

React์—์„œ Axios๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ, ์ฒซ ๋ฒˆ์งธ ๋‹จ๊ณ„๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ import๋ฅผ ํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

import axios from 'axios';

๊ฐ ๋ฉ”์„œ๋“œ์˜ ์‚ฌ์šฉ๋ฒ•

axios.post(url, data ๊ฐ์ฒด)

POST ๋ฉ”์„œ๋“œ์€ ์ƒˆ๋กœ์šด ์ž์›์„ ์ƒ์„ฑํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. - CREATE

axios.get(url)

GET ๋ฉ”์„œ๋“œ๋Š” ์ž์›์„ ์š”์ฒญํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. - READ

axios.put(url, data ๊ฐ์ฒด)

PUT ๋ฉ”์„œ๋“œ๋Š” ์ž์›์„ ๊ฐฑ์‹ ํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. - UPDATE

axios.delete(url)

DELETE ๋ฉ”์„œ๋“œ๋Š” ์ž์›์„ ์‚ญ์ œํ•  ๋•Œ ์‚ฌ์šฉํ•œ๋‹ค. - DELETE

์ฐธ๊ณ : PUT๊ณผ DELETE๋Š” REST ๊ธฐ๋ฐ˜ API ํ”„๋กœ๊ทธ๋žจ์—์„œ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์— ์ €์žฅ๋œ ๋‚ด์šฉ์„ ๋‹ค๋ฃฐ ๋•Œ ์‚ฌ์šฉ๋˜๋Š” ๋ฉ”์†Œ๋“œ์ด๋‹ค. OpenAPI๋ฅผ ๋‹ค๋ฃฐ ๋•Œ์—๋Š” ์‚ฌ์šฉํ•  ์ผ์ด ๊ฑฐ์˜ ์—†์Œ.

ํ•œ ์ค„ํ‰: ์ฒซ ํ”„๋กœ์ ํŠธ ๋•Œ AJAX๋กœ ๋šœ๋“ค๊ฒจ ๋งž์€ ๊ธฐ์–ต์ด ์ƒˆ๋ก์ƒˆ๋ก.

profile
์‚ฌ์šฉ์ž์˜ ํŽธ์˜๋ฅผ ๋” ์ƒ๊ฐํ•˜๊ณ  ํŽธ์•ˆํ•œ UI/UX ๊ฐœ๋ฐœ์„ ๊ฟˆ๊พธ๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ์ง€๋ง์ƒ์ž…๋‹ˆ๋‹ค.

0๊ฐœ์˜ ๋Œ“๊ธ€