REST API๋? (+์์ธ ์ค๋ช ๊น์ง)
๐ถ REST API๋?
REST๋ REpresentational State Transfer์ ์ฝ์์ด๊ณ ,
REST API๋ ์ด REST ์์น์ ๋ฐ๋ฅด๋ ์น API๋ฅผ ์๋ฏธํด์.
๐น REST์ ํต์ฌ ๊ฐ๋
๐ ์์(Resource)
- ์๋ฒ์ ์กด์ฌํ๋ ๋ฐ์ดํฐ๋ ๊ธฐ๋ฅ
- ์: ๊ฒ์๊ธ, ์ฌ์ฉ์, ์ํ ๋ฑ
๐ ์์์ ์ ๊ทผํ๋ ๋ฐฉ๋ฒ: URL (์๋ํฌ์ธํธ)
GET /users → ๋ชจ๋ ์ฌ์ฉ์ ๋ชฉ๋ก
GET /users/1 → ID๊ฐ 1์ธ ์ฌ์ฉ์ ์ ๋ณด
POST /users → ์ฌ์ฉ์ ์์ฑ
PUT /users/1 → ID 1๋ฒ ์ฌ์ฉ์ ์ ๋ณด ์์
DELETE /users/1 → ID 1๋ฒ ์ฌ์ฉ์ ์ญ์
๐ ํ์(๋์): HTTP ๋ฉ์๋
- GET: ๋ฐ์ดํฐ ์กฐํ
- POST: ๋ฐ์ดํฐ ์์ฑ
- PUT ๋๋ PATCH: ๋ฐ์ดํฐ ์์
- DELETE: ๋ฐ์ดํฐ ์ญ์
๐น REST API๋ ์ด๋ฐ ํน์ง์ ๊ฐ์ง
์์น | ์ค๋ช |
ํด๋ผ์ด์ธํธ-์๋ฒ ๊ตฌ์กฐ | ํ๋ก ํธ(React ๋ฑ)์ ๋ฐฑ์๋(Spring, Node ๋ฑ)๊ฐ ๋ถ๋ฆฌ๋์ด ๋ ๋ฆฝ์ ์ผ๋ก ๋์ |
๋ฌด์ํ์ฑ(Stateless) | ์๋ฒ๋ ์์ฒญ์ ์ฒ๋ฆฌํ ๋ ์ด์ ์์ฒญ ์ํ๋ฅผ ๊ธฐ์ตํ์ง ์์ (์์ฒญ๋ง๋ค ๋ชจ๋ ์ ๋ณด ํฌํจ) |
์์ ๊ธฐ๋ฐ | URL์ ์์์ ํํ (์: /posts, /users) |
์ผ๊ด๋ ์ธํฐํ์ด์ค | ๊ฐ์ ๋ฐฉ์์ผ๋ก ์์์ ์ ๊ทผํ๊ณ ์กฐ์ (HTTP ๋ฉ์๋ ๊ธฐ๋ฐ) |
๐งฉ REST API ์ฝ๊ฒ ์ดํดํ๊ธฐ (์์ ์ค์ฌ ์ค๋ช )
๐ฏ ์์ ์ํฉ: "๋ธ๋ก๊ทธ ์์คํ "
์ฌ์ฉ์๋ ๋ธ๋ก๊ทธ ๊ธ์ ๋ณด๊ณ , ์์ฑํ๊ณ , ์์ ํ๊ณ , ์ญ์ ํ ์ ์์. ์ด๊ฑธ ๊ธฐ๋ฐ์ผ๋ก REST์ ํน์ง์ ์ค๋ช ํด๋ณผ๊ฒ์.
1. โ ์์(Resource) ๊ธฐ๋ฐ ๊ตฌ์กฐ
REST์์๋ URL์ด ์์์ ๋ํ๋ด๊ณ , ๋์์ HTTP ๋ฉ์๋๋ก ๊ตฌ๋ถํฉ๋๋ค.
๋์ | REST URL | ์ค๋ช |
---|---|---|
์ ์ฒด ๊ธ ์กฐํ | GET /posts |
๊ธ ๋ชฉ๋ก ๊ฐ์ ธ์ค๊ธฐ |
ํน์ ๊ธ ์กฐํ | GET /posts/7 |
ID 7๋ฒ ๊ธ ๋ณด๊ธฐ |
๊ธ ์์ฑ | POST /posts |
์ ๊ธ ์์ฑ |
๊ธ ์์ | PUT /posts/7 |
ID 7๋ฒ ๊ธ ์์ |
๊ธ ์ญ์ | DELETE /posts/7 |
ID 7๋ฒ ๊ธ ์ญ์ |
2. โ ๋ฌด์ํ์ฑ (Stateless)
์๋ฒ๋ ํด๋ผ์ด์ธํธ์ ์ํ๋ฅผ ์ ์ฅํ์ง ์์ต๋๋ค. ๋งค ์์ฒญ๋ง๋ค ์ธ์ฆ ์ ๋ณด ๋ฑ์ ๋ชจ๋ ํฌํจ์์ผ์ผ ํด์.
GET /posts/7
Authorization: Bearer abc.def.ghi
3. โ ์ผ๊ด๋ ์ธํฐํ์ด์ค
์์๋ง๋ค CRUD ๋ฐฉ์์ด ๋์ผํฉ๋๋ค. ์์ธกํ๊ธฐ ์ฝ๊ณ ๋ฌธ์ํ๋ ํธํฉ๋๋ค.
๋์ | HTTP | URL ์์ |
---|---|---|
์กฐํ | GET | /posts, /users, /comments |
์์ฑ | POST | /posts, /users |
์์ | PUT | /posts/1, /users/3 |
์ญ์ | DELETE | /posts/2 |
4. โ ํด๋ผ์ด์ธํธ-์๋ฒ ๋ถ๋ฆฌ
React๋ UI๋ง ์ฒ๋ฆฌํ๊ณ , ์๋ฒ๋ JSON ๋ฐ์ดํฐ๋ง ์๋ตํฉ๋๋ค.
axios.get('https://api.myblog.com/posts/7')
.then(res => setPost(res.data));
{
"id": 7,
"title": "REST API๊ฐ ๋ญ์ง?",
"content": "์ฝ๊ฒ ์ค๋ช
ํด๋๋ฆด๊ฒ์!"
}
5. โ ์บ์ ์ฒ๋ฆฌ
ํด๋ผ์ด์ธํธ๋ ์๋ฒ์ ์๋ต์ ์บ์ฑํ ์ ์์ด์ผ ํฉ๋๋ค. ์์ฃผ ๋ณ๊ฒฝ๋์ง ์๋ ๋ธ๋ก๊ทธ ๋ชฉ๋ก ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ์บ์ํ๋ฉด ์๋ฒ ๋ถํ๋ฅผ ์ค์ผ ์ ์์ต๋๋ค.
Cache-Control: max-age=3600
6. โ ๊ณ์ธต ๊ตฌ์กฐ
API ์์ฒญ์ ๋ณด์, ์บ์, ๋ก๊น ๋ฑ์ ๋ด๋นํ๋ ์ฌ๋ฌ ๊ณ์ธต์ ๊ฑฐ์น ์ ์์ด์.
์: React ์ฑ → Nginx(SSL ์ฒ๋ฆฌ) → API ์๋ฒ → DB
7. โ Code on Demand (์ ํ์ฌํญ)
์๋ฒ๋ ํ์์ ํด๋ผ์ด์ธํธ์๊ฒ ์๋ฐ์คํฌ๋ฆฝํธ๋ HTML ์กฐ๊ฐ ๋ฑ ์คํ ๊ฐ๋ฅํ ์ฝ๋๋ฅผ ์ ๋ฌํ ์ ์์ด์ผ ํฉ๋๋ค. (์์ฃผ ์ฌ์ฉ๋์ง ์์)
์๋ฒ ์๋ต: <script>alert("๊ณต์ง์ฌํญ์ ํ์ธํ์ธ์!");</script>
๐ ์ ๋ฆฌ
ํน์ง | ์์ ๊ธฐ๋ฐ ์ค๋ช |
---|---|
์์ ๊ธฐ๋ฐ | /posts , /users , /comments ๊ฐ์ ๋ช
์ฌ URL |
๋ฌด์ํ์ฑ | ์์ฒญ๋ง๋ค ์ธ์ฆ ์ ๋ณด ๋ฑ ์ํ ํฌํจ |
์ผ๊ด๋ ์ธํฐํ์ด์ค | CRUD ๊ท์น์ด ์์๋ง๋ค ๋์ผ |
์ธํฐํ์ด์ค ์ผ๊ด์ฑ | ํ์คํ๋ URI์ ๋ฉ์๋๋ก API ์ผ๊ด์ฑ ์ ์ง |
ํด๋ผ์ด์ธํธ-์๋ฒ ๋ถ๋ฆฌ | React๋ UI, ์๋ฒ๋ JSON ์๋ต |
์บ์ ๊ฐ๋ฅ | ๋ธ๋ก๊ทธ ๋ชฉ๋ก ๋ฑ ์๋ต์ ์บ์ํด ์ฌ์ฌ์ฉ |
๊ณ์ธต ๊ตฌ์กฐ | ์ค๊ฐ ํ๋ก์, ์ธ์ฆ, ์บ์ ๊ณ์ธต ๊ฐ๋ฅ |
Code on Demand | ์๋ฒ๊ฐ ์คํ ๊ฐ๋ฅํ JS ์ฝ๋ ์ ๋ฌ ๊ฐ๋ฅ (์ต์ ) |