[React 03] - HTTP, API, GraphQL, Rest, JSON, CRUD

yiwoojungยท2022๋…„ 7์›” 1์ผ
0

{C} Codecamp FE 06

๋ชฉ๋ก ๋ณด๊ธฐ
3/21
post-thumbnail

๐Ÿ—ฟ ์˜ค๋Š˜์˜ ๋ชฉํ‘œ

  1. ๋ฐ์ดํ„ฐ ์ „์†ก ๋ฐฉ๋ฒ•
    1-1 HTTP
    1-2 API
    1-3 GraphQl vs Rest
    1-4 JSON
    1-5 CRUD

  2. ๋ฐ์ดํ„ฐ ์ „์†ก ์‹ค์Šต
    2-1 Postman
    2-2 Playground


1. ๋ฐ์ดํ„ฐ ์ „์†ก ๋ฐฉ๋ฒ•

๋‘ ์ปดํ“จํ„ฐ ๊ฐ„์— ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†กํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์•Œ์•„๋ณด์ž.
ํ•œ ๊ฐœ๋Š” ํ”„๋ก ํŠธ, ํ•œ๊ฐœ๋Š” ๋ฐฑ์—”๋“œ ์ปดํ“จํ„ฐ์ด๋‹ค.
์˜ˆ๋ฅผ๋“ค์–ด ํšŒ์›๊ฐ€์ž…ํŽ˜์ด์ง€์—์„œ ๋ฐ›์€ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐฑ์—”๋“œ ์ปดํ“จํ„ฐ๋กœ ๋ณด๋‚ธ๋‹ค. ๊ทธ๋Ÿผ ๋ฐฑ์—”๋“œ๋Š” ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค(DB)์ปดํ“จํ„ฐ๋กœ ๋ณด๋‚ผ ๊ฒƒ์ด๋‹ค.

์ด๋•Œ ์–ด๋–ค ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ด๋ƒ์— ๋”ฐ๋ผ์„œ ๋‹ค๋ฅธ ๊ธธ์ด ์ƒ์„ฑ๋œ๋‹ค.

ํ…์ŠคํŠธ๋‚˜ HTML ๊ฐ™์€ ํ•˜์ดํผํ…์ŠคํŠธ๋“ค์„ ๋ณด๋‚ผ ๋•Œ๋Š” HTTP๋ผ๋Š” ๊ธธ์ด ๋งŒ๋“ค์–ด์ง„๋‹ค.
HTTP๋Š” Hyper Text Transfer Protocol์˜ ์•ฝ์ž์ด๋‹ค.

์ด์ œ HTTP์— ๋Œ€ํ•ด์„œ ์•Œ์•„๋ณด์ž.

1-1 HTTP

HTTP๋Š” ์š”์ฒญ๊ณผ ์‘๋‹ต, ๋‘ ๊ฐ€์ง€์˜ ๊ธฐ๋Šฅ์œผ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๋‹ค.
ํ•˜๋‚˜์˜ ์ปดํ“จํ„ฐ๊ฐ€ ์š”์ฒญ์„ ํ•˜๋ฉด ๋ฐ›์€ ์• ๊ฐ€ ๊ทธ๊ฒƒ์— ๋Œ€ํ•œ ์‘๋‹ต์„ ์ค€๋‹ค.

ํ”„๋ก ํŠธ์—์„œ state์— ๋‹ด์€ ๋ฐ์ดํ„ฐ๋ฅผ ๋“ฑ๋กํ•˜๊ธฐ ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ์„œ ์ด ๊ฒŒ์‹œ๋ฌผ์„ ๋“ฑ๋กํ•ด๋‹ฌ๋ผ๊ณ  ๋ฐฑ์—”๋“œ์— ์š”์ฒญํ•œ๋‹ค. ๊ทธ๋Ÿผ ์ž๋™์œผ๋กœ http ๊ธธ์ด ๋งŒ๋“ค์–ด์ง„๋‹ค. ๋ฐฑ์—”๋“œ๋Š” ์ด๋“ค์„ ์•ˆ์ „ํ•˜๊ฒŒ ๋ณด์•ˆ ๋ฐ ๊ฒ€์ฆํ•œ ๋’ค DB์— ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†กํ•ด์ค€๋‹ค. ๊ทธ ๋’ค ๋ฐฑ์—”๋“œ์—์„œ ์™„๋ฃŒ๋˜์—ˆ๋‹ค ๋˜๋Š” ์—๋Ÿฌ๋‚ฌ๋‹ค๊ณ  ์‘๋‹ต์„ ์ค€๋‹ค.

์ด ์‘๋‹ต์€ {key : value} ํ˜•ํƒœ์˜ ๋ฉ”์„ธ์ง€(ํ…์ŠคํŠธ) ๊ฐ์ฒด์™€ ์ƒํƒœ์ฝ”๋“œ(200 ,400 ๋“ฑ ... http ์ƒํƒœ์ฝ”๋“œ๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค)๋ฅผ ํฌํ•จํ•œ๋‹ค.

1-2 API (Application Programming Interface)

ํ”„๋ก ํŠธ์—์„œ ๊ฒŒ์‹œ๋ฌผ์„ ์ž‘์„ฑํ•œ๋‹ค๋ฉด ๊ฒŒ์‹œ๋ฌผ ์ž‘์„ฑ API๋ฅผ ์š”์ฒญํ•ด์•ผํ•˜๊ณ  ํ”„๋กœํ•„์„ ์ €์žฅํ•œ๋‹ค๋ฉด ํ”„๋กœํ•„ ์ €์žฅ API๋ฅผ ์š”์ฒญํ•ด์•ผ ํ•œ๋‹ค.

HTTP ์š”์ฒญ(request)๊ณผ ์‘๋‹ต(response)์€ header, body๋กœ ๊ตฌ์„ฑ๋˜์–ด์žˆ๋‹ค.

header : ๋ณด๋‚ด๋Š”์ด, ์–ด๋–ค ํ˜•ํƒœ์˜ ๋ฐ์ดํ„ฐ์ธ์ง€
body : ์–ด๋–ค๋ฐ์ดํ„ฐ๋“ค์ด ์ฃผ๊ณ ๋ฐ›์•„์ง€๋Š”์ง€

์ด๋•Œ ์ž‘์—… ๊ฐ๊ฐ์˜ ๋‹ด๋‹น์ž๋ฅผ API( ํ•จ์ˆ˜ )๋ผ๊ณ  ํ•œ๋‹ค.
API๋Š” ๊ฐ„๋‹จํžˆ ๋งํ•˜๋ฉด ์š”์ฒญ์„ ์ˆ˜ํ–‰ํ•˜๊ธฐ ์œ„ํ•ด ๋ฐฑ์—”๋“œ์—์„œ ๋งŒ๋“ค์–ด ์ค€ ํ•จ์ˆ˜๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค.

๋ฐฑ์—”๋“œ์—์„œ๋Š” API๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ์‹์ด Rest์™€ GraphQL ์ด๋ ‡๊ฒŒ ๋‘๊ฐ€์ง€ ๋ฐฉ์‹์ด ์žˆ๋‹ค. ๋งŒ๋“  ๋ฐฉ์‹์— ๋”ฐ๋ผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹๋„ ๋‹ฌ๋ผ์ง„๋‹ค.

์šฐ์„  rest-API ์™€ graphql-API๋ฅผ ๋น„๊ตํ•ด๋ณด์ž.

1-3 GraphQl vs Rest

์ผ๋‹จ rest API๋Š” ์ฃผ์†Œ์ฒ˜๋Ÿผ ์ƒ๊ฒผ๊ณ  graphql API๋Š” ์ผ๋ฐ˜ ํ•จ์ˆ˜์ฒ˜๋Ÿผ ์ƒ๊ฒผ๋‹ค.

๋‘๋ฒˆ์งธ๋กœ ๋‘˜๋‹ค HTTP๋ผ๋Š” ๊ธธ์ด ์ƒ๊ธฐ๋Š” ๊ฒƒ์€ ๋˜‘๊ฐ™์ง€๋งŒ ๋‹ด๋‹น์ž์˜ ์ด๋ฆ„์ด ๋‹ค๋ฅด๋‹ค๋Š” ์ฐจ์ด๊ฐ€ ์žˆ๋‹ค.

rest- axios
graphQL- apollo client

๋˜ํ•œ rest๋Š” ์›ํ•˜๋“  ์›์น˜์•Š๋“  ๋ชจ๋“  ์ •๋ณด๋ฅผ ๋‹ค ๋ฐ›์•„์™€์•ผ ํ•œ๋‹ค.
๋ฐ˜๋ฉด์— graphQL์€ ์›ํ•˜๋Š” ์ •๋ณด๋งŒ ๋ฐ›์•„ ์˜ฌ ์ˆ˜ ์žˆ๋‹ค๋Š” ํฐ ์žฅ์ ์ด ์žˆ๋‹ค.

๊ตญ๋‚ด์˜ ํšŒ์‚ฌ๋“ค์€ rest-API์˜ ๋น„์œจ์ด ๋†’๊ณ  ์ผ๋ฐ˜์ ์ธ Open API๋Š” ๋ณดํ†ต rest API์ด๊ธฐ ๋•Œ๋ฌธ์— ๋‘˜ ๋‹ค ์•Œ์•„์•ผ ํ•œ๋‹ค.

1-4 JSON (JavaScript Object Notation)

์ด๋ ‡๊ฒŒ ์ฃผ๊ณ ๋ฐ›๋Š” ๋ฐ์ดํ„ฐ๋“ค์„ JSON ๋ฐ์ดํ„ฐ(์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ฐ์ฒด ํ‘œ๊ธฐ๋ฒ•)๋ผ๊ณ  ํ•œ๋‹ค.
์‹ค์ œ๋กœ๋Š” ๊ฐ์ฒด๋ฅผ ๋ฌธ์ž์—ด๋กœ ๋ฐ”๊ฟ”์„œ("") ์ฃผ๊ณ ๋ฐ›๋Š”๋ฐ ์ด ์ด์œ ๋Š” HTTP๊ฐ€ ํ…์ŠคํŠธ ๋˜๋Š” HTML์„ ์ฃผ๊ณ ๋ฐ›๋Š” ๊ธธ์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

1-5 CRUD

ํ•˜๋‚˜์˜ ๊ธฐ๋Šฅ์„ ๋งŒ๋“ ๋‹ค๊ณ  ํ•˜๋ฉด ์ ์–ด๋„ 4๊ฐœ์˜ API๊ฐ€ ๋‚˜์™€์•ผํ•œ๋‹ค.
์ด๋Š” Create, Read, Update, Delete ๋ผ๊ณ  ํ•œ๋‹ค.

rest graphQL์—์„œ CRUD๋ฅผ ๋งŒ๋“œ๋Š” ๊ณผ์ •์— ์žˆ์–ด์„œ ์ฐจ์ด๊ฐ€ ์žˆ๋‹ค.

rest๋Š” ๊ฐ๊ฐ ํ‚ค์›Œ๋“œ(๋ฉ”์„œ๋“œ)๊ฐ€ ๋ถ™๋Š”๋‹ค.

create - post
read - get
update - put
delete - delete

ํ•˜์ง€๋งŒ graphql์—์„œ๋Š” ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š๋ƒ ์•„๋‹ˆ๋ƒ ๋‘๊ฐ€์ง€๋กœ ๋‚˜๋‰œ๋‹ค.

create, update, delete - mutation
read - query

์ด๋ฅผ ๊ธฐ๋ฐ˜์œผ๋กœ axios์™€ apollo-client๋กœ ์ •๋ณด๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ์‹์ด๋‹ค.


โ• ์š”์•ฝ ์ •๋ฆฌ


2. ๋ฐ์ดํ„ฐ ์ „์†ก ์‹ค์Šต

๋ฐ์ดํ„ฐ ์ „์†ก์„ ์‹ค์Šตํ•˜๋ ค๋ฉด ์„ค๋ช…์„œ(API-Docs)์™€ ์—ฐ์Šต๋„๊ตฌ๊ฐ€ ํ•„์š”ํ•˜๋‹ค.

rest-API๋Š” ํฌ์ŠคํŠธ๋งจ(์—ฐ์Šต๋„๊ตฌ), ์Šค์›จ๊ฑฐ(์„ค๋ช…์„œ) ๋”ฐ๋กœ์žˆ์ง€๋งŒ graphql-API๋Š” ํ”Œ๋ ˆ์ด๊ทธ๋ผ์šด๋“œ ํ•œ ํ™”๋ฉด์— ํ•ฉ์ณ์ ธ ์žˆ๋‹ค.

ํฌ์ŠคํŠธ๋งจ : https://www.postman.com/ ์—์„œ ํฌ์ŠคํŠธ๋งจ ํ”„๋กœ๊ทธ๋žจ ์„ค์น˜
์Šค์›จ๊ฑฐ :

2-1 Postman (Rest-API ์‹ค์Šต)

Swagger

API Docs๋ฅผ ๋ณด๊ณ  API๋ฅผ ์š”์ฒญํ•œ๋‹ค.

์•„๋ž˜ ์˜คํ”ˆ API๋ฅผ ์‚ฌ์šฉํ•ด๋ณด์ž.
https://koreanjson.com/ ํ•œ๊ตญ์–ด ๋ฐ์ดํ„ฐ๋ฅผ ์ œ๊ณตํ•˜๋Š” ์ดˆ๊ฐ„๋‹จ JSON API.

Postman

API์ฃผ์†Œ๋ฅผ https๋ถ€ํ„ฐ ์ž…๋ ฅํ•ด์ฃผ๊ณ  ์›ํ•˜๋Š” ์ •๋ณด์˜ Endpoint๋ฅผ ์ž…๋ ฅํ•ด API๋ฅผ ์š”์ฒญํ•œ๋‹ค.

์ด ๊ฒฐ๊ณผ(๊ฐ์ฒด)๋ฅผ result์— ๋‹ด์œผ๋ฉด result.title, result.content ... ๋“ฑ ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

2-2 Playground

mutation ์ „์†ก์„ ํ•ด๋ณด์•˜๋‹ค.
Docs ๋ณด๊ธฐ์™€ ์‹คํ–‰์„ ํ•œ ํŽ˜์ด์ง€์—์„œ ํ•  ์ˆ˜ ์žˆ์–ด์„œ ํŽธ๋ฆฌํ•˜๋‹ค.

profile
ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž

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