Liam
Liam
I'm studying ๐Ÿฅธ

form-data? x-www-form-urlencoded? raw?

form-data? x-www-form-urlencoded? raw?



๐Ÿ’ก Intro

Postman์„ ์‚ฌ์šฉํ•˜๋‹ค ๋ณด๋ฉด ์—ฌ๋Ÿฌ ๊ฐ€์ง€์˜ Content-Type์ด ์žˆ์Šต๋‹ˆ๋‹ค. form-data, x-www-form-urlencoded, Raw, Binary, GraphQL์ด ์žˆ๋Š”๋ฐ, ์˜ค๋Š˜์€ ์ด ์š”์ฒญ ์œ ํ˜•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๋ ค ํ•ฉ๋‹ˆ๋‹ค.



๐Ÿ”Ž ๋“ค์–ด๊ฐ€๊ธฐ์ „ Content-Type์ด๋ž€?

๐Ÿ“ Content-Type :

  • API ์—ฐ๋™์‹œ์—, ๋ณด๋‚ด๋Š” ์ž์›์˜ ํ˜•์‹์„ ๋ช…์‹œํ•˜๊ธฐ ์œ„ํ•ด์„œ HTTP Header์— ์‹ค๋ฆฌ๋Š” ์ •๋ณด๋ฅผ content-type์ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰, api ์š”์ฒญ ์‹œ request์— ์‹ค์–ด ๋ณด๋‚ด๋Š” data์˜ type์ •๋ณด๋ฅผ ํ‘œํ˜„ํ•ฉ๋‹ˆ๋‹ค.
  • content-type์— ๋Œ€ํ•œ ์ž์„ธํ•œ ์ •๋ณด๋Š” NAMP ๋‹˜์˜ HTTP Content-Type ์ •๋ฆฌ์— ์ž˜ ์ •๋ฆฌ๋˜์–ด์ ธ ์žˆ์œผ๋‹ˆ ์ •๋ณด๊ฐ€ ํ•„์š”ํ•˜์‹ ๋ถ„์€ ๋ฐฉ๋ฌธํ•ด์ฃผ์„ธ์š”!



๐Ÿ“š POST ์š”์ฒญ ์œ ํ˜•

๐Ÿ“• 1. form-data(์–‘์‹ ๋ฐ์ดํ„ฐ)

์ด๋ฆ„์—์„œ ์•Œ ์ˆ˜ ์žˆ๋“ฏ์ด ์–‘์‹ ๋ฐ์ดํ„ฐ๋Š” ์–‘์‹์„ ์ฑ„์šธ๋•Œ ์ž…๋ ฅ ํ•œ ์„ธ๋ถ€ ์ •๋ณด์™€ ๊ฐ™์ด ์–‘์‹ ๋‚ด๋ถ€์— ๋ž˜ํ•‘ํ•˜๋Š” ๋ฐ์ดํ„ฐ๋ฅผ ๋ณด๋‚ด๋Š”๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์„ธ๋ถ€ ์ •๋ณด๋Š” Key๊ฐ€ ๋ณด๋‚ด๋Š” ํ•ญ๋ชฉ์˜ โ€œ์ด๋ฆ„โ€ ์ด๊ณ  Value๋Š” ์‹ค์ œ ๊ฐ’์„ ์ž…๋ ฅํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค. ์ฆ‰, Key-Value ์Œ์œผ๋กœ ์ž‘์„ฑํ•˜์—ฌ ์ „์†ก๋ฉ๋‹ˆ๋‹ค.


form_1.png


๋˜ํ•œ, ํ…์ŠคํŠธ ๋ฟ๋งŒ์•„๋‹ˆ๋ผ ํŒŒ์ผ๊ณผ ํ•จ๊ป˜ ์ผ๋ถ€ ๋ฐ์ดํ„ฐ๋ฅผ ์„œ๋ฒ„์— ์ „์†กํ•˜๊ธฐ๋ฅผ ์›ํ•œ๋‹ค๋ฉด ์•„๋ž˜ GIF์™€ ๊ฐ™์ด form-data์—์„œ ์ˆ˜ํ–‰ํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.


form_2.gif



๐Ÿ“˜ 2. x-www-form-urlencoded

์š”์ฆ˜์€ ๋งŽ์ด ์‚ฌ์šฉํ•˜์ง€๋Š” ์•Š์ง€๋งŒ ์ข…์ข… ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค. form-data์™€ ๊ฑฐ์˜ ๋™์ผํ•œ ๋ชฉ์ ์œผ๋กœ ์‚ฌ์šฉ๋˜๋ฉฐ form-data์™€ ์ƒ๋‹นํžˆ ์œ ์‚ฌํ•ฉ๋‹ˆ๋‹ค. form-data์™€์˜ ์ฐจ์ด์ ์€ x-www-form-urlencoded๋Š” ๋ณด๋‚ด๋Š” ๋ฐ์ดํ„ฐ๋ฅผ URL์ธ์ฝ”๋”ฉ ์ด๋ผ๊ณ  ๋ถ€๋ฅด๋Š” ๋ฐฉ์‹์œผ๋กœ ์ธ์ฝ”๋”ฉ ํ›„์— ์›น์„œ๋ฒ„๋กœ ๋ณด๋ƒ…๋‹ˆ๋‹ค. ๋˜ํ•œ, Raw๋Š” ๋ณธ๋ฌธ ๋ฉ”์‹œ์ง€๊ฐ€ ์š”์ฒญ ๋ณธ๋ฌธ์„ ๋‚˜ํƒ€๋‚ด๋Š” ๋น„ํŠธ์ŠคํŠธ๋ฆผ(bitstream)์œผ๋กœ ํ‘œ์‹œ๋จ์„ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ๋น„ํŠธ๋Š” ๋ฌธ์ž์—ด ์„œ๋ฒ„๋กœ ํ•ด์„๋ฉ๋‹ˆ๋‹ค.


x-form_1.png



๐Ÿ“’ 3. raw

์ด๋ฆ„ ๊ทธ๋Œ€๋กœ ๋‚ ๊ฒƒ์ด๋ผ๊ณ  ํ•ด์„ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. raw๋ฅผ ์ œ์™ธํ•œ ๋‹ค๋ฅธ ํƒ€์ž…๋“ค์˜ ๊ฒฝ์šฐ ๊ฐ๊ฐ ์šฉ๋„์— ๋งž๊ฒŒ Postman์—์„œ ์•Œ์•„์„œ ์ฒ˜๋ฆฌ๋ฅผ ํ•ด์ค๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ rawํƒ€์ž…์€ ๋ฌธ์ž ๊ทธ๋Œ€๋กœ๋ฅผ ๋ณด๋‚ด๊ธฐ ๋•Œ๋ฌธ์— ๊ฐœ๋ฐœ์ž๊ฐ€ ์š”์ฒญ ํ˜•์‹์— ๋งž๊ฒŒ๋” ๊ฐ’์„ ์จ์ฃผ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.


raw_1.png


raw๋ฅผ ์„ ํƒํ•˜๋ฉด ์œ„ ์‚ฌ์ง„๊ณผ ๊ฐ™์ด ์„ธ๋ถ€ ํ•ญ๋ชฉ์„ ์„ ํƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Text, JavaScript, JSON, HTML, XML์˜ ํ˜•์‹์„ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ๋ฌผ๋ก  ํ˜•์‹์— ํ‹€๋ฆฌ๊ฒŒ ์ž‘์„ฑํ•œ๋‹ค๋ฉด ํ‹€๋ ธ๋‹ค๊ณ  ์•Œ๋ ค์ค๋‹ˆ๋‹ค.



๐Ÿ“— 4. binary

Binary๋Š” ์ˆ˜๋™์œผ๋กœ ์ž…๋ ฅํ•  ์ˆ˜ ์—†๋Š” ํ˜•์‹์œผ๋กœ ๋ฐ์ดํ„ฐ๋ฅผ ์ „์†กํ•˜๋„๋ก ์„ค๊ณ„๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ปดํ“จํ„ฐ์˜ ๋ชจ๋“  ๊ฒƒ์ด ๋ฐ”์ด๋„ˆ๋ฆฌ๋กœ ๋ณ€ํ™˜๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ด๋ฏธ์ง€, ํŒŒ์ผ ๋“ฑ๊ณผ ๊ฐ™์ด ์ˆ˜๋™์œผ๋กœ ์ž‘์„ฑํ•  ์ˆ˜ ์—†๋Š” ์ƒํ™ฉ์ผ ๋•Œ ์ด๋Ÿฌํ•œ ์˜ต์…˜์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰, ํ…์ŠคํŠธ ์—†์ด ์ด๋ฏธ์ง€๋‚˜ ์˜์ƒ, ์˜ค๋””์˜ค ํŒŒ์ผ ๋“ฑ์„ ๋ณด๋‚ผ ๋•Œ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.


binary_1.gif



๐Ÿ“™ 5. GraphQL

GraphQL์ด๋ž€ Facebook์—์„œ ๋งŒ๋“  ์–ดํ”Œ๋ฆฌ์ผ€์ด์…˜ ๋ ˆ์ด์–ด ์ฟผ๋ฆฌ ์–ธ์–ด๋ผ๊ณ  ํ•ฉ๋‹ˆ๋‹ค. ์›น ํด๋ผ์ด์–ธํŠธ๊ฐ€ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๊ฐ€์ ธ์˜ค๊ธฐ ์œ„ํ•œ ์–ธ์–ด์ž…๋‹ˆ๋‹ค. GraphQL์€ GraphQL ๊ฐœ๋…์žก๊ธฐ์—์„œ ๋” ์ž์„ธํ•˜๊ฒŒ ๋ณด์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.



๋๋งบ์Œ ์ด๋ ‡๊ฒŒ ์˜ค๋Š˜์€ ์—ฌ๋Ÿฌ ๊ฐ€์ง€์˜ ์š”์ฒญ ์œ ํ˜•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์•˜์Šต๋‹ˆ๋‹ค. ์ €๋Š” ์‹ค์ œ๋กœ ์‚ฌ์šฉํ•  ๋•Œ JSON์˜ ์š”์ฒญ์ด ๋งŽ๋‹ค ๋ณด๋‹ˆ, raw์™€ form-data๋ฅผ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ฒŒ ๋˜๋”๊ตฐ์š”. ํ‰์†Œ์—๋Š” ์ƒ๊ฐ์ง€๋„ ๋ชปํ•œ ๋ถ€๋ถ„๋“ค์ด์—ˆ๋Š”๋ฐ, ๊ฐ‘์ž๊ธฐ ์ด๊ฒƒ๋“ค์— ๋Œ€ํ•œ ์ฐจ์ด๊ฐ€ ๋ญ์ง€..? ๋ผ๋Š” ์ƒ๊ฐ์„ ๊ฐ€์ง€๊ฒŒ ๋˜์—ˆ๊ณ , ๊ทธ๋ ‡๊ฒŒ ์ด๋ฒˆ์— ๊ณต๋ถ€๋ฅผ ํ•˜๋ฉฐ ์ž๋ฃŒ๋ฅผ ์ •๋ฆฌํ•˜๋‹ค๋ณด๋‹ˆ ์ƒ๊ฐ๋ณด๋‹ค ํฅ๋ฏธ๋กœ์šด ๋ถ€๋ถ„๋“ค์ด ๋งŽ์•˜๋˜ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.๐Ÿ˜Š



[์ฐธ๊ณ ์ž๋ฃŒ]

comments powered by Disqus