๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

axios2

๋ฆฌ์•กํŠธ api axios ์—‘์…€ ๋‹ค์šด๋กœ๋“œ ๋ฒ„ํŠผ ๊ตฌํ˜„ react.JS filesaver.saveAs javascript blob response.headers ๊ฐ’์—์„œ filename์ถ”์ถœํ•˜๊ธฐ ๋ฆฌ์•กํŠธ api axios ์—‘์…€ ๋‹ค์šด๋กœ๋“œ ๋ฒ„ํŠผ ๊ตฌํ˜„ react.JS filesaver.saveAs javascript blob response.headers ๊ฐ’์—์„œ filename์ถ”์ถœํ•˜๊ธฐ๋ฆฌ์•กํŠธ๋กœ ํ”„๋กœ์ ํŠธ๋ฅผ ์ง„ํ–‰ํ•˜๋ฉด์„œ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ์—‘์…€ ํŒŒ์ผ์„ ๋‹ค์šด๋กœ๋“œ ๋ฐ›๋Š” ๊ธฐ๋Šฅ์„ ๊ตฌํ˜„ํ•ด์•ผ ํ•  ๊ฒฝ์šฐ๊ฐ€ ์ข…์ข… ์žˆ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ API ํ˜ธ์ถœ ์‹œ Axios๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ค๊ณ , ๊ทธ ๋ฐ์ดํ„ฐ๋ฅผ ํŒŒ์ผ๋กœ ์ €์žฅํ•˜๋Š” ๊ณผ์ •์—์„œ ์—ฌ๋Ÿฌ ๊ฐ€์ง€ ์ œ์•ฝ๊ณผ ์ด์Šˆ๋ฅผ ๋งˆ์ฃผํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ๋ฆฌ์•กํŠธ ํ™˜๊ฒฝ์—์„œ Axios๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์—‘์…€ ํŒŒ์ผ ๋‹ค์šด๋กœ๋“œ ๋ฒ„ํŠผ์„ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ ํ•จ๊ป˜, response.headers์— ํฌํ•จ๋œ ํŒŒ์ผ๋ช…์„ ์ถ”์ถœํ•˜๋Š” ๊ผผ์ˆ˜์— ๋Œ€ํ•ด ์ž์„ธํžˆ ๋‹ค๋ฃจ๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ ๊ฐœ์š” ๋ฐ ๊ตฌํ˜„ ๋ฐฐ๊ฒฝ๋ฆฌ์•กํŠธ๋Š” ๋‹จ์ˆœํ•œ ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ.. 2025. 2. 11.
[React] REST API, AXIOS๋กœ ๋ฐ›์•„์˜จ Array ๊ฐ์ฒด๋ฅผ mapํ•จ์ˆ˜ ํ˜ธ์ถœ์ด ๋ถˆ๊ฐ€๋Šฅํ• ๋•Œ [React] REST API, AXIOS๋กœ ๋ฐ›์•„์˜จ Array ๊ฐ์ฒด๋ฅผ mapํ•จ์ˆ˜ ํ˜ธ์ถœ์ด ๋ถˆ๊ฐ€๋Šฅํ• ๋•Œ์ด ๊ธ€์—์„œ๋Š” React๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ REST API๋กœ๋ถ€ํ„ฐ Axios๋ฅผ ํ†ตํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์˜ฌ ๋•Œ ๋ฐœ์ƒํ•˜๋Š” ๋ฐฐ์—ด(Array) ๊ฐ์ฒด์˜ map ํ•จ์ˆ˜ ํ˜ธ์ถœ ์˜ค๋ฅ˜์— ๋Œ€ํ•ด ์ƒ์„ธํžˆ ์„ค๋ช…ํ•˜๊ณ , ์ด๋ฅผ ํ•ด๊ฒฐํ•˜๋Š” ๊ฐ„๋‹จํ•˜๋ฉด์„œ๋„ ํšจ๊ณผ์ ์ธ ๋ฐฉ๋ฒ•์„ ์†Œ๊ฐœํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค. ํŠนํžˆ ๋น„๋™๊ธฐ ๋ฐ์ดํ„ฐ ์ฒ˜๋ฆฌ์™€ ๊ด€๋ จํ•˜์—ฌ Promise ๊ฐ์ฒด๊ฐ€ ํ•ด๊ฒฐ๋˜๊ธฐ ์ „์— ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ Œ๋”๋ง๋˜์–ด ๋ฐœ์ƒํ•˜๋Š” ์˜ค๋ฅ˜์˜ ์›์ธ๊ณผ ํ•ด๊ฒฐ์ฑ…์„ ์ค‘์ ์ ์œผ๋กœ ๋‹ค๋ฃจ๋ฉฐ, ๋กœ๋”ฉ ์ƒํƒœ ๊ด€๋ฆฌ ๋ฐ ์กฐ๊ฑด๋ถ€ ๋ Œ๋”๋ง์„ ํ™œ์šฉํ•œ ์ ‘๊ทผ๋ฒ•์— ๋Œ€ํ•ด ์ด์•ผ๊ธฐํ•ฉ๋‹ˆ๋‹ค.๋„์ž…๋ถ€React๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด์„œ ์„œ๋ฒ„๋กœ๋ถ€ํ„ฐ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„์™€ ๋ Œ๋”๋งํ•˜๋Š” ๊ณผ์ •์€ ๋งค์šฐ ์ผ๋ฐ˜์ ์ž…๋‹ˆ๋‹ค. ๋งŽ์€ ๊ฐœ๋ฐœ์ž๋“ค์ด Axios๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ REST API์™€ ํ†ต์‹ ํ•˜๋ฉฐ ๋ฐ์ดํ„ฐ.. 2024. 10. 18.