๋ฐ์ดํฐ ์ ์ก ๋ฐฉ๋ฒ
1-1 HTTP
1-2 API
1-3 GraphQl vs Rest
1-4 JSON
1-5 CRUD
๋ฐ์ดํฐ ์ ์ก ์ค์ต
2-1 Postman
2-2 Playground
๋ ์ปดํจํฐ ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ์ ์กํ๋ ๋ฐฉ๋ฒ์ ์์๋ณด์.
ํ ๊ฐ๋ ํ๋ก ํธ, ํ๊ฐ๋ ๋ฐฑ์๋ ์ปดํจํฐ์ด๋ค.
์๋ฅผ๋ค์ด ํ์๊ฐ์
ํ์ด์ง์์ ๋ฐ์ ๋ฐ์ดํฐ๋ฅผ ๋ฐฑ์๋ ์ปดํจํฐ๋ก ๋ณด๋ธ๋ค. ๊ทธ๋ผ ๋ฐฑ์๋๋ ๋ฐ์ดํฐ๋ฒ ์ด์ค(DB)์ปดํจํฐ๋ก ๋ณด๋ผ ๊ฒ์ด๋ค.
์ด๋ ์ด๋ค ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ด๋์ ๋ฐ๋ผ์ ๋ค๋ฅธ ๊ธธ์ด ์์ฑ๋๋ค.
ํ
์คํธ๋ HTML ๊ฐ์ ํ์ดํผํ
์คํธ๋ค์ ๋ณด๋ผ ๋๋ HTTP๋ผ๋ ๊ธธ์ด ๋ง๋ค์ด์ง๋ค.
HTTP๋ Hyper Text Transfer Protocol์ ์ฝ์์ด๋ค.
์ด์ HTTP์ ๋ํด์ ์์๋ณด์.
HTTP๋ ์์ฒญ๊ณผ ์๋ต, ๋ ๊ฐ์ง์ ๊ธฐ๋ฅ์ผ๋ก ์ด๋ฃจ์ด์ ธ ์๋ค.
ํ๋์ ์ปดํจํฐ๊ฐ ์์ฒญ์ ํ๋ฉด ๋ฐ์ ์ ๊ฐ ๊ทธ๊ฒ์ ๋ํ ์๋ต์ ์ค๋ค.
ํ๋ก ํธ์์ state์ ๋ด์ ๋ฐ์ดํฐ๋ฅผ ๋ฑ๋กํ๊ธฐ ๋ฒํผ์ ๋๋ฌ์ ์ด ๊ฒ์๋ฌผ์ ๋ฑ๋กํด๋ฌ๋ผ๊ณ ๋ฐฑ์๋์ ์์ฒญํ๋ค. ๊ทธ๋ผ ์๋์ผ๋ก http ๊ธธ์ด ๋ง๋ค์ด์ง๋ค. ๋ฐฑ์๋๋ ์ด๋ค์ ์์ ํ๊ฒ ๋ณด์ ๋ฐ ๊ฒ์ฆํ ๋ค DB์ ๋ฐ์ดํฐ๋ฅผ ์ ์กํด์ค๋ค. ๊ทธ ๋ค ๋ฐฑ์๋์์ ์๋ฃ๋์๋ค ๋๋ ์๋ฌ๋ฌ๋ค๊ณ ์๋ต์ ์ค๋ค.
์ด ์๋ต์ {key : value} ํํ์ ๋ฉ์ธ์ง(ํ ์คํธ) ๊ฐ์ฒด์ ์ํ์ฝ๋(200 ,400 ๋ฑ ... http ์ํ์ฝ๋๋ผ๊ณ ๋ถ๋ฅธ๋ค)๋ฅผ ํฌํจํ๋ค.
ํ๋ก ํธ์์ ๊ฒ์๋ฌผ์ ์์ฑํ๋ค๋ฉด ๊ฒ์๋ฌผ ์์ฑ API๋ฅผ ์์ฒญํด์ผํ๊ณ ํ๋กํ์ ์ ์ฅํ๋ค๋ฉด ํ๋กํ ์ ์ฅ API๋ฅผ ์์ฒญํด์ผ ํ๋ค.
HTTP ์์ฒญ(request)๊ณผ ์๋ต(response)์ header, body๋ก ๊ตฌ์ฑ๋์ด์๋ค.
header : ๋ณด๋ด๋์ด, ์ด๋ค ํํ์ ๋ฐ์ดํฐ์ธ์ง
body : ์ด๋ค๋ฐ์ดํฐ๋ค์ด ์ฃผ๊ณ ๋ฐ์์ง๋์ง
์ด๋ ์์
๊ฐ๊ฐ์ ๋ด๋น์๋ฅผ API( ํจ์ )๋ผ๊ณ ํ๋ค.
API๋ ๊ฐ๋จํ ๋งํ๋ฉด ์์ฒญ์ ์ํํ๊ธฐ ์ํด ๋ฐฑ์๋์์ ๋ง๋ค์ด ์ค ํจ์๋ผ๊ณ ํ ์ ์๋ค.
๋ฐฑ์๋์์๋ API๋ฅผ ๋ง๋๋ ๋ฐฉ์์ด Rest์ GraphQL ์ด๋ ๊ฒ ๋๊ฐ์ง ๋ฐฉ์์ด ์๋ค. ๋ง๋ ๋ฐฉ์์ ๋ฐ๋ผ ์ฌ์ฉํ๋ ๋ฐฉ์๋ ๋ฌ๋ผ์ง๋ค.
์ฐ์ rest-API ์ graphql-API๋ฅผ ๋น๊ตํด๋ณด์.
์ผ๋จ rest API๋ ์ฃผ์์ฒ๋ผ ์๊ฒผ๊ณ graphql API๋ ์ผ๋ฐ ํจ์์ฒ๋ผ ์๊ฒผ๋ค.
๋๋ฒ์งธ๋ก ๋๋ค HTTP๋ผ๋ ๊ธธ์ด ์๊ธฐ๋ ๊ฒ์ ๋๊ฐ์ง๋ง ๋ด๋น์์ ์ด๋ฆ์ด ๋ค๋ฅด๋ค๋ ์ฐจ์ด๊ฐ ์๋ค.
rest- axios
graphQL- apollo client
๋ํ rest๋ ์ํ๋ ์์น์๋ ๋ชจ๋ ์ ๋ณด๋ฅผ ๋ค ๋ฐ์์์ผ ํ๋ค.
๋ฐ๋ฉด์ graphQL์ ์ํ๋ ์ ๋ณด๋ง ๋ฐ์ ์ฌ ์ ์๋ค๋ ํฐ ์ฅ์ ์ด ์๋ค.
๊ตญ๋ด์ ํ์ฌ๋ค์ rest-API์ ๋น์จ์ด ๋๊ณ ์ผ๋ฐ์ ์ธ Open API๋ ๋ณดํต rest API์ด๊ธฐ ๋๋ฌธ์ ๋ ๋ค ์์์ผ ํ๋ค.
์ด๋ ๊ฒ ์ฃผ๊ณ ๋ฐ๋ ๋ฐ์ดํฐ๋ค์ JSON ๋ฐ์ดํฐ(์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด ํ๊ธฐ๋ฒ)๋ผ๊ณ ํ๋ค.
์ค์ ๋ก๋ ๊ฐ์ฒด๋ฅผ ๋ฌธ์์ด๋ก ๋ฐ๊ฟ์("") ์ฃผ๊ณ ๋ฐ๋๋ฐ ์ด ์ด์ ๋ HTTP๊ฐ ํ
์คํธ ๋๋ HTML์ ์ฃผ๊ณ ๋ฐ๋ ๊ธธ์ด๊ธฐ ๋๋ฌธ์ด๋ค.
ํ๋์ ๊ธฐ๋ฅ์ ๋ง๋ ๋ค๊ณ ํ๋ฉด ์ ์ด๋ 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๋ก ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ค๋ ๋ฐฉ์์ด๋ค.
๋ฐ์ดํฐ ์ ์ก์ ์ค์ตํ๋ ค๋ฉด ์ค๋ช
์(API-Docs)์ ์ฐ์ต๋๊ตฌ๊ฐ ํ์ํ๋ค.
rest-API๋ ํฌ์คํธ๋งจ(์ฐ์ต๋๊ตฌ), ์ค์จ๊ฑฐ(์ค๋ช ์) ๋ฐ๋ก์์ง๋ง graphql-API๋ ํ๋ ์ด๊ทธ๋ผ์ด๋ ํ ํ๋ฉด์ ํฉ์ณ์ ธ ์๋ค.
ํฌ์คํธ๋งจ : https://www.postman.com/ ์์ ํฌ์คํธ๋งจ ํ๋ก๊ทธ๋จ ์ค์น
์ค์จ๊ฑฐ :
API Docs๋ฅผ ๋ณด๊ณ API๋ฅผ ์์ฒญํ๋ค.
์๋ ์คํ API๋ฅผ ์ฌ์ฉํด๋ณด์.
https://koreanjson.com/ ํ๊ตญ์ด ๋ฐ์ดํฐ๋ฅผ ์ ๊ณตํ๋ ์ด๊ฐ๋จ JSON API.
API์ฃผ์๋ฅผ https๋ถํฐ ์
๋ ฅํด์ฃผ๊ณ ์ํ๋ ์ ๋ณด์ Endpoint๋ฅผ ์
๋ ฅํด API๋ฅผ ์์ฒญํ๋ค.
์ด ๊ฒฐ๊ณผ(๊ฐ์ฒด)๋ฅผ result์ ๋ด์ผ๋ฉด result.title, result.content ... ๋ฑ ์ผ๋ก ์ฌ์ฉํ ์ ์๋ค.
mutation ์ ์ก์ ํด๋ณด์๋ค.
Docs ๋ณด๊ธฐ์ ์คํ์ ํ ํ์ด์ง์์ ํ ์ ์์ด์ ํธ๋ฆฌํ๋ค.