ITstudy

API Param vs Query Parameter ๊ฐœ๋…๊ณผ ์ฐจ์ด

martinooo 2024. 5. 21. 22:28
728x170

๐Ÿคท‍โ™‚๏ธ ๋ณธ๋ก ์— ์•ž์„œ


์ตœ๊ทผ์— ์ƒˆ๋กœ์šด ์กฐ์ง์—์„œ ํ’€์Šคํƒ์œผ๋กœ ํ”„๋ก ํŠธ & ๋ฐฑ์—”๋“œ ์—…๋ฌด๋ฅผ ๋‹ด๋‹น์„ ๋งก์œผ๋ฉด์„œ ์ƒˆ๋กœ์šด ๊ธฐ์ˆ ์Šคํƒ๊ณผ ์•„ํ‚คํ…์ฒ˜ ๊ทธ๋ฆฌ๊ณ  ํŒ€ ์ปจ๋ฒค์…˜๊ณผ ์—…๋ฌด๋ฐฉ์‹์„ ์ ์‘ํ•˜๋ฉด์„œ ์ƒˆ๋กœ์šด ๊ฒƒ์— ๋Œ€ํ•ด์„œ ๋งŽ์€ ์Šต๋“๊ณผ ๊ณต๋ถ€๋ฅผ ํ•˜๊ณ ์žˆ์Šต๋‹ˆ๋‹ค.

 

์ตœ๊ทผ์— ๋ฐฑ์—”๋“œ REST API๋ฅผ ๋‹ด๋‹นํ•˜๋ฉด์„œ Param & Query Parameter์— ๋Œ€ํ•œ ์ฐจ์ด์— ๋Œ€ํ•ด์„œ ๊นŠ์ด ์ƒ๊ฐ์„ ํ•˜๊ฒŒ ๋˜๋ฉด์„œ ์–ด๋– ํ•œ ์„ค๊ณ„๊ฐ€ ์ข‹์€ ๋ฐฉ์‹์ธ์ง€ ์•„๋‹Œ์ง€ ๊ณ ๋ฏผ์„ ํ•˜๊ฒŒ ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

 

๐Ÿคท‍โ™‚๏ธ Param & Query Parameter ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์˜ ์ฐจ์ด?


API GET ๋ฉ”์†Œ๋“œ ์ข…๋ฅ˜

API ์š”์ฒญ์— GET ๋ฉ”์†Œ๋“œ๋ฅผ ์ปจํŠธ๋กคํ•˜๊ธฐ ์œ„ํ•œ 2๊ฐ€์ง€ ํ˜•ํƒœ๋ฅผ ๋‹ด๊ณ ์žˆ๋‹ค.

  • Param
  • Query

 

300x250

 

Param?

  • ์ฃผ์†Œ์— ํฌํ•จ๋œ ๋ณ€์ˆ˜์˜ ๊ฐ’์„ ์ฒ˜๋ฆฌํ•ฉ๋‹ˆ๋‹ค.
  • http://localhost:3000/blog/8763 ์ฃผ์†Œ์—์„œ 8763 ๊ฐ’์„ Path Parameter ๋ถ€๋ฆ…๋‹ˆ๋‹ค.
  • ์„œ๋ฒ„์—์„œ๋Š” /:blogId ์ด๋Ÿฐ ํ˜•ํƒœ๋กœ ๋ผ์šฐํ„ฐ ๊ฐ’์„ ๋ฐ›์•„์™€์„œ ์ฒ˜๋ฆฌ ํ• ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ํ•„ํ„ฐ๋ง or ์ •๋ ฌ ์ฒ˜๋Ÿผ ์˜ต์…”๋„ํ•œ ๊ฐ’์ด ์•„๋‹Œ ์œ ์ผํ•œ ๊ฐ’์„ ์‹๋ณ„ํ• ๋•Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

 

Query?

  • URL ๋์— ? ๋ฌผ์Œํ‘œ ๋’ค์— ๋‚˜ํƒ€๋‚˜๋Š” ๊ฐ’ http://localhost:3000/blog?type=all&lang=kr ? ๋’ค์— key์™€ value ํ˜•ํƒœ๋กœ &(and) ๊ธฐํ˜ธ๋กœ key=value ํ˜•ํƒœ๋กœ ๊ตฌ๋ถ„๋ฉ๋‹ˆ๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์€ ์ƒํ™ฉ์—์„œ ๋งŽ์ด ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.
    • ๋ฐ์ดํ„ฐ ํ•„ํ„ฐ๋ง
    • ๋ฐ์ดํ„ฐ ์ •๋ น
    • ๊ฒ€์ƒ‰
    • ๋ฐ์ดํ„ฐ ํŽ˜์ด์ง€๋„ค์ด์…˜
  • ํ•„์š”ํ•œ ์กฐ๊ฑด์„ ์š”์ฒญ์— ์ฒ˜๋ฆฌํ•ด์•ผ ๋˜๋Š” ์ƒํ™ฉ์—์„œ ํ•„์ˆ˜๊ฐ’์ด ์•„๋‹Œ ์˜ต์…”๋„ํ•œ ๊ฐ’์ผ๋•Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

 

๊ฐ™์ด ๊ณต๋ถ€ํ•˜๋ฉด ์ข‹์€ URL ์ธ์ฝ”๋“œ์™€ ๋””์ฝ”๋“œ ๋ณ€ํ™˜ํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ ๊ฐœ๋…

https://cometruedream.tistory.com/225

 

URL ์ธ์ฝ”๋“œ์™€ ๋””์ฝ”๋“œ ๋ณ€ํ™˜ํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ ๊ฐœ๋…

๐Ÿฃ์ธ์ฝ”๋”ฉ & ๋””์ฝ”๋”ฉ ์ด๋ž€? Encoding: ์ธ์ฝ”๋”ฉ์ด๋ž€ ์‚ฌ๋žŒ์ด ์ธ์‹ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฌธ์ž์—ด์„ ๋ฐ”์ดํŠธ ํ˜•์‹์œผ๋กœ ๋ณ€ํ™˜ ํ•˜๋Š” ๊ณผ์ • Decoding: ๋””์ฝ”๋”ฉ์ด๋ž€ ์ธ์ฝ”๋”ฉ๊ณผ ๋ฐ˜๋Œ€ ๊ฐœ๋…์œผ๋กœ ๋ฐ”์ดํŠธ ํ˜•์‹์„ ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ ํ•˜๋Š”

cometruedream.tistory.com

 

 

๐Ÿคท‍โ™‚๏ธ Param & Query ์ฐจ์ด?


Param๊ณผ Query์— ์ฐจ์ด์— ๋Œ€ํ•ด์„œ ์ƒ๊ฐํ•ด๋ณด๋ฉด ๊ฒฐ๋ก ์ ์œผ๋กœ๋Š” ํŒ€์˜ ์ปจ๋ฒค์…˜๊ณผ ๋ฌธํ™”๋ฅผ ๋งž์ถฐ์„œ API URI ์„ค๊ณ„ํ•˜๋Š”๊ฒƒ์ด ๊ฐ€์žฅ ์ข‹์€ ๋ฐฉ์‹์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

์†Œ์†๋œ ๋ณธ๋ถ€ ํ˜น์€ ํŒ€์— ํŠน๋ณ„ํ•œ ๊ทœ์น™์ด ์—†๋‹ค๋ฉด ํ•„์ˆ˜ ๊ฐ’์ด ์š”๊ตฌ๋˜๋Š” ์ƒํ™ฉ์—๋Š” Param์„ ์‚ฌ์šฉํ•˜๊ณ  ์˜ต์…˜๋„ํ•œ ๊ฐ’์ด ํ•„์š”ํ• ๋•Œ๋Š” Query๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

 

๋”ํ•ด์„œ, ํ•„์ˆ˜๊ฐ’๊ณผ ์˜ต์…”๋„ํ•œ ๊ฐ’์˜ ์ฐจ์ด๋„ ์žˆ์ง€๋งŒ ๊ฐ€๋…์„ฑ์˜ ์ฐจ์ด๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

 

1: /blog?id=kefef

vs

2: /blog/kefef

 

* ์œ„์— URI ํ˜•ํƒœ๋ฅผ ๋ณด๋ฉด 1๋ฒˆ์˜ Queryํ˜•ํƒœ๊ฐ€ ๋ฌด์Šจ์˜๋ฏธ์ธ์ง€ ์ง๊ด€์ ์œผ๋กœ ๋‚˜ํƒ€๋ƒ…๋‹ˆ๋‹ค.

 

 

 

 

 

๋‘๊ฐœ์˜ URI๋ฅผ ๋ดค์„๋•Œ ๊ฐ€๋…์„ฑ ๋ฉด์—์„œ๋Š” 1๋ฒˆ URI๊ฐ€ ์ง๊ด€์ ์ด๊ณ  ๊ฐ€๋…์„ฑ๋ฉด์—์„œ ์ข‹์Šต๋‹ˆ๋‹ค.

๊ทธ์— ๋น„ํ•ด 2๋ฒˆ์งธ URI๋Š” ์ง๊ด€์ ์œผ๋กœ ๋ฌด์Šจ ์˜๋ฏธ์ธ์ง€๋ฅผ 1๋ฒˆ URI ๋ณด๋‹ค ๊ฐ€๋…์„ฑ์ด ์ข‹์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

Param ๋ณด๋‹ค๋Š” Query ์ง๊ด€์ ์ด๊ณ  ๊ฐ€๋…์„ฑ๋ฉด์—์„œ ๋” ์ข‹๋‹ค๊ณ  ํŒ๋‹จ๋ฉ๋‹ˆ๋‹ค.

 

๊ฐ€๋…์„ฑ๊ณผ ์ง๊ด€์ ์ธ ๋ถ€๋ถ„์˜ ๊ธฐ์ค€์€ ์ฃผ๊ด€์ ์ด๊ธฐ ๋•Œ๋ฌธ์— ํŒ€์˜ ์ปจ๋ฒค์…˜ ํ˜น์€ ๋ฌธํ™”์— ๋งž์ถฐ์„œ API ์„ค๊ณ„๋ฅผ ๋”ฐ๋ฅด๊ฑฐ๋‚˜ ํŒ€์— ๊ทœ์น™์ด ์—†๋‹ค๋ฉด REST API ์ •์„์„ ๋”ฐ๋ฅด๋ฉด์„œ URI๋ฅผ ์„ค๊ณ„ํ•˜๋ฉด ์ข‹์„๊บผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

 

๐Ÿคท‍โ™‚๏ธ Param & Query ์ •๋ฆฌํ•˜์ž๋ฉด


Param & Query Parameter ์ค‘์— API URI๋ฅผ ์–ด๋–ป๊ฒŒ ์„ค๊ณ„ํ• ์ง€ ๊ณ ๋ฏผ์ด ๋ ๋•Œ๋Š” REST API ์ •์„์„ ๋”ฐ๋ฅด๋ฉด Param ์œ ์ผํ•œ ๊ฐ’์— ์ •์˜๊ฐ€ ํ•„์š”ํ• ๋•Œ Query ์˜ต์…”๋„ํ•œ ๊ฐ’์˜ ์ •์˜๊ฐ€ ํ•„์š”ํ• ๋•Œ ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

 

 


 

์žฌ๋ฐŒ๋Š” ์˜ค๋Š˜์˜ ๋ ๋ณ„ ์šด์„ธ ๋ณด๊ณ  ๊ฐ€์„ธ์š”! 

 

 

 

https://cometruedream.tistory.com/243

 

NestJS Lifecycle (์ƒ๋ช…์ฃผ๊ธฐ) ๊ฐœ๋…

๐Ÿคท‍โ™‚๏ธ ๋ณธ๋ก ์— ์•ž์„œ Nest JS ๊ฐœ๋…?Nest JS๋Š” Node JS ๊ธฐ๋ฐ˜์œผ๋กœ ํ•œ ์„œ๋ฒ„ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ํ”„๋ ˆ์ž„์›Œํฌ ์ž…๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์ƒ๋‹นํžˆ ์˜ค๋žซ๋™์•ˆ Express ๊ธฐ๋ฐ˜์œผ๋กœ ์„œ๋ฒ„ ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์—์„œ ์••๋„์ ์ธ ์ 

cometruedream.tistory.com

 

 

https://cometruedream.tistory.com/242

 

๋ฆฌ์•กํŠธ Vite Proxy ํ™œ์šฉํ•œ CORS ์˜ค๋ฅ˜ ํ•ด๊ฒฐ

๐Ÿคท‍โ™‚๏ธ ๋ณธ๋ก ์— ์•ž์„œํ”„๋ก ํŠธ์—”๋“œ ๋ฒˆ๋“ค๋Ÿฌ ๊ฐœ๋…๊ณผ webpack vs vite ๋น„๊ต์— ๋Œ€ํ•ด์„œ ๊ณต๋ถ€๋ฅผ ํ•˜๊ณ  ๊ธ€์„ ๋ณด์‹œ๋ฉด ๋” ๋งŽ์€ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค^^ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์„ ์œ„ํ•œ ๋ฒˆ๋“ค๋Ÿฌ ๊ฐœ๋…๊ณผ webpack vs vite ๋น„๊ตhttps://comet

cometruedream.tistory.com

 

 

https://cometruedream.tistory.com/241

 

React ํด๋”๊ตฌ์กฐ FSD ๊ธฐ๋Šฅ ๋ถ„ํ™œ ์„ค๊ณ„ ์•„ํ‚คํ…์ฒ˜

๐Ÿคท‍โ™‚๏ธ ๋ณธ๋ก ์— ์•ž์„œํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๊ธฐ์— ์•ž์„œ ํด๋” ๊ตฌ์กฐ, ์„ค๊ณ„์— ๋Œ€ํ•œ ์•„ํ‚คํ…์ฒ˜๋ฅผ ๋งŒ๋“œ๋Š” ๊ฒƒ์€ ์ƒ๋‹นํžˆ ์–ด๋ ต๋‹ค. ์ด๋ฒˆ ํ”„๋กœ์ ํŠธ์— React FSD ํด๋”๊ตฌ์กฐ ์•„ํ‚คํ…์ฒ˜๋ฅผ ์„ค๊ณ„ํ•  ์˜ˆ์ •์ด๋ผ์„œ FSD ์•„ํ‚คํ…

cometruedream.tistory.com

 

 

https://cometruedream.tistory.com/244

 

์‰ฝ๊ฒŒ ์ดํ•ดํ•˜๊ณ  ์‚ฌ์šฉํ• ์ˆ˜ ์žˆ๋Š” Prisma ๋ช…๋ น์–ด ์ •๋ฆฌ

๐Ÿคท‍โ™‚๏ธ Prisma ๋ช…๋ น์–ด ๋ณธ๋ก ์— ์•ž์„œ Prisma๋ž€?Nest JS ํ”„๋ ˆ์ž„์›Œํฌ์™€ Prisma ORM์„ ํ™œ์šฉํ•ด์„œ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ Prisma๋Š” Node JS ๊ธฐ๋ฐ˜์— ํ”„๋ ˆ์ž„์›Œํฌ/๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์™€ ์ƒํ˜ธ์ž‘์šฉ์ด ์ž˜๋˜๋ฉฐ Prisma + DB ์—ฐ๋™์œผ

cometruedream.tistory.com

 

 

๊ทธ๋ฆฌ๋“œํ˜•