DEV/Java + Spring Boot

REST API๋ž€? (+์ƒ์„ธ ์„ค๋ช… ๊นŒ์ง€)

๊น€์Šˆ๊ฐ€ 2025. 5. 19. 16:18
728x90
๋ฐ˜์‘ํ˜•
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 ์ฝ”๋“œ ์ „๋‹ฌ ๊ฐ€๋Šฅ (์˜ต์…˜)
728x90
๋ฐ˜์‘ํ˜•