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

Lect & Tip/node, Angular, React15

๋ฆฌ์•กํŠธ 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.
์„œ๋ฒ„ ๋ฐ์ดํ„ฐ์™€ ์ปดํฌ๋„ŒํŠธ์˜ ๋ถ„๋ฆฌ: ์œ ์ง€๋ณด์ˆ˜์„ฑ์„ ๋†’์ด๋Š” ๋ฐฉ๋ฒ• ์„œ๋ฒ„ ๋ฐ์ดํ„ฐ์™€ ์ปดํฌ๋„ŒํŠธ์˜ ๋ถ„๋ฆฌ: ์œ ์ง€๋ณด์ˆ˜์„ฑ์„ ๋†’์ด๋Š” ๋ฐฉ๋ฒ•๊ฐœ๋ฐœ์„ ํ•˜๋‹ค ๋ณด๋ฉด ์„œ๋ฒ„์—์„œ ๋ฐ›์•„์˜จ ๋ฐ์ดํ„ฐ๋ฅผ ๊ทธ๋Œ€๋กœ ํ™”๋ฉด์— ๋ Œ๋”๋งํ•˜๋Š” ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“ค๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌํ•œ ๊ฒฝ์šฐ, ์„œ๋ฒ„์—์„œ ๋ฐ˜ํ™˜๋˜๋Š” ๋ฐ์ดํ„ฐ์˜ ํ˜•์‹์ด ๋ณ€๊ฒฝ๋˜๋ฉด ์ปดํฌ๋„ŒํŠธ ์ฝ”๋“œ์—๋„ ์˜ํ–ฅ์„ ๋ฏธ์น˜๊ฒŒ ๋˜์–ด ์œ ์ง€๋ณด์ˆ˜๊ฐ€ ์–ด๋ ค์›Œ์ง€๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ์„œ๋ฒ„ ๋ฐ์ดํ„ฐ์™€ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ถ„๋ฆฌํ•˜์—ฌ ๊ฐ๊ฐ์˜ ์ฑ…์ž„์„ ๋ช…ํ™•ํžˆ ํ•˜๊ณ , ๋ณ€ํ™”ํ•˜๋Š” ํ™˜๊ฒฝ์—์„œ๋„ ์•ˆ์ •์ ์œผ๋กœ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.๋ฌธ์ œ์˜ ์ถœ๋ฐœ์ : ์„œ๋ฒ„ ๋ฐ์ดํ„ฐ์™€ ์ปดํฌ๋„ŒํŠธ์˜ ๊ฐ•ํ•œ ๊ฒฐํ•ฉ๋Œ€๋ถ€๋ถ„์˜ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์€ ์„œ๋ฒ„์—์„œ ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ›์•„ ์ด๋ฅผ ํ™”๋ฉด์— ํ‘œ์‹œํ•˜๋Š” ๊ตฌ์กฐ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ ์ดˆ๊ธฐ์—๋Š” ์„œ๋ฒ„์—์„œ ์ œ๊ณตํ•˜๋Š” ๋ฐ์ดํ„ฐ ํ˜•์‹์— ๋งž์ถฐ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ œ์ž‘ํ•˜๋Š” ๊ฒƒ์ด ์ž์—ฐ์Šค๋Ÿฌ์›Œ ๋ณด์ž…๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค.. 2024. 9. 9.
React ์‹คํ–‰ ์˜ค๋ฅ˜: npm ERR! errno -4058 ํ•ด๊ฒฐ ๋ฐฉ๋ฒ• React ์‹คํ–‰ ์˜ค๋ฅ˜ - npm ERR! errno -4058 ํ•ด๊ฒฐ ๋ฐฉ๋ฒ• React ํ”„๋กœ์ ํŠธ์—์„œ ๋ฐœ์ƒํ•˜๋Š” npm ์˜ค๋ฅ˜์˜ ์›์ธ๊ณผ ํ•ด๊ฒฐ์ฑ… React๋ฅผ ์‚ฌ์šฉํ•˜๋ฉฐ ์ข…์ข… ๋งˆ์ฃผ์น˜๋Š” ๋ฌธ์ œ ์ค‘ ํ•˜๋‚˜๋Š” npm ERR! errno -4058 ์˜ค๋ฅ˜์ž…๋‹ˆ๋‹ค. ์ด ์˜ค๋ฅ˜๋Š” React ํ”„๋กœ์ ํŠธ๋ฅผ ์‹คํ–‰ํ•  ๋•Œ npm ๊ด€๋ จ ๋ฌธ์ œ๋กœ ์ธํ•ด ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” ์ด ์˜ค๋ฅ˜์˜ ์›์ธ๊ณผ ๋‹ค์–‘ํ•œ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•์„ ์ž์„ธํžˆ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์˜ค๋ฅ˜์˜ ์›์ธ ํŒŒ์•… npm ERR! errno -4058 ์˜ค๋ฅ˜๋Š” ์ฃผ๋กœ ํŒŒ์ผ ์‹œ์Šคํ…œ ๊ด€๋ จ ๋ฌธ์ œ์—์„œ ๋น„๋กฏ๋ฉ๋‹ˆ๋‹ค. ์ด๋Š” ํŒŒ์ผ ๋˜๋Š” ๋””๋ ‰ํ† ๋ฆฌ์— ์ ‘๊ทผํ•  ์ˆ˜ ์—†๊ฑฐ๋‚˜, ํ•„์š”ํ•œ ํŒŒ์ผ์ด ์—†์„ ๋•Œ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ๊ตฌ์ฒด์ ์ธ ์›์ธ์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค: ์ž˜๋ชป๋œ ํŒŒ์ผ ๊ฒฝ๋กœ: ํ”„๋กœ์ ํŠธ ๋‚ด์˜ ํŒŒ์ผ์ด๋‚˜ ๋””๋ ‰ํ† ๋ฆฌ ๊ฒฝ๋กœ๊ฐ€ ์ž˜๋ชป ์„ค์ •๋˜์—ˆ์„ ๋•Œ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ๊ถŒํ•œ ๋ถ€.. 2023. 11. 28.
๋ฆฌ์•กํŠธ ์ฟผ๋ฆฌ v5 ์—์„œ ๋ฐ”๋€ ์  react query v5 react query v5 ๋ฆฌ์•กํŠธ ์ฟผ๋ฆฌ v5์˜ ์ฃผ์š” ๋ณ€๊ฒฝ์‚ฌํ•ญ ๋ฆฌ์•กํŠธ ์ฟผ๋ฆฌ v5์—์„œ๋Š” ๋งŽ์€ ์ค‘์š”ํ•œ ๋ณ€ํ™”๊ฐ€ ์žˆ์—ˆ์Šต๋‹ˆ๋‹ค. ์ด react query v5 ๋ณ€ํ™”๋“ค์€ ๊ฐœ๋ฐœ์ž๋“ค์—๊ฒŒ ๋ณด๋‹ค ๋ช…ํ™•ํ•˜๊ณ  ๊ฐ„๊ฒฐํ•œ ์ฝ”๋“œ ์ž‘์„ฑ์„ ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•˜๋ฉฐ, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ์œ ์ง€๋ณด์ˆ˜๋ฅผ ์šฉ์ดํ•˜๊ฒŒ ํ•ฉ๋‹ˆ๋‹ค. ๋‹จ์ผ ๊ฐ์ฒด ์‹œ๊ทธ๋‹ˆ์ฒ˜ ์ง€์›: ์ด์ „ ๋ฒ„์ „์—์„œ๋Š” useQuery์™€ ๊ฐ™์€ ํ•จ์ˆ˜๋“ค์ด TypeScript์—์„œ ๋‹ค์–‘ํ•œ ์˜ค๋ฒ„๋กœ๋”ฉ์„ ์ง€์›ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด์ œ v5์—์„œ๋Š” ๊ฐ์ฒด ํ˜•์‹๋งŒ์„ ์ง€์›ํ•˜์—ฌ, ๋”์šฑ ๊ฐ„๊ฒฐํ•˜๊ณ  ๋ช…ํ™•ํ•œ ์ฝ”๋“œ ์ž‘์„ฑ์ด ๊ฐ€๋Šฅํ•ด์กŒ์Šต๋‹ˆ๋‹คใ€7ใ€‘. queryClient.getQueryData ๋ฐ queryClient.getQueryState ๋ณ€๊ฒฝ: ์ด์ œ ์ด ํ•จ์ˆ˜๋“ค์€ queryKey๋งŒ์„ ์ธ์ž๋กœ ๋ฐ›์Šต๋‹ˆ๋‹ค. ์ด๋Š” API์˜ ์ผ๊ด€์„ฑ์„ ๋†’์ด๊ณ , ์‚ฌ์šฉ์˜ ๋‹จ์ˆœํ™”๋ฅผ ๊ฐ€์ ธ์˜ต๋‹ˆ๋‹คใ€8ใ€‘ใ€9ใ€‘.. 2023. 11. 13.
๋ฆฌ์•กํŠธ ํด๋” ๊ตฌ์กฐ React JS Folder Structure RJSFS ๋ฆฌ์•กํŠธ ํด๋” ๊ตฌ์กฐ React JS Folder Structure RJSFS ๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ๋ฅผ ์‹œ์ž‘ํ•˜๊ธฐ ์ „์—, ์ฒด๊ณ„์ ์ด๊ณ  ํšจ์œจ์ ์ธ ํด๋” ๊ตฌ์กฐ๋ฅผ ์„ธ์šฐ๋Š” ๊ฒƒ์€ ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ์ด๋Š” ๊ฐœ๋ฐœ์˜ ์ƒ์‚ฐ์„ฑ์„ ๋†’์ด๊ณ , ํŒ€์› ๊ฐ„์˜ ํ˜‘์—…์„ ์šฉ์ดํ•˜๊ฒŒ ํ•˜๋ฉฐ, ํ”„๋กœ์ ํŠธ์˜ ์œ ์ง€๋ณด์ˆ˜๋ฅผ ์‰ฝ๊ฒŒ ๋งŒ๋“œ๋Š” ๋ฐ ๋„์›€์„ ์ค๋‹ˆ๋‹ค. ์ด ๊ธ€์—์„œ๋Š” ๋ฆฌ์•กํŠธ ํ”„๋กœ์ ํŠธ๋ฅผ ์œ„ํ•œ ํด๋” ๊ตฌ์กฐ์— ๋Œ€ํ•œ ๊ถŒ์žฅ ์‚ฌํ•ญ๊ณผ ํŒ์„ ์ œ๊ณตํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค. ํ”„๋กœ์ ํŠธ ๊ทœ๋ชจ์— ๋”ฐ๋ฅธ ๊ตฌ์กฐํ™” ์†Œ๊ทœ๋ชจ ํ”„๋กœ์ ํŠธ ์†Œ๊ทœ๋ชจ ํ”„๋กœ์ ํŠธ์˜ ๊ฒฝ์šฐ, ๋ณต์žกํ•œ ํด๋” ๊ตฌ์กฐ๋ณด๋‹ค๋Š” ๊ฐ„๋‹จํ•˜๊ณ  ๋ช…ํ™•ํ•œ ๊ตฌ์กฐ๊ฐ€ ์œ ๋ฆฌํ•ฉ๋‹ˆ๋‹ค. ๊ฐ ์ปดํฌ๋„ŒํŠธ์™€ ๊ด€๋ จ ํŒŒ์ผ๋“ค์„ ๊ธฐ๋Šฅ๋ณ„๋กœ ๊ทธ๋ฃนํ™”ํ•˜์—ฌ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. src components Header Header.js Header.css Footer Footer.js Footer.css p.. 2023. 10. 27.

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”