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

Lect & Tip118

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ map()ํ•จ์ˆ˜, Object json key ๊ฐ’ ๊ฐ€์ ธ์˜ค๊ธฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ map()ํ•จ์ˆ˜, Object json key ๊ฐ’ ๊ฐ€์ ธ์˜ค๊ธฐ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์›น ๊ฐœ๋ฐœ์—์„œ ๊ฐ€์žฅ ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด ์ค‘ ํ•˜๋‚˜๋กœ, ๋‹ค์–‘ํ•œ ๋ฐ์ดํ„ฐ ์กฐ์ž‘ ๋ฐ ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•œ ๋‚ด์žฅ ํ•จ์ˆ˜๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ์ค‘์—์„œ๋„ ๋ฐฐ์—ด์„ ํšจ์œจ์ ์œผ๋กœ ๋‹ค๋ฃจ๊ธฐ ์œ„ํ•œ map() ํ•จ์ˆ˜์™€ JSON ๊ฐ์ฒด์—์„œ ํ‚ค(key) ๊ฐ’์„ ์ถ”์ถœํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๊ฐœ๋ฐœ์ž๋“ค์ด ์ž์ฃผ ํ™œ์šฉํ•˜๋Š” ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ map() ํ•จ์ˆ˜์— ๋Œ€ํ•œ ๊ธฐ๋ณธ ๊ฐœ๋…๊ณผ ์‚ฌ์šฉ๋ฒ•, ๊ทธ๋ฆฌ๊ณ  JSON ๊ฐ์ฒด์˜ ํ‚ค ๊ฐ’์„ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์‹ฌ๋„ ์žˆ๊ฒŒ ์•Œ์•„๋ณด๊ณ , ์ด๋ฅผ HTML ์บ”๋ฒ„์Šค๋ฅผ ํ™œ์šฉํ•œ ์‹ค์ „ ์˜ˆ์ œ์™€ ํ•จ๊ป˜ ์†Œ๊ฐœํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ ๊ณผ์ •์—์„œ ๋ฐ์ดํ„ฐ ๋ณ€ํ™˜๊ณผ ์กฐ์ž‘์€ ๋งค์šฐ ์ค‘์š”ํ•œ ์ž‘์—…์ž…๋‹ˆ๋‹ค. ๋ฐฐ์—ด์— ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€๊ณตํ•˜์—ฌ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด๋กœ ๋ฐ˜ํ™˜ํ•˜๊ฑฐ๋‚˜.. 2025. 3. 20.
์• ์ž์ผ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ์˜ UI ํ”„๋กœํ† ํƒ€์ดํ•‘๊ณผ ์ปดํฌ๋„ŒํŠธ ๋””์ž์ธ ์• ์ž์ผ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ์˜ UI ํ”„๋กœํ† ํƒ€์ดํ•‘๊ณผ ์ปดํฌ๋„ŒํŠธ ๋””์ž์ธ์• ์ž์ผ(Agile) ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ๋Š” ๋น ๋ฅธ ํ”ผ๋“œ๋ฐฑ๊ณผ ๋ฐ˜๋ณต์ ์ธ ๊ฐœ์„ ์ด ํ•ต์‹ฌ ๊ฐ€์น˜์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ํ™˜๊ฒฝ์—์„œ UI ํ”„๋กœํ† ํƒ€์ดํ•‘๊ณผ ์ปดํฌ๋„ŒํŠธ ๋””์ž์ธ์€ ๊ฐœ๋ฐœ ์ดˆ๊ธฐ ๋‹จ๊ณ„๋ถ€ํ„ฐ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๊ฒ€์ฆํ•˜๊ณ , ๊ฐœ๋ฐœ์ž์™€ ๋””์ž์ด๋„ˆ ๊ฐ„์˜ ์›ํ™œํ•œ ํ˜‘์—…์„ ์ง€์›ํ•˜๋Š” ์ค‘์š”ํ•œ ์š”์†Œ๋กœ ์ž๋ฆฌ ์žก๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ํ”„๋กœํ† ํƒ€์ดํ•‘ ๋„๊ตฌ์™€ ๋ฆฌ์•กํŠธ ์Šคํ† ๋ฆฌ๋ถ(Storybook) ๋“ฑ์„ ํ™œ์šฉํ•˜์—ฌ UI ๋””์ž์ธ์„ ์‹ ์†ํ•˜๊ฒŒ ์‹œ๊ฐํ™”ํ•˜๊ณ  ๊ฒ€์ฆํ•˜๋Š” ๋ฐฉ๋ฒ•, ๊ทธ๋ฆฌ๊ณ  ์ด๋ฅผ ํ†ตํ•œ ๊ฐœ๋ฐœ ํ”„๋กœ์„ธ์Šค์™€ ํ˜‘์—… ์‹œ๋‚˜๋ฆฌ์˜ค์— ๋Œ€ํ•ด ๊ตฌ์ฒด์ ์œผ๋กœ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.์• ์ž์ผ ๊ฐœ๋ฐœ๊ณผ UI ํ”„๋กœํ† ํƒ€์ดํ•‘์˜ ์ค‘์š”์„ฑ์• ์ž์ผ ๊ฐœ๋ฐœ์€ ์งง์€ ๊ฐœ๋ฐœ ์ฃผ๊ธฐ์™€ ์ง€์†์ ์ธ ํ”ผ๋“œ๋ฐฑ์„ ํ†ตํ•ด ์ œํ’ˆ์„ ์ ์ง„์ ์œผ๋กœ ๊ฐœ์„ ํ•˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค. UI ํ”„๋กœํ† ํƒ€์ดํ•‘์€ ์ด๋Ÿฌํ•œ ์• ์ž์ผ ๊ฐœ๋ฐœ.. 2025. 2. 26.
React JS ๋ฐ์ดํ„ฐํ”ผ์ปค ์ตœ์†Œ/์ตœ๋Œ€ ๋‚ ์งœ ์„ค์ • ๊ฐ€์ด๋“œ React JS ๋ฐ์ดํ„ฐํ”ผ์ปค ์ตœ์†Œ/์ตœ๋Œ€ ๋‚ ์งœ ์„ค์ • ๊ฐ€์ด๋“œ์ตœ๊ทผ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์—์„œ ์‚ฌ์šฉ์ž ์นœํ™”์ ์ธ ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ตฌ์„ฑํ•˜๋Š” ๋ฐ ์ค‘์š”ํ•œ ์š”์†Œ ์ค‘ ํ•˜๋‚˜๊ฐ€ ๋‚ ์งœ ์„ ํƒ ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค. React๋ฅผ ๋น„๋กฏํ•œ ์ตœ์‹  ํ”„๋ก ํŠธ์—”๋“œ ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ๋Š” ๋‹ค์–‘ํ•œ ๋‚ ์งœ ์„ ํƒ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์žˆ์œผ๋ฉฐ, ๊ทธ ์ค‘์—์„œ๋„ JavaScript ๊ธฐ๋ฐ˜์˜ ๋ฐ์ดํ„ฐํ”ผ์ปค๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์›ํ•˜๋Š” ๋‚ ์งœ ๋ฒ”์œ„๋ฅผ ์†์‰ฝ๊ฒŒ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค๋‹ˆ๋‹ค.์˜ค๋Š˜์€ React์—์„œ JS ๋ฐ์ดํ„ฐํ”ผ์ปค๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์ตœ์†Œ ๋‚ ์งœ์™€ ์ตœ๋Œ€ ๋‚ ์งœ๋ฅผ ์„ค์ •ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ž์„ธํ•˜๊ฒŒ ์•Œ์•„๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.๋ฐ์ดํ„ฐํ”ผ์ปค์˜ ํ•„์š”์„ฑ๊ณผ ๊ธฐ๋ณธ ๊ฐœ๋…์›น ํผ์ด๋‚˜ ์˜ˆ์•ฝ ์‹œ์Šคํ…œ, ์ผ์ • ๊ด€๋ฆฌ ๋“ฑ ์—ฌ๋Ÿฌ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ๋‚ ์งœ ์„ ํƒ ๊ธฐ๋Šฅ์€ ํ•„์ˆ˜์ ์ž…๋‹ˆ๋‹ค. ๋‹จ์ˆœํžˆ ์‚ฌ์šฉ์ž๊ฐ€ ์ž„์˜์˜ ๋‚ ์งœ๋ฅผ ์ž…๋ ฅํ•˜๋„๋ก ๋‘๋Š” ๋Œ€์‹ , ๋ฏธ๋ฆฌ ์ •ํ•ด์ง„ ๋ฒ”์œ„ ๋‚ด์—์„œ.. 2025. 2. 12.
๋ฆฌ์•กํŠธ 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] SPA ํŽ˜์ด์ง€ ์ด๋™ ์‹œ ์Šคํฌ๋กค ๋งจ ์œ„ ์œ ์ง€ ํ•˜๋Š” ๋ฐฉ๋ฒ• [React] SPA ํŽ˜์ด์ง€ ์ด๋™ ์‹œ ์Šคํฌ๋กค ๋งจ ์œ„ ์œ ์ง€ ํ•˜๋Š” ๋ฐฉ๋ฒ•์ตœ๊ทผ ์›น ๊ฐœ๋ฐœ ํŠธ๋ Œ๋“œ์—์„œ ์‹ฑ๊ธ€ ํŽ˜์ด์ง€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜(SPA)์€ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜(UX)์„ ๊ทน๋Œ€ํ™”ํ•˜๊ธฐ ์œ„ํ•ด ๋งŽ์ด ํ™œ์šฉ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ React์™€ ๊ฐ™์€ ํ”„๋ก ํŠธ์—”๋“œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ SPA๋ฅผ ๊ตฌ์ถ•ํ•  ๋•Œ, ํŽ˜์ด์ง€ ๊ฐ„ ์ „ํ™˜์ด ๋น ๋ฅด๊ณ  ๋ถ€๋“œ๋Ÿฌ์šด ์ „ํ™˜ ํšจ๊ณผ๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์ด ํฐ ์žฅ์ ์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด๋Ÿฌํ•œ SPA์˜ ํŠน์„ฑ์ƒ ํŽ˜์ด์ง€ ์ด๋™ ์‹œ ์Šคํฌ๋กค ์œ„์น˜๊ฐ€ ์ด์ „ ํŽ˜์ด์ง€์˜ ์œ„์น˜๋ฅผ ๊ทธ๋Œ€๋กœ ์œ ์ง€ํ•˜๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ณธ ํฌ์ŠคํŒ…์—์„œ๋Š” React ํ™˜๊ฒฝ์—์„œ SPA ํŽ˜์ด์ง€ ์ด๋™ ์‹œ ์Šคํฌ๋กค์„ ํ•ญ์ƒ ๋งจ ์œ„๋กœ ์œ ์ง€ํ•˜๋Š” ๋‹ค์–‘ํ•œ ๋ฐฉ๋ฒ•๊ณผ ๊ทธ ๊ตฌํ˜„ ์‚ฌ๋ก€์— ๋Œ€ํ•ด ์‹ฌ๋„ ์žˆ๊ฒŒ ๋‹ค๋ฃจ์–ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.SPA์™€ ์Šคํฌ๋กค ๋ฌธ์ œ์˜ ์ดํ•ดSPA๋Š” ํ•œ ๋ฒˆ์˜ ๋กœ๋”ฉ์œผ๋กœ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ „์ฒด๋ฅผ ๋ถˆ๋Ÿฌ.. 2025. 2. 10.
word-break:break-all HTML ํ…Œ์ด๋ธ”์—์„œ ์ž๋™ ์ค„ ๋ฐ”๊ฟˆ, ๋„“์ด ์ง€์ • ๋ฐฉ๋ฒ•!! word-break:break-all HTML ํ…Œ์ด๋ธ”์—์„œ ์ž๋™ ์ค„ ๋ฐ”๊ฟˆ, ๋„“์ด ์ง€์ • ๋ฐฉ๋ฒ•!!๋ธ”๋กœ๊ทธ ํฌ์ŠคํŒ…์„ ํ•˜๋ฉฐ ํ…Œ์ด๋ธ”์˜ ํฌ๊ธฐ ๋•Œ๋ฌธ์— ๊ณ ๋ฏผ๋˜์‹ ์  ์žˆ์œผ์‹œ์ฃ ? ๋‚ด๊ฐ€ ์›ํ•˜๋Š” ํ…Œ์ด๋ธ”์˜ ํฌ๊ธฐ๋Š” ๋”ฑ ์š” ์ •๋„์ธ๋ฐ, ์นผ๋Ÿผ(TD) ์•ˆ์— ์ž…๋ ฅํ•œ ๊ธ€์ž์— ๋”ฐ๋ผ ํ…Œ์ด๋ธ” ํฌ๊ธฐ๊ฐ€ ๋งˆ์Œ๋Œ€๋กœ ๋ณ€๊ฒฝ๋˜์–ด ๋ฒ„๋ฆฌ๋ฉด ์ฐธ ์†์ƒํ•ฉ๋‹ˆ๋‹ค. ์˜ค๋Š˜์€ ๋‚ด๊ฐ€ ์‚ฌ์šฉํ•˜๊ณ ์ž ํ•˜๋Š” ํฌ๊ธฐ์— ๋งž๊ฒŒ ์ด์œ ํ…Œ์ด๋ธ”์„ ๊ตฌ์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.๋จผ์ €, ์˜ˆ์ œ ํ…Œ์ด๋ธ”์„ ํ†ตํ•ด ๊ธฐ๋ณธ ์„ค์ •์„ ํ™•์ธํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋‘ ๊ฐœ์˜ TD ๊ฐ’์„ ๊ฐ€์ง€๋ฉฐ ๊ฐ๊ฐ์˜ ๋„ˆ๋น„๋ฅผ 150px๋กœ ์ง€์ •ํ•œ ํ…Œ์ด๋ธ”์„ ๋งŒ๋“ค์–ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. 12345 12345 1234512345์ด๋ ‡๊ฒŒ ํ•˜๋ฉด, ํ…Œ์ด๋ธ” ์•ˆ์— ์•„๋ฌด๋Ÿฐ ๋‚ด์šฉ์ด ์—†๊ฑฐ๋‚˜ ์ง€์ •ํ•œ ์‚ฌ์ด์ฆˆ๋ณด๋‹ค ๊ธธ์ด๊ฐ€ ์ž‘์€ ๋ฌธ์ž์—ด์ด ์ž…๋ ฅ๋œ๋‹ค๋ฉด, ๋‚ด๊ฐ€.. 2024. 10. 26.