[ 06.25 ] REST API

์ด์ˆ™์˜ยท2021๋…„ 6์›” 25์ผ
0

HTTP / ๋„คํŠธ์›Œํฌ

๋ชฉ๋ก ๋ณด๊ธฐ
3/8
post-thumbnail
post-custom-banner

Achivement Goals

๐Ÿ• REST API์— ๋Œ€ํ•ด ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋‹ค.
-REST API ๋ฌธ์„œ๋ฅผ ์ฝ์„ ์ˆ˜ ์žˆ๋‹ค.
-REST API์— ๋งž์ถฐ ๋””์ž์ธํ•  ์ˆ˜ ์žˆ๋‹ค.
-Open API์™€ API Key์— ๋Œ€ํ•ด ์ดํ•ดํ•  ์ˆ˜ ์žˆ๋‹ค.
๐Ÿ• Postman์ด ๋ฌด์—‡์ธ์ง€ ์ดํ•ดํ•˜๊ณ  ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
-HTTP API ํ…Œ์ŠคํŒ…์ด ๋ฌด์—‡์ธ์ง€ ์•Œ ์ˆ˜ ์žˆ๋‹ค.
-Postman์„ ์‚ฌ์šฉํ•˜์—ฌ ์„œ๋ฒ„์— GET, POST ์š”์ฒญ์„ ๋ณด๋‚ด๊ณ  ์‘๋‹ต์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค.
-Postman์„ ์‚ฌ์šฉํ•˜์—ฌ Open Weather Map Open API์— ์š”์ฒญ์„ ๋ณด๋‚ผ ์ˆ˜ ์žˆ๋‹ค.

1. REST API๋ž€?

ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ ๋ Œ๋”๋ง์ธ CSR์—์„œ๋Š” ๋ช‡๊ฐ€์ง€์˜ ๋ฉ”์†Œ๋“œ๋ฅผ ์ด์šฉํ•ด ์„œ๋ฒ„์™€ ํ†ต์‹ ํ•œ๋‹ค.
GET(๋ฐ์ดํ„ฐ ์š”์ฒญ) / POST(์ƒˆ๋กœ์šด ๋ฐ์ดํ„ฐ ์ „์†ก) / DELETE(๋ฐ์ดํ„ฐ ์‚ญ์ œ)..
์ด๋ ‡๊ฒŒ ํด๋ผ์ด์–ธํŠธ์˜ ์š”์ฒญ์— ๋”ฐ๋ผ์„œ ์„œ๋ฒ„๊ฐ€ ์ ์ ˆํ•œ ์‘๋‹ต์„ ํ•˜๋Š” API๋ฅผ REST API ๋ผ๊ณ  ํ•œ๋‹ค.

๐Ÿ” Endpoint

root-endpoint(or root-URL) : API๋กœ ์„œ๋ฒ„์— ์š”์ฒญํ•  ๋•Œ, ์„œ๋ฒ„๊ฐ€ ์š”์ฒญ์„ ์ˆ˜๋ฝํ•˜๋Š” ์‹œ์ž‘์ ์„ ๋œปํ•œ๋‹ค.
์ผ๋ฐ˜์ ์œผ๋กœ ๋„๋ฉ”์ธ ์ฃผ์†Œ์˜ ๋ฃจํŠธ(/) ๋ฅผ ๊ฐ€๋ฅดํ‚จ๋‹ค.
path(or url-path) : API๋ฅผ ํ†ตํ•ด ์„œ๋ฒ„์™€ ํ†ต์‹ ํ•  ๋•Œ ์„œ๋ฒ„์™€ ํ†ต์‹ ํ•  ์ˆ˜ ์žˆ๋Š” key ์—ญํ• ์„ ํ•œ๋‹ค. ์„œ๋ฒ„์— ์ •์˜๋œ ๋ฌธ์ž์—ด์— ๋”ฐ๋ผ path ๊ฐ€ ๋‹ฌ๋ผ์ง„๋‹ค.

(1) ๋ฉ”์„ธ์ง€ ์กฐํšŒํ•˜๊ธฐ - GET

๐Ÿ” request

GET / {githubID}/messages

{githubID} ๋ถ€๋ถ„์—๋Š” ๋ฉ”์„ธ์ง€๋ฅผ ์กฐํšŒํ•  ์‚ฌ๋žŒ์˜ ์•„์ด๋””๊ฐ€ ๋“ค์–ด๊ฐ„๋‹ค.
ํ•„์ˆ˜์ ์ด์ง„ ์•Š์ง€๋งŒ ์ถ”๊ฐ€์ ์ธ ํŒŒ๋ผ๋ฏธํ„ฐ(query parameter) ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค๋ฉด,

/{githubID}/messages?roomname=์Šค์œ„ํŠธ๋ฃธ

์—ฌ๊ธฐ์„œ ํŒŒ๋ผ๋ฏธํ„ฐ๋Š” roomname ์ด๊ณ  ํŠน์„ฑ roomname ๋งŒ ์กฐํšŒํ•  ์ˆ˜ ์žˆ๋Š”, ๋ฌธ์ž์—ด ํ˜•์‹์œผ๋กœ ์ž‘์„ฑ๋˜์—ˆ๋‹ค.

๐Ÿ” response

์‘๋‹ต์€ ๋ฐฐ์—ด๊ฐ์ฒด, JSON ํ˜•์‹์œผ๋กœ ์“ธ ์ˆ˜ ์žˆ๋‹ค.
(์ „๋ถ€ ์Œ๋”ฐ์˜ดํ‘œ๋กœ ํ•ด์•ผํ•œ๋‹ค. ๋งˆ์ด๋ฏธ์Šคํ…Œ์žŒ.)

[
{'id' : 1, //์ˆซ์žํ˜•ํƒœ
 'userName':'sook', //์ดํ•˜ ๋ฌธ์ž์—ดํ˜•ํƒœ 
 'text' : 'hi',
 'roomname' : '์Šค์œ„ํŠธ๋ฃธ',
 'date' : '2021-06-25T10:34:21:134'
 },
 {'id' : 2, 
 'userName':'mike',
 'text' : 'bye',
 'roomname' : '๋””๋Ÿญ์Šค๋ฃธ',
 'date' : '2021-06-25T12:20:45:134'
 },
 ...
]

(2) ๋ฉ”์„ธ์ง€ ์ถ”๊ฐ€ํ•˜๊ธฐ - POST

๐Ÿ” request

POST /{githubID}/messages

post ๋กœ ์š”์ฒญ์‹œ, username, text,roomname,,์ถ”๊ฐ€ํ•  ์‚ฌํ•ญ์„ JSON ํ˜•์‹์œผ๋กœ ๋ณด๋‚ธ๋‹ค.

application/json

๐Ÿ” response

์œ„์™€๊ฐ™์ด ์š”์ฒญํ–ˆ๋‹ค๋ฉด ์‘๋‹ต์€ ์ด๋ ‡๊ฒŒ ์˜ฌ ๊ฒƒ์ด๋‹ค.

{
 "id" : 5;
}

(2) ๋ฉ”์„ธ์ง€ ์ดˆ๊ธฐํ™”ํ•˜๊ธฐ - clear

๐Ÿ” request

POST /{githubID}/ clear

๐Ÿ” response

{
'message' : 'message initialized!'
}

2. REST API ๋””์ž์ธ

๋ฐ˜๋“œ์‹œ ์–ด๋–ป๊ฒŒ ํ•ด์•ผํ•œ๋‹ค~ ๋ผ๋Š” ๊ณต์‹์ ์ธ ๊ทœ๊ฒฉ์€ ์—†์ง€๋งŒ ๋ช‡๊ฐ€์ง€์˜ ๋ชจ๋ฒ•์ ์ธ ์‚ฌ๋ก€๋“ค์€ ์žˆ๋‹ค. ๊ทธ ์ค‘ ๋‹ค์„ฏ๊ฐ€์ง€ ๊ฐ€์ด๋“œ๋ฅผ ๋“ค์ž๋ฉด,

(1) Resources(URIs)

  • use concrete names, not action verbs

๊ณผ๊ฑฐ์—๋Š”

 getUser(1234),createUser(user),deleteAddres(1234) 

์ด๋ ‡๊ฒŒ ์“ฐ์˜€๋‹ค๋ฉด,

GET/users/1234, POST/users(with JSON describing a user in the body) DELETE/addresses/1234

์ด๋ ‡๊ฒŒ ์“ฐ๋Š”๊ฒŒ ์ถ”์„ธ์ธ๊ฐ€๋ณด๋‹ค.

  • URI : CamelCase , snake_case, spinal-case

(2) HTTP methods

GET ๋ฉ”์†Œ๋“œ๋Š” ์ฃผ์–ด์ง„ URI ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ •๋ณด๋ฅผ ์กฐํšŒ,๊ฒ€์ƒ‰ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์ด ์žˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์š”์ฒญ์‹œ, ๋ฐ์ดํ„ฐ๋งŒ ์š”์ฒญ ํ•ด์•ผํ•˜๋ฉฐ ๋ฐ์ดํ„ฐ์— ๋‹ค๋ฅธ ์˜ํ–ฅ์ด ๋ผ์น˜์ง€ ์•Š๋„๋ก ํ•ด์•ผํ•œ๋‹ค.
POST ๋ฉ”์†Œ๋“œ๋Š” ๊ณ ๊ฐ์ •๋ณด, ํŒŒ์ผ์—…๋กœ๋“œ, HTML form๋“ค์„ ์‚ฌ์šฉํ•˜๋Š” ๋‹ค๋ฅธ๊ฒƒ๋“ค ๋“ฑ๋“ฑ .. ์„œ๋ฒ„์—๊ฒŒ ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ด๋Š”๊ฒƒ์„ ์š”์ฒญํ•ด์•ผ ํ•œ๋‹ค.

(3) HTTP headers

  • general Header , Client Request Header, Server Response Header, Entity Header(์ด์ „ํฌ์ŠคํŠธ์— ์ž‘์„ฑํ•œ ๋ถ€๋ถ„๊ณผ ๋™์ผ)

(4) Query parameters

  • paging : API ์ดˆ๊ธฐ ๋””์ž์ธ ๋‹จ๊ณ„์—์„œ ๋ฆฌ์†Œ์Šค๋ฅผ ์˜ˆ์ƒํ•œ๋‹ค. ๋งŒ์•ฝ ๋งŽ์€ ์–‘์˜ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ฐ˜ํ™˜๋ ๋•Œ ์ง„ํ–‰์ƒํ™ฉ์— ๋Œ€ํ•ด ์˜ˆ์ƒํ•˜๊ธฐ ์–ด๋ ค์šฐ๋ฏ€๋กœ ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ๋ฆฌ์†Œ์Šค ํŽ˜์ด์ง€๋ฅผ ๋งค๊ธฐ๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•˜๋‹ค.
  • filtering : ํ•„ํ„ฐ๋ง์€ ์ผ๋ถ€ ์†์„ฑ๊ณผ ์˜ˆ์ƒ ๊ฐ’์„ ์ง€์ •ํ•˜์—ฌ ์ฟผ๋ฆฌ ๋œ ๋ฆฌ์†Œ์Šค ์ˆ˜๋ฅผ ์ œํ•œํ•˜๋Š” ๊ฒƒ์œผ๋กœ ๊ตฌ์„ฑ๋œ๋‹ค. ๋™์‹œ์— ์—ฌ๋Ÿฌ ์†์„ฑ์— ๋Œ€ํ•œ ์ปฌ๋ ‰์…˜์„ ํ•„ํ„ฐ๋งํ•˜๊ณ  ํ•˜๋‚˜์˜ ํ•„ํ„ฐ๋ง ๋œ ์†์„ฑ์— ์—ฌ๋Ÿฌ ๊ฐ’์„ ํ—ˆ์šฉ ํ•  ์ˆ˜ ์žˆ๋‹ค.
  • sorting : ์†์„ฑ์˜ ์ด๋ฆ„์€ ์‰ผํ‘œ๋กœ ๊ตฌ๋ถ„๋˜์–ด์•ผ ํ•œ๋‹ค.
  • searching : ๊ฒ€์ƒ‰๊ณผ ๊ด€๋ จ๋œ ์ œ์•ˆ, ์ˆ˜์ • ๋ฐ ์ •๋ณด๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค. ํŒŒ๋ผ๋ฏธํ„ฐ๋Š” ํ•„ํ„ฐ์™€ ๋™์ผํ•œ ๋ฐฉ์‹์ด์ง€๋งŒ ์ •ํ™•ํ•œ ๊ฐ’์ด ํ•„์ˆ˜์ ์ด์ง„ ์•Š๋‹ค.

(5) status Codes

์ฃผ์š” ์ฝ”๋“œ๋กœ๋Š”,
200(ok), 201(์ƒˆ๋กœ์šด ๋ฆฌ์†Œ์Šค ์ƒ์„ฑ),204(๋ฆฌ์†Œ์Šค ์‚ญ์ œ),304(๋ฐ์ดํ„ฐ๋ณ€๊ฒฝ์ด ๋˜์ง€์•Š์Œ),400(JSON์ด ์œ ํšจํ•˜์ง€ ์•Š๊ฑฐ๋‚˜ ์š”์ฒญ์ด invalid ํ• ๋•Œ),401(์ ‘๊ทผ์„ฑx)
๋“ฑ์ด ์žˆ๋‹ค.

์ด์•ผ ,, ๋’ค๋Šฆ๊ฒŒ ๋ฐœ๊ฒฌํ•œ๊ฑด๋ฐ api ์š”์ฒญ์‹œ ๋ฌด์กฐ๊ฑด ์Œ๋”ฐ์˜ดํ‘œ๋กœ ํ•ด์•ผํ•˜๋‚˜๋ด„?

3. Open API , API key

(1) Open API

์ •๋ถ€์—์„œ ์ œ๊ณตํ•˜๋Š” ๊ณต๊ณต๋ฐ์ดํ„ฐ์— ์‰ฝ๊ฒŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋„๋ก, ์ •๋ถ€๋Š” ์˜คํ”ˆ๋œ API ๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์žˆ๋‹ค. ๋ง๊ทธ๋Œ€๋กœ ๋ˆ„๊ตฌ์—๊ฒŒ๋‚˜ ์—ด๋ ค์žˆ๋Š” API์ด์ง€๋งŒ ๋ฌด์ œํ•œ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์—†์œผ๋ฉฐ ์ •ํ•ด์ง„ ์ด์šฉ์ˆ˜์น™์— ์˜ํ•ด ์ œํ•œ์‚ฌํ•ญ์ด ์žˆ์„ ์ˆ˜๋„ ์žˆ๋‹ค.

๋Œ€ํ‘œ์ ์ธ ์‚ฌ์ดํŠธ : Open Weather Map
[ ๋ฌด๋ฃŒ๋กœ ๋‚ ์”จ API ์‚ฌ์šฉ ๊ฐ€๋Šฅ, JSON ํ˜•ํƒœ๋กœ ์‘๋‹ต.]

(2) API key

API๋ฅผ ์ด์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ API key๋ผ๋Š” ๊ฒƒ์ด ํ•„์š”ํ•˜๋‹ค. ๋ˆ„๊ตฌ์—๊ฒŒ๋‚˜ ์—ด๋ ค์žˆ์ง€๋งŒ, ๋กœ๊ทธ์ธ ๋œ ์ด์šฉ์ž์— ํ•œํ•ด์„œ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ํ˜•ํƒœ๋ฅผ API key ํ˜•ํƒœ๋กœ ์ œ๊ณตํ•˜๊ณ , ๋ฐ์ดํ„ฐ๋ฅผ ์š”์ฒญํ•  ๋•Œ API key๋ฅผ ๊ฐ™์ด ์ „๋‹ฌํ•ด์•ผ๋งŒ ์‘๋‹ต์„ ๋ฐ›์„ ์ˆ˜ ์žˆ๋‹ค.


Open Weather Map ์‚ฌ์ดํŠธ์— ์ ‘์†ํ•˜์—ฌ ๋กœ๊ทธ์ธ ํ•œ ํ›„,
My API keys ๋ฅผ ํด๋ฆญํ•˜๋ฉด ๋‹ค์Œ๊ณผ๊ฐ™์€ API key๋ฅผ ์ œ๊ณตํ•œ๋‹ค.


4. Postman ์‚ฌ์šฉํ•ด๋ณด๊ธฐ

๋ณธ๊ฒฉ HTTP API ๋ฅผ ํ…Œ์ŠคํŠธํ•ด๋ณด๊ธฐ ์œ„ํ•ด ๊ฐ€์žฅ ์œ ๋ช…ํ•œ ์‚ฌ์ดํŠธ,postman์„ ์‚ฌ์šฉํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค.

(1) GET ์š”์ฒญํ•˜๊ธฐ

๐Ÿฅž URL

http://3.36.72.17:3000/

๐Ÿฅž ๋ฉ”์„ธ์ง€ ์กฐํšŒ


์š”์ฒญ ํƒ€์ž…์— ๋”ฐ๋ผ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋‹ค. (GET/POST.. ๋“ฑ๋“ฑ)
๋งŒ์•ฝ POST ๋ฐฉ์‹์œผ๋กœ ๋‚ด์šฉ์ถ”๊ฐ€ํ•˜์—ฌ ์ „์†ก์š”์ฒญํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด

๊ผญ ์Œ๋”ฐ์˜ดํ‘œ๋กœ ์ž‘์„ฑํ•˜์‹œ๊ณ ^^
JSON ํ˜•ํƒœ๋กœ ์ž‘์„ฑํ•ด์•ผ ํ•˜๋‹ˆ raw -> JSON ์„ ์„ ํƒํ•˜์—ฌ ์ž‘์„ฑํ•ด์ค€๋‹ค.

profile
FrontEndDeveloper
post-custom-banner

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