API๋ Application Programming Interface์ ์ค์๋ง๋ก ๋ค์ํ ์์ฉ ํ๋ก๊ทธ๋จ์์ ์ฌ์ฉํ ์ ์๋๋ก, ์ด์์ฒด์ ๋ ํ๋ก๊ทธ๋๋ฐ ์ธ์ด๊ฐ ์ ๊ณตํ๋ ๊ธฐ๋ฅ์ ์ ์ดํ ์ ์๊ฒ ๋ง๋ ์ธํฐํ์ด์ค์ด๋ค.
์ฆ, ํ๋ก๊ทธ๋จ๊ณผ ํ๋ก๊ทธ๋จ์ ์ฐ๊ฒฐํด ์ฃผ๋ ๋ค๋ฆฌ ์ญํ ์ด๋ผ๊ณ ์ดํดํ ์ ์๋ค.
๋ชจ๋ ์น ๋ธ๋ผ์ฐ์ ์ ์๋ ์ ๋ณด์ ์ ๊ทผํ ๋์๋ URL์ ํตํด ์ ๊ทผํ๋ค. ์ด๋ฅผ ๋ค์ง์ ๋งํ๋ฉด URL์ ๋ชจ๋ฅธ๋ค๋ฉด ํด๋น ์ ๋ณด์ ์ ๊ทผ ํ ์ ์๋ค.
์ด๊ฒ์ด ํ์ฌ ์ฌ์ฉํ๊ณ ์๋ WWW(World Wide Web)์ ๊ธฐ๋ณธ์ ์ธ ํ์ด๋ค.
์๋ฅผ ๋ค์ด, ๊ฐ์ฅ ์ ๋ช ํ ์น ํฌํธ์ธ https://google.com/ ์ด ๊ตฌ๊ธ์ URL์ด๊ณ , ์์ ๋ถ์ https๋ ์น์ ํต์ ๊ท์ฝ์ ์๋ฏธํ๋ค.
์น ์์์ ์ ๋ณด๋ฅผ ์์ฑํ๊ณ ๊ฐ๊ณตํ๋ ์ฃผ์ฒด๊ฐ ์๊ณ , ๊ทธ ์ ๋ณด์ ์ ๊ทผํ๋ ค๋ ๊ฐ์ฒด๊ฐ ์กด์ฌํ๋ค. ๊ฐ์ฒด๊ฐ URL์ ํตํด ์ ๋ณด๋ฅผ ์์ฒญํ๋ฉด, ์ฃผ์ฒด๋ ์์ฒญํ ์ ๋ณด๋ฅผ ๊ฐ์ฒด์๊ฒ ๋ค์ ์ ๋ฌํด์ค๋ค.
HTTP๋ ๋ฐ๋ก ์ด๋ฌํ ์น์ ํต์ ๊ท์น์ด๋ค.
HTTP๋ Hypertext Transfer Protocol์ ์ฝ์์ด๋ค.
์น ๋ธ๋ผ์ฐ์ ์ ์ฃผ์์ฐฝ์ URL์ ์ ๋ ฅํ๋ฉด ๊ทธ์ ํด๋นํ๋ ๋ฐ์ดํฐ๋ฅผ ์์ฒญํ๊ณ ๋ณด์ฌ์ฃผ๋ ๊ฒ์ ๋ธ๋ผ์ฐ์ ์ ์ญํ ์ด๋ค. ์์ฒญ ๋ฐ์ ๋ฐ์ดํฐ๋ฅผ ๊ฐ์ ธ์ค๋ ๊ฒ์ ์น ์๋ฒ์ ์ญํ ์ด๊ณ HTTP๋ ์ด๋ฌํ Client์ Server ๊ฐ์ ํต์ ๊ท์น์ด๋ค. ์ด๋, Client์ ์์ฒญ์ HTTP Request, ์๋ฒ์ ์๋ต์ HTTP Response๋ผ๊ณ ํ๋ค.
HTTP ํต์ ์ ์ํด ์๋์ ๊ฐ์ Method๋ค์ ์ ๊ณตํ๋ค.
- GET: ์ํธํ๋์ง ์์ ํํ์ ๋ฐ์ดํฐ๋ฅผ ์๋ฒ๋ก ์ ์กํ๋๋ฐ ์ฌ์ฉ๋๋ ๊ฐ์ฅ ์ผ๋ฐ์ ์ธ method.
- HEAD: GET๊ณผ ์ ์ฌํ ๋ฐฉ๋ฒ์ผ๋ก Response Body๋ฅผ ํฌํจํ์ง ์๊ณ ์ฌ์ฉํ๋ค.
- POST: ํน์ ์์์ ๋ฐ์ดํฐ๋ฅผ ์ํธํํ์ฌ ์๋ฒ๋ก ์ ์กํ๋๋ฐ ์ฌ์ฉํ๋ค.
- PUT: ํน์ ๋์์ ๋ฐ์ดํฐ๋ฅผ ๊ฐฑ์ (Update)ํ๋๋ฐ ์ฌ์ฉํ๋ค.
- DELETE: URL์ ์ง์ ๋ ๋์์ ์ญ์ (Delete)ํ๋๋ฐ ์ฌ์ฉํ๋ค.
HTTP status code (์๋ต ์ํ ์ฝ๋)๋ ํน์ HTTP ์์ฒญ์ด ์ฑ๊ณต์ ์ผ๋ก ์๋ฃ๋์๋์ง ์๋ ค์ฃผ๋ ์ฝ๋์ด๋ค. ์ด ์๋ต์ 5๊ฐ์ ๊ทธ๋ฃน์ผ๋ก ๋๋์ด์ง๋ค. (์ํ ์ฝ๋์ ๋ํ์ฌ๋ section 10 of RFC 2616์ ์ ์๋์ด ์๋ค.)
- ์๋ต: 100
- ์ฑ๊ณต์ ์ธ ์๋ต: 200
- ๋ฆฌ๋ค์ด๋ ํธ: 300
- ํด๋ผ์ด์ธํธ ์๋ฌ: 400
- ์๋ฒ ์๋ฌ: 500
Axios๋ ์น ๋ธ๋ผ์ฐ์ ์ Node.js๋ฅผ ์ํ HTTP ๋น๋๊ธฐ(์ฝ๋์ ์์๋๋ก ์คํ๋์ง ์๋ ์ฒ๋ฆฌ) ํต์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค. ๋ฐฑ์๋์ ํ๋ก ํธ์๋ ๊ฐ ํต์ ์ ์ฝ๊ฒ ํ๊ธฐ ์ํด ์ฌ์ฉ๋๋ ๊ฒ์ผ๋ก Ajax์ฒ๋ผ ์ฌ์ฉ๋๋ ๊ฒ์ด๋ค. ๋น๋๊ธฐ ํต์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํ์ง ์์ผ๋ฉด ๋ชจ๋ ์ฝ๋๊ฐ ์์ฐจ์ ์ผ๋ก ์ฒ๋ฆฌ๋์ด์ผ ํ๊ธฐ ๋๋ฌธ์ ์ฝ๋์ ์์ฑ ์์์ ์ฃผ์๋ฅผ ๊ธฐ์ธ์ฌ์ผ ํ๋ค. ๋ค์ ๋งํ๋ฉด, ์ฝ๋์ ์์ฑ์ด ๋งค์ฐ ๋ณต์กํด์ง๋ ๊ฒ์ด๋ค. ๋ฐ๋ผ์, ๋น๋๊ธฐ ํต์ ์ ์ฝ๊ฒ ํด์ฃผ๋ Axios๋ Ajax ๊ฐ์ ๊ฒ์ด ์์ฃผ ์ฌ์ฉ๋๋ ๊ฒ์ด๋ค.
Ajax๋ ๋น๋๊ธฐ ์๋ฐ์คํฌ๋ฆฝํธ๋ผ๋ ์๋ฏธ๋ก Asynchronous JavaScript and
XML์ ์ฝ์์ด๋ค. Ajax๋ ๋ธ๋ผ์ฐ์ ๊ฐ ๊ฐ์ง๊ณ ์๋ XMLHttpRequest ๊ฐ์ฒด๋ฅผ ์ด์ฉํ์ฌ ํ๋ฉด ์ ์ฒด๋ฅผ ์๋ก ๊ณ ์นจ ํ์ง ์๊ณ ๋ณ๊ฒฝ๋ ์ผ๋ถ ๋ฐ์ดํฐ๋ง ๋ก๋ํ๋ ๋น๋๊ธฐ ์ฒ๋ฆฌ๊ฐ ๊ฐ๋ฅํ๋ค. Axios๋ React์์ ์ ๊ณตํ๋ Ajax์ ์ ์ฌํ๋ฉฐ OpenAPI๋ฅผ ์ด์ฉํ ํต์ ์ ํ ๋ ์ฃผ๋ก ์ฌ์ฉํ๋ค.
Axios๋ Promise๋ฅผ ๊ธฐ๋ฐ์ผ๋ก ๋ง๋ค์ด์ง ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ค. Promise๋ ์๋ฐ์คํฌ๋ฆฝํธ ES6์์ ๋น๋๊ธฐ ์ฒ๋ฆฌ๋ฅผ ์ํด ์ฃผ๋ก ์ฌ์ฉ๋๋ ๊ฐ์ฒด์ด๋ค.
CRUD๋ Create, Read, Update, Delete์ ์ ์ผ ์ ๋ฌธ์๋ฅผ ํ๋์ฉ ๋ฐ์ ๋ง๋ ์ค์๋ง๋ก, ๊ฐ๊ฐ์ ์๋์ ๊ฐ์ด ๋งค์นญ๋๋ค.
C: Create(์์ฑ) - POST
R: Read(์กฐํ) - GET
U: Update(์์ ) - PUT
D: Delete(์ญ์ ) - DELETE
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๋ก ๋๋ค๊ฒจ ๋ง์ ๊ธฐ์ต์ด ์๋ก์๋ก.