[JAVASCRIPT] Fetch API & FormData๋ฅผ ์ด์šฉํ•œ ๋‹ค์ค‘ํŒŒ์ผ ์—…๋กœ๋“œ
ยท
Frontend/JavaScript
โ— ์ƒํ’ˆ ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ๋ฅผ ์œ„ํ•œ HTML ์ƒํ’ˆ ์ด๋ฏธ์ง€ ๋“ฑ๋ก ํƒœ๊ทธ์˜ enctype ์†์„ฑ๊ฐ’์€ multipart/form-data๋กœ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. โ€ป๋งค์šฐ ์ค‘์š”โ€ป ํƒœ๊ทธ์˜ multiple ์†์„ฑ์€ ์š”์†Œ์— ์‚ฌ์šฉ์ž๊ฐ€ ๋‘˜ ์ด์ƒ์˜ ๊ฐ’์„ ์ž…๋ ฅํ•  ์ˆ˜ ์žˆ์Œ์„ ๋ช…์‹œํ•ฉ๋‹ˆ๋‹ค. ํŒŒ์ผ์„ ์—…๋กœ๋“œ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ํƒœ๊ทธ์˜ type ์†์„ฑ๊ฐ’์€ file๋กœ ์ง€์ •ํ•ฉ๋‹ˆ๋‹ค. โ— ์ด๋ฒคํŠธ๋ฆฌ์Šค๋„ˆ ์ด์šฉ์„ ์œ„ํ•œ ํƒœ๊ทธ ๋“ฑ๋ก โ— Fetch API & FormData๋ฅผ ์ด์šฉํ•˜์—ฌ ์„œ๋ฒ„์— Request ์ „๋‹ฌ fetch() ํ•จ์ˆ˜๋Š” ์ฒซ๋ฒˆ์งธ ์ธ์ž๋กœ URL, ๋‘๋ฒˆ์งธ ์ธ์ž๋กœ Option ๊ฐ์ฒด๋ฅผ ๋ฐ›๊ณ , Promise ํƒ€์ž…์˜ ๊ฐ์ฒด๋ฅผ ๋ฆฌํ„ดํ•ฉ๋‹ˆ๋‹ค. URL์€ ํ•„์ˆ˜ ๋งค๊ฐœ๋ณ€์ˆ˜ ์ž…๋‹ˆ๋‹ค. ๋ฐ˜ํ™˜๋œ ๊ฐ์ฒด๋Š”, API ํ˜ธ์ถœ์ด ์„ฑ๊ณตํ–ˆ์„ ๊ฒฝ์šฐ response ๊ฐ์ฒด๋ฅผ resolveํ•˜๊ณ , ์‹คํŒจํ–ˆ์„ ๊ฒฝ์šฐ error ..
_์„ฑํ˜ธ_
'Fetch API' ํƒœ๊ทธ์˜ ๊ธ€ ๋ชฉ๋ก