WEB

[WEB] REST APIλž€

developer of the night sky 2023. 11. 30. 06:03

REST πŸ”Ž

  • Representational State Transfer의 μ•½μž
  • μ›Ήμƒμ˜ μžμ›(λ¬Έμ„œ, 이미지, μ˜μƒ λ“±)을 μžμ›λͺ…μœΌλ‘œ ν‘œμ‹œν•˜μ—¬ μƒνƒœλ₯Ό μ£Όκ³  λ°›λŠ” κ·œμΉ™
  • HTTP URIλ₯Ό ν†΅ν•΄μ„œ μžμ›μ„ λͺ…μ‹œν•˜κ³ , HTTP Methodλ₯Ό ν†΅ν•΄μ„œ μžμ›μ— λŒ€ν•œ CRUD μ²˜λ¦¬ν•˜λŠ” 방식
  • URI(URL) ν‘œκΈ°ν•˜λŠ” 방식 쀑 ν•˜λ‚˜μ΄λ‹€.
  • URI와 HTTP Method λ₯Ό κ²°ν•©ν•œ 것이 REST API이닀.

 

URI ν‘œκΈ° 방식 λΉ„κ΅πŸ”Ž

예λ₯Όλ“€μ–΄ κ²Œμ‹œνŒμ„ κ΅¬ν˜„ν•  λ•Œ, 이전 λ°©μ‹μ—μ„œλŠ” 'http://localhost/board/list.do' 으둜 동사λ₯Ό μ΄μš©ν•΄μ„œ ν–‰μœ„ν•˜λŠ” 것을 ν‘œν˜„ν–ˆλ‹€.

- 이전 방식

νŽ˜μ΄μ§€  μš”μ²­ λ©”μ„œλ“œ μš”μ²­ μ£Όμ†Œ
λͺ©λ‘λ³΄κΈ° GET http://localhost/board/list.do
μΆ”κ°€ν•˜κΈ° POST http://localhost/board/add.do
μˆ˜μ •ν•˜κΈ° POST http://localhost/board/edit.do
μ‚­μ œν•˜κΈ° POST http://localhost/board/del.do

 

이 URI 방식은 가독성 및 λ‹€λ₯Έ μ—¬λŸ¬ 문제점이 λ§Žμ•„ λΆ„λΆ„ν•œ 의견이 λ§Žμ•˜λ‹€.

μ²΄κ³„μ μœΌλ‘œ ν‘œμ‹œν•˜μžλŠ” 의견이 λ§Žμ•„ νƒ„μƒν•œ 것이 REST 방식이닀.

 

- REST 방식

더이상 μ£Όμ†Œμ— 동사λ₯Ό λ„£μ§€μ•ŠλŠ”λ‹€. 단, μš”μ²­ λ©”μ„œλ“œλ₯Ό GET, POST 뿐만 μ•„λ‹ˆλΌ PUT, DELETE λ“± μ—¬λŸ¬κ°€μ§€λ₯Ό μ‚¬μš©ν•œλ‹€.

νŽ˜μ΄μ§€ μš”μ²­ λ©”μ„œλ“œ μš”μ²­ μ£Όμ†Œ
λͺ©λ‘λ³΄κΈ° GET http://localhost/board
μΆ”κ°€ν•˜κΈ° POST http://localhost/board
μˆ˜μ •ν•˜κΈ° PUT http://localhost/board/1
μ‚­μ œν•˜κΈ° DELETE http://localhost/board/1

 

 


REST API 섀계 κ·œμΉ™πŸ”Ž

1. URI λ§ˆμ§€λ§‰ 단어에 μžμ›λͺ…을 ν‘œμ‹œν•œλ‹€.

  • http://localhost/board
  • CRUDλŠ” μš”μ²­ λ©”μ„œλ“œλ₯Ό 톡해 μΈμ‹ν•˜κ³  λ§ˆμ§€λ§‰ λ‹¨μ–΄λ‘œ μžμ›λͺ…을 μΈμ‹ν•œλ‹€. 
  • λ‹¨μˆ˜ν˜•, λ³΅μˆ˜ν˜•μ€ 자유둭게 μ‚¬μš©ν•œλ‹€.

2. URI에 동사λ₯Ό ν‘œμ‹œν•˜μ§€ μ•ŠλŠ”λ‹€.

3. HTTP Methodλ₯Ό μ‚¬μš©ν•˜μ—¬ 2번 λŒ€μ‹  행동(동사)을 ν‘œν˜„ν•œλ‹€. β˜…

  • GET : μžμ› μš”μ²­
  • POST : μžμ› 전달 및 μ„œλ²„μΈ‘ 생성 μš”μ²­
  • PUT : μžμ› 전달 및 μˆ˜μ •(κΈ°μ‘΄ μžμ›μ„ μ‚­μ œ ν›„ μƒˆλ‘œ μƒμ„±ν•œλ‹€.) > 전체(λͺ¨λ“  컬럼)이 μˆ˜μ •λœλ‹€.
  • PATCH : μžμ› 전달 및 μˆ˜μ •(일뢀 μˆ˜μ • κ°€λŠ₯)
  • DELETE : μžμ› μ‚­μ œ

4. κ΅¬λΆ„μžλŠ” '/'λ₯Ό μ‚¬μš©ν•œλ‹€.

5. URL의 λ§ˆμ§€λ§‰μ€ '/'λ₯Ό 적지 μ•ŠλŠ”λ‹€.

  • ν†°μΊ£μ—μ„œλŠ” λ§ˆμ§€λ§‰μ— '/'λ₯Ό μžλ™μœΌλ‘œ λΆ™μ—¬μ€˜μ„œ μš°λ¦¬κ°€ '/'λ₯Ό 뢙여도 μ—λŸ¬κ°€ λ‚˜μ§€μ•Šμ§€λ§Œ, REST APIλ₯Ό μ΄μš©ν•  λ•ŒλŠ” 뢙이면 μ•ˆλœλ‹€.

6. URIμ—λŠ” '-' μ‚¬μš©μ΄ κ°€λŠ₯ν•˜λ‹€.

  • ꢌμž₯ν•˜μ§€ μ•ŠλŠ”λ‹€.

7. URIμ—λŠ” '_' μ‚¬μš©ν•˜μ§€ μ•ŠλŠ”λ‹€.

  • 곡백인지 언더라인인지 ꡬ뢄이 잘 κ°€μ§€ μ•Šμ•„ μ‚¬μš©μ„ μ§€μ–‘ν•œλ‹€. 

8. URI은 μ†Œλ¬Έμžλ‘œλ§Œ μž‘μ„±ν•œλ‹€.

9. ν™•μž₯자λ₯Ό μž‘μ„±ν•˜μ§€ μ•ŠλŠ”λ‹€.

  • URIκ°€ μžμ›λͺ…μœΌλ‘œ λλ‚˜κΈ° λ•Œλ¬Έμ— μž‘μ„±ν•˜μ§€ μ•ŠλŠ”λ‹€.

 


 

SSR와 CSR : νŽ˜μ΄μ§€ λ Œλ”λ§ λ°©μ‹πŸ”Ž

SSR(μ„œλ²„ μ‚¬μ΄λ“œ λ Œλ”λ§)κ³Ό CSR(ν΄λΌμ΄μ–ΈνŠΈ μ‚¬μ΄λ“œ λ Œλ”λ§)은 μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ—μ„œ νŽ˜μ΄μ§€λ₯Ό λ Œλ”λ§ν•˜λŠ” 두 κ°€μ§€ μ£Όμš” μ ‘κ·Ό 방식이닀.

- SSR

  • Server Side Rendering의 μ•½μž. 
  • λΈŒλΌμš°μ €(ν΄λΌμ΄μ–ΈνŠΈ)μ—μ„œ νŽ˜μ΄μ§€λ₯Ό μš”μ²­ν•˜λ©΄ μ„œλ²„μ—μ„œλŠ” μž‘μ—… 끝에 html νŽ˜μ΄μ§€λ₯Ό μƒμ„±ν•œλ‹€.
  • Html νŽ˜μ΄μ§€λ₯Ό λ§Œλ“œλŠ” μž‘μ—…μ„ λ Œλ”λ§ν•œλ‹€κ³  ν•˜λŠ”λ° μ„œλ²„κ°€ λ Œλ”λ§μ„ λ‹΄λ‹Ήν•œλ‹€.
  • κ°€μž₯ μ˜€λž˜λ˜μ—ˆμœΌλ©΄ μ•„μ§κΉŒμ§€ 메인 방식이닀.  

 

 

 

- CSR

  • Client Side Rendering의 μ•½μž.
  • λΈŒλΌμš°μ € 자체적으둜 νŽ˜μ΄μ§€λ₯Ό μƒμ‚°ν•˜λ©° JavaScriptλ₯Ό μ‚¬μš©ν•˜μ—¬ 좔가적인 데이터λ₯Ό μ„œλ²„λ‘œ μš”μ²­ν•˜κ³  λ™μ μœΌλ‘œ νŽ˜μ΄μ§€λ₯Ό λ Œλ”λ§ν•œλ‹€.
  • λΈŒλΌμš°μ € μžμ²΄μ—μ„œ νŽ˜μ΄μ§€λ₯Ό 생산할 수 μžˆλŠ” λŠ₯λ ₯이 μžˆμœΌλ―€λ‘œ CRUD λ§Œμ„ μ „λ¬Έμ μœΌλ‘œ ν•˜λŠ” μ„œλ²„λ₯Ό ν•„μš”λ‘œ ν•œλ‹€. 이런 μ„œλ²„λ₯Ό REST μ„œλ²„라고 ν•œλ‹€.

  • μ΅œκ·Όμ— μƒλŒ€μ μœΌλ‘œ 많이 λŠ˜μ–΄λ‚˜κ³  μžˆλ‹€. λ¦¬μ•‘νŠΈ, Vue.js κ°€ CSR λ°©μ‹μ΄λ‹€.