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

๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ236

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ map()ํ•จ์ˆ˜, Object json key ๊ฐ’ ๊ฐ€์ ธ์˜ค๊ธฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ map()ํ•จ์ˆ˜, Object json key ๊ฐ’ ๊ฐ€์ ธ์˜ค๊ธฐ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์›น ๊ฐœ๋ฐœ์—์„œ ๊ฐ€์žฅ ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด ์ค‘ ํ•˜๋‚˜๋กœ, ๋‹ค์–‘ํ•œ ๋ฐ์ดํ„ฐ ์กฐ์ž‘ ๋ฐ ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•œ ๋‚ด์žฅ ํ•จ์ˆ˜๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ ์ค‘์—์„œ๋„ ๋ฐฐ์—ด์„ ํšจ์œจ์ ์œผ๋กœ ๋‹ค๋ฃจ๊ธฐ ์œ„ํ•œ map() ํ•จ์ˆ˜์™€ JSON ๊ฐ์ฒด์—์„œ ํ‚ค(key) ๊ฐ’์„ ์ถ”์ถœํ•˜๋Š” ๋ฐฉ๋ฒ•์€ ๊ฐœ๋ฐœ์ž๋“ค์ด ์ž์ฃผ ํ™œ์šฉํ•˜๋Š” ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ map() ํ•จ์ˆ˜์— ๋Œ€ํ•œ ๊ธฐ๋ณธ ๊ฐœ๋…๊ณผ ์‚ฌ์šฉ๋ฒ•, ๊ทธ๋ฆฌ๊ณ  JSON ๊ฐ์ฒด์˜ ํ‚ค ๊ฐ’์„ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์‹ฌ๋„ ์žˆ๊ฒŒ ์•Œ์•„๋ณด๊ณ , ์ด๋ฅผ HTML ์บ”๋ฒ„์Šค๋ฅผ ํ™œ์šฉํ•œ ์‹ค์ „ ์˜ˆ์ œ์™€ ํ•จ๊ป˜ ์†Œ๊ฐœํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค.์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ ๊ณผ์ •์—์„œ ๋ฐ์ดํ„ฐ ๋ณ€ํ™˜๊ณผ ์กฐ์ž‘์€ ๋งค์šฐ ์ค‘์š”ํ•œ ์ž‘์—…์ž…๋‹ˆ๋‹ค. ๋ฐฐ์—ด์— ์ €์žฅ๋œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€๊ณตํ•˜์—ฌ ์ƒˆ๋กœ์šด ๋ฐฐ์—ด๋กœ ๋ฐ˜ํ™˜ํ•˜๊ฑฐ๋‚˜.. 2025. 3. 20.
๊ตฌ๊ธ€ ์• ๋“œ์„ผ์Šค Offerwall ์˜คํผ์›” ๊ด‘๊ณ  ์„ค์ •๋ฐฉ๋ฒ• - ๊ด‘๊ณ ๋ฅผ ๋ด์•ผ๋งŒ ์ปจํ…์ธ ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๋‹ค๋Š” ๋ชจ๋‹ฌ ์ฐฝ ๊ตฌ๊ธ€ ์• ๋“œ์„ผ์Šค Offerwall ์˜คํผ์›” ๊ด‘๊ณ  ์„ค์ •๋ฐฉ๋ฒ• - ๊ด‘๊ณ ๋ฅผ ๋ด์•ผ๋งŒ ์ปจํ…์ธ ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๋‹ค๋Š” ๋ชจ๋‹ฌ ์ฐฝ๊ตฌ๊ธ€ ์• ๋“œ์„ผ์Šค๋Š” ์ˆ˜๋…„๊ฐ„ ์˜จ๋ผ์ธ ๊ด‘๊ณ  ์‹œ์žฅ์—์„œ ์•ˆ์ •์ ์ธ ์ˆ˜์ต ์ฐฝ์ถœ ๋„๊ตฌ๋กœ ์ž๋ฆฌ ์žก์•„์™”์Šต๋‹ˆ๋‹ค. ๊ทธ ์ค‘์—์„œ๋„ ์˜คํผ์›”(Offerwall) ๊ด‘๊ณ ๋Š” ์ผ๋ฐ˜์ ์ธ ๋ฐฐ๋„ˆ ๊ด‘๊ณ ๋‚˜ ๋™์˜์ƒ ๊ด‘๊ณ ์™€๋Š” ์ฐจ๋ณ„ํ™”๋œ ์ ‘๊ทผ ๋ฐฉ์‹์„ ์ œ๊ณตํ•ฉ๋‹ˆ๋‹ค. ์˜คํผ์›” ๊ด‘๊ณ ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ๊ด‘๊ณ ๋ฅผ ๋‹จ์ˆœํžˆ ๋…ธ์ถœํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ, ์‹ค์ œ๋กœ ๊ด‘๊ณ ์— ์ฐธ์—ฌํ•˜์—ฌ ๋ณด์ƒ์„ ๋ฐ›๋Š” ํ˜•ํƒœ์˜ ๊ด‘๊ณ ์ž…๋‹ˆ๋‹ค. ์ตœ๊ทผ ๋ธ”๋กœ๊ทธ๋ฅผ ์šด์˜ํ•˜๋Š” ๋งŽ์€ ์‚ฌ์šฉ์ž๋“ค์ด โ€œ๊ด‘๊ณ ๋ฅผ ๋ด์•ผ๋งŒ ์ปจํ…์ธ ๋ฅผ ๋ณผ ์ˆ˜ ์žˆ๋‹คโ€๋Š” ๋ชจ๋‹ฌ ์ฐฝ์— ๋Œ€ํ•ด ๋ถˆ๋งŒ์„ ํ† ๋กœํ•˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋Š”๋ฐ, ์ด๋Š” ๊ด‘๊ณ  ์ˆ˜์ต ๊ทน๋Œ€ํ™”๋ฅผ ์œ„ํ•œ ๊ตฌ๊ธ€ ์• ๋“œ์„ผ์Šค์˜ ์ „๋žต ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค.์ด ๊ธ€์—์„œ๋Š” ๊ตฌ๊ธ€ ์• ๋“œ์„ผ์Šค์˜ ์˜คํผ์›” ๊ด‘๊ณ ๊ฐ€ ๋ฌด์—‡์ธ์ง€, ์–ด๋–ป๊ฒŒ ์„ค์ •ํ•˜๋Š”์ง€ ๊ทธ๋ฆฌ๊ณ  ์ด๋ฅผ .. 2025. 3. 14.
์• ์ž์ผ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ์˜ UI ํ”„๋กœํ† ํƒ€์ดํ•‘๊ณผ ์ปดํฌ๋„ŒํŠธ ๋””์ž์ธ ์• ์ž์ผ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ์˜ UI ํ”„๋กœํ† ํƒ€์ดํ•‘๊ณผ ์ปดํฌ๋„ŒํŠธ ๋””์ž์ธ์• ์ž์ผ(Agile) ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์—์„œ๋Š” ๋น ๋ฅธ ํ”ผ๋“œ๋ฐฑ๊ณผ ๋ฐ˜๋ณต์ ์ธ ๊ฐœ์„ ์ด ํ•ต์‹ฌ ๊ฐ€์น˜์ž…๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ํ™˜๊ฒฝ์—์„œ UI ํ”„๋กœํ† ํƒ€์ดํ•‘๊ณผ ์ปดํฌ๋„ŒํŠธ ๋””์ž์ธ์€ ๊ฐœ๋ฐœ ์ดˆ๊ธฐ ๋‹จ๊ณ„๋ถ€ํ„ฐ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๊ฒ€์ฆํ•˜๊ณ , ๊ฐœ๋ฐœ์ž์™€ ๋””์ž์ด๋„ˆ ๊ฐ„์˜ ์›ํ™œํ•œ ํ˜‘์—…์„ ์ง€์›ํ•˜๋Š” ์ค‘์š”ํ•œ ์š”์†Œ๋กœ ์ž๋ฆฌ ์žก๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ํ”„๋กœํ† ํƒ€์ดํ•‘ ๋„๊ตฌ์™€ ๋ฆฌ์•กํŠธ ์Šคํ† ๋ฆฌ๋ถ(Storybook) ๋“ฑ์„ ํ™œ์šฉํ•˜์—ฌ UI ๋””์ž์ธ์„ ์‹ ์†ํ•˜๊ฒŒ ์‹œ๊ฐํ™”ํ•˜๊ณ  ๊ฒ€์ฆํ•˜๋Š” ๋ฐฉ๋ฒ•, ๊ทธ๋ฆฌ๊ณ  ์ด๋ฅผ ํ†ตํ•œ ๊ฐœ๋ฐœ ํ”„๋กœ์„ธ์Šค์™€ ํ˜‘์—… ์‹œ๋‚˜๋ฆฌ์˜ค์— ๋Œ€ํ•ด ๊ตฌ์ฒด์ ์œผ๋กœ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.์• ์ž์ผ ๊ฐœ๋ฐœ๊ณผ UI ํ”„๋กœํ† ํƒ€์ดํ•‘์˜ ์ค‘์š”์„ฑ์• ์ž์ผ ๊ฐœ๋ฐœ์€ ์งง์€ ๊ฐœ๋ฐœ ์ฃผ๊ธฐ์™€ ์ง€์†์ ์ธ ํ”ผ๋“œ๋ฐฑ์„ ํ†ตํ•ด ์ œํ’ˆ์„ ์ ์ง„์ ์œผ๋กœ ๊ฐœ์„ ํ•˜๋Š” ๋ฐฉ์‹์ž…๋‹ˆ๋‹ค. UI ํ”„๋กœํ† ํƒ€์ดํ•‘์€ ์ด๋Ÿฌํ•œ ์• ์ž์ผ ๊ฐœ๋ฐœ.. 2025. 2. 26.
ํ‹ฐ์Šคํ† ๋ฆฌ ๋‹ค์Œ๊ฒ€์ƒ‰ ์ตœ์ ํ™” ๊ธฐ๊ฐ„๊ณผ ์ €ํ’ˆ์งˆ ํ™•์ธ ๋ฐฉ๋ฒ• ํ‹ฐ์Šคํ† ๋ฆฌ ๋‹ค์Œ ๊ฒ€์ƒ‰ ์ตœ์ ํ™” ๊ธฐ๊ฐ„๊ณผ ์ €ํ’ˆ์งˆ ํ™•์ธ ๋ฐฉ๋ฒ•ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ๋ฅผ ์šด์˜ํ•˜์‹œ๋ฉด์„œ ๋‹ค์Œ ๊ฒ€์ƒ‰์—์„œ์˜ ๋…ธ์ถœ๊ณผ ์ตœ์ ํ™” ๋ฌธ์ œ๋กœ ๊ณ ๋ฏผํ•ด ๋ณด์‹  ์  ์žˆ์œผ์‹ ๊ฐ€์š”? ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ์˜ ๋‹ค์Œ ๊ฒ€์ƒ‰ ์ตœ์ ํ™” ๊ธฐ๊ฐ„๊ณผ ์ €ํ’ˆ์งˆ ํŒ๋ณ„ ๊ธฐ์ค€, ๊ทธ๋ฆฌ๊ณ  ๊ฒ€์ƒ‰ ๋…ธ์ถœ์„ ๊ทน๋Œ€ํ™”ํ•˜๊ธฐ ์œ„ํ•œ ์ „๋žต์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์•Œ์•„๋ณด๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค. ์•„๋ž˜์—์„œ ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ์˜ ์ตœ์ ํ™” ๊ธฐ๊ฐ„๊ณผ ์ €ํ’ˆ์งˆ ๋ธ”๋กœ๊ทธ๋กœ ๋ถ„๋ฅ˜๋˜๋Š” ์ด์œ , ๊ทธ๋ฆฌ๊ณ  ์ด๋ฅผ ๊ฐœ์„ ํ•˜๊ธฐ ์œ„ํ•œ ๋‹ค์–‘ํ•œ ํŒ์„ ์ˆœ์„œ๋Œ€๋กœ ์„ค๋ช…๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.์ฒ˜์Œ ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ์— ๊ธ€์„ ์ž‘์„ฑํ•˜์‹ค ๋•Œ, ์กฐํšŒ์ˆ˜๊ฐ€ ์ ์€ ๊ฒƒ์„ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๋ฐ›์•„๋“ค์ด์…จ์„ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค. ์ € ์—ญ์‹œ ์ฒ˜์Œ ๋ธ”๋กœ๊ทธ๋ฅผ ์‹œ์ž‘ํ•  ๋•Œ๋Š” โ€œ์•„์ง ์ดˆ๊ธฐ ๋‹จ๊ณ„๋‹ˆ๊นŒ ๋‹น์—ฐํ•œ ๊ฒฐ๊ณผโ€๋ผ๊ณ  ์ƒ๊ฐํ•˜๋ฉฐ ์ง€๋‚˜์ณค๋˜ ๊ฒฝํ—˜์ด ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋˜ ์ค‘ ํ‹ฐ์Šคํ† ๋ฆฌ ๋ธ”๋กœ๊ทธ๊ฐ€ ๋‹ค์Œ ๊ฒ€์ƒ‰ ์ตœ์ ํ™” ๊ธฐ๊ฐ„์ด๋ผ๋Š” ์‹œ.. 2025. 2. 16.
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.