Codemunk ๐Ÿฟ๏ธ

๐Ÿฅœ [Vue] Vue ์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž

ํ•ด๋‹น ํฌ์ŠคํŠธ๋Š” Vue.js ์— ๋Œ€ํ•ด ์ค‘์ ์ ์œผ๋กœ ๋‹ค๋ฃจ๋Š” ํŽ˜์ด์ง€ ์ž…๋‹ˆ๋‹ค. ์™œ? Vue 2 ์˜ ์ง€์›์€ 2023.12.31 ๋ถ€๋กœ ๋์ด ๋‚˜๊ธฐ๋„ ํ–ˆ๊ณ  ํ˜„์žฌ ๋‹ค๋‹ˆ๋Š” ํšŒ์‚ฌ์—์„œ Vue ๋ฅผ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์–ด ๋ฐฐ์›Œ๋ณด๋ ค ํ–ˆ๋‹ค. ํ•˜ํ•„ ๋˜ ๋‚ด๊ฐ€ ์•ˆ์จ๋ณธ ๊ฒƒ ์ค‘ ํ•˜๋‚˜๊ฐ€ Vue ์ด๊ธฐ์—.. Vue ๋ž€? Vue === View Vue ๋Š” View ์™€...

๐Ÿฅœ [React] Frontend ๊ธฐ์ˆ ๋ฉด์ ‘ (React)

ํ•ด๋‹น ํฌ์ŠคํŠธ๋Š” ํ”„๋ก ํŠธ์•ค๋“œ์˜ ๊ธฐ์ˆ  ๋ฉด์ ‘ ์ค‘ ๋ฆฌ์•กํŠธ์— ๋Œ€ํ•ด ์ค‘์ ์ ์œผ๋กœ ๋‹ค๋ฃจ๋Š” ํŽ˜์ด์ง€ ์ž…๋‹ˆ๋‹ค. React React ์— ๋Œ€ํ•ด ์„ค๋ช…ํ•ด์ฃผ์„ธ์š”. Q. React๋Š” Facebook์—์„œ ๊ฐœ๋ฐœํ•œ JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ, ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๊ตฌ์ถ•ํ•˜๊ธฐ ์œ„ํ•œ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. React๋Š” ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•œ ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜ ...

๐Ÿฅœ [JavaScript] Frontend ๊ธฐ์ˆ ๋ฉด์ ‘ (Javascript)

ํ•ด๋‹น ํฌ์ŠคํŠธ๋Š” ํ”„๋ก ํŠธ์•ค๋“œ์˜ ๊ธฐ์ˆ  ๋ฉด์ ‘ ์ค‘ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ๋Œ€ํ•ด ์ค‘์ ์ ์œผ๋กœ ๋‹ค๋ฃจ๋Š” ํŽ˜์ด์ง€ ์ž…๋‹ˆ๋‹ค. JavaScript ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๋ฌด์Šจ ์–ธ์–ด์ธ๊ฐ€์š”? Q. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์ธํ„ฐํ”„๋ฆฌํ„ฐ ์–ธ์–ด์ž…๋‹ˆ๋‹ค. ์ธํ„ฐํ”„๋ฆฌํ„ฐ ์–ธ์–ด๋ž€ ์ฝ”๋“œ๋ฅผ ํ•œ ์ค„์”ฉ ์ฝ๊ณ  ์‹คํ–‰ํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋Š” ๋ธŒ๋ผ์šฐ์ €๋‚˜ Node.js์™€ ๊ฐ™์€ ํ™˜๊ฒฝ์—์„œ ์‹คํ–‰๋  ๋•Œ, ์ธ...

๐Ÿฅœ [React] React.memo(), useCallback(), useMemo() ๋ฅผ ํ™œ์šฉํ•œ ์ตœ์ ํ™”๋ฅผ ํ•ด๋ณด์ž

๊ฐœ์š” ์ฝ”๋“œ๋ฅผ ์งœ๋Š” ๊ฒƒ์— ๋Œ€ํ•œ ์žฅ๋ฒฝ์ด ๋‚ฎ์•„์ง€๊ณ  ์žˆ๋Š” ์š”์ฆ˜, ์‚ฌ๋žŒ๋“ค์ด ์ž๊ธฐ ์ฝ”๋“œ๋ฅผ ๊ฐœ์„ ํ•˜๊ณ  ์ตœ์ ํ™” ํ•˜๋Š” ์ผ์—๋Š” ์†Œํ™€ํžˆํ•˜๋Š” ๊ฒฝํ–ฅ์ด ์žˆ๋‹ค. ๊ฐ„๋‹จํ•œ ์˜ˆ์ œ๋ฅผ ๋ฐ”ํƒ•์œผ๋กœ ์ฝ”๋“œ๋ฅผ ํ•œ๋ฒˆ ๊ฐœ์„ ํ•ด๋ณด์ž ๊ท€์ฐฎ์ง€๋งŒ ํ•ด๋ณด์ž React Profiler ์„ค์น˜ ์ผ๋‹จ ๋จผ์ € ๊ตฌ๊ธ€์—์„œ ์„ค์น˜๊ฐ€ ๊ฐ€๋Šฅํ•œ React Profiler ๋ฅผ ํ™œ์šฉํ•  ์˜ˆ์ •์ด๋‹ค. ์„ค์น˜๋ฅผ ํ•˜๋ ค๋ฉด ๋งํฌ ์ฐธ๊ณ  ...

๐Ÿฅœ [JavaScript] ์ •๊ทœํ‘œํ˜„์‹์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž

๊ฐœ์š” ์—ฌํƒœ๊ป ์ •๊ทœํ‘œํ˜„์‹์€ validation ์„ ์ ์šฉํ•  ๋•Œ ๋ฐ–์— ์จ๋ณด์ง€ ์•Š์•˜๋‹ค. ํ•˜์ง€๋งŒ ์š”์ฆ˜ javascript ๋กœ ์ฝ”๋”ฉํ…Œ์ŠคํŠธ๋ฅผ ์ค€๋น„ํ•˜๋‹ค ๋ณด๋ฉด ์ •๊ทœํ‘œํ˜„์‹์„ ์‚ฌ์šฉํ•˜๋Š” ์ผ์ด ์žฆ์€ ๊ฒƒ ๊ฐ™์•„ ์ œ๋Œ€๋กœ ์•Œ์•„๋ณด๋ ค ํ•œ๋‹ค. ์ •๊ทœํ‘œํ˜„์‹์ด๋ž€? ์ •๊ทœํ‘œํ˜„์‹ (RegExp, Regular Expression) ๋ฌธ์ž๋ฅผ ๊ฒ€์ƒ‰ํ•˜๊ฑฐ๋‚˜ ๋Œ€์ฒด, ์ถ”์ถœ ํ•  ๋•Œ ์‚ฌ์šฉ...

๐Ÿฅœ [Conference] React19 2๋…„๋งŒ์˜ ์—…๋ฐ์ดํŠธ, ๋ญ๊ฐ€ ๋‹ฌ๋ผ์งˆ๊นŒ (GDSC Kprintf)

(GDSC Kprintf) ํ•ด๋‹น์ž๋กœ๋Š” GDSC ์ปจํผ๋Ÿฐ์Šค์— ์ฐธ์—ฌํ•˜์—ฌ ๋“ค์€ ๊ฐ•์˜ ๋‚ด์šฉ ์†Œ๊ฐ์„ ๋ฐ”ํƒ•์œผ๋กœ ์ž‘์„ฑ ๋œ ํฌ์ŠคํŠธ ์ž…๋‹ˆ๋‹ค. ๊ฐœ์š” ํ”„๋ก ํŠธ์•ค๋“œ ๊ฐœ๋ฐœ์ž๋ฅผ ์ค€๋น„ํ•˜๋Š” ๋‚˜๋กœ์„œ ์ตœ๊ทผ๋“ค์–ด Next 14 ์—…๋ฐ์ดํŠธ๋Š” ์•„์ฃผ ํฐ ์ถฉ๊ฒฉ์ด์—ˆ๋‹ค. ํ˜„์žฌ ๋ฆฌ์•กํŠธ ๋ฒ„์ „์€ 18 ์ด๊ณ , ๊ณต์‹ ์—…๋ฐ์ดํŠธ๋Š” 2022๋…„ 6์›” ์ดํ›„๋กœ ์—†์—ˆ๋‹ค. 2๋…„๋™์•ˆ ์•„๋ฌด๊ฒƒ๋„ ์—†๋˜ ๊ฒƒ์€ ...

๐Ÿฅœ [Conference] ํ”ผ๋“œ๋ฐฑ๊ณผ ๋ฃจํ‹ด์œผ๋กœ ์„ฑ๊ณตํ•˜๋Š” ์ทจ์—… (GDSC Kprintf)

(GDSC Kprintf) ํ•ด๋‹น์ž๋กœ๋Š” GDSC ์ปจํผ๋Ÿฐ์Šค์— ์ฐธ์—ฌํ•˜์—ฌ ๋“ค์€ ๊ฐ•์˜ ๋‚ด์šฉ ์†Œ๊ฐ์„ ๋ฐ”ํƒ•์œผ๋กœ ์ž‘์„ฑ ๋œ ํฌ์ŠคํŠธ ์ž…๋‹ˆ๋‹ค. ๊ฐœ์š” ํ•ญ์ƒ ๋ณด๋ฉด ์ด๋ ฅ์„œ๊ฐ€ ์ œ์ผ ์“ฐ๊ธฐ ์–ด๋ ต๋‹ค. ๋‚ด๊ฐ€ ์ค€๋น„ํ•ด์™”๋˜ ๋‚ด์šฉ์„ ์“ฐ๋Š” ๊ฒƒ์ž„์—๋„ ๋ง์ด๋‹ค. ๋‚ด๊ฐ€ ์–ด๋–ป๊ฒŒ ํ•ด์™”๋Š”์ง€๋ฅผ ํ’€์–ด ์“ฐ๊ธฐ์—” ๊ธ€์žฌ์ฃผ๊ฐ€ ์—†๋Š” ๋‚˜์—๊ฒ ์•„์ฃผ ํฐ ๊ณค์š•์ด๋‹ค.. ์กฐ์–ธ ๊ฒธ ๋„์›€์ด ๋˜๊ณ ์ž ๋“ค์–ด๋ณด๋‹ˆ ๋งŽ์€...

๐Ÿฅœ [Conference] CS ์™€ ํ•จ๊ป˜ํ•˜๋Š” ๊ฐœ๋ฐœ ์ด์•ผ๊ธฐ (GDSC Kprintf)

(GDSC Kprintf) ํ•ด๋‹น์ž๋กœ๋Š” GDSC ์ปจํผ๋Ÿฐ์Šค์— ์ฐธ์—ฌํ•˜์—ฌ ๋“ค์€ ๊ฐ•์˜ ๋‚ด์šฉ ์†Œ๊ฐ์„ ๋ฐ”ํƒ•์œผ๋กœ ์ž‘์„ฑ ๋œ ํฌ์ŠคํŠธ ์ž…๋‹ˆ๋‹ค. ๊ฐœ์š” ์š”์ฆ˜๋“ค์–ด ๋ฉด์ ‘ ์งˆ๋ฌธ์„ ์ค€๋น„ํ•˜๋‹ค๋ณด๋ฉด ๊ธฐ์ˆ  ๋ฉด์ ‘ ์™ธ์—๋„ CS ๊ด€๋ จ ๋ฉด์ ‘๋„ ๋งŽ์•„์ง„ ์ถ”์„ธ์ด๋‹ค. ์ „๊ณตํ•™์ ๋งŒ ๋†’์œผ๋ฉด ๋˜๋Š”๊ฑฐ ์•„๋ƒ? ๋ผ๋Š” ์–„ํŒํ–ˆ๋˜ ๋‚ด ์ž์‹ ์„ ํ•œ์‹ฌํ•˜๊ฒŒ ์ƒ๊ฐํ•˜๋ฉฐ ๋ˆˆ๋ฌผ์˜ ํฌ์ŠคํŒ…์„ ๋‚จ๊ธด๋‹คโ€ฆ CS ...

๐Ÿฅœ [Conference] Hexagonal Achitecture ์— ๋Œ€ํ•ด์„œ (GDSC Kprintf)

(GDSC Kprintf) ํ•ด๋‹น์ž๋กœ๋Š” GDSC ์ปจํผ๋Ÿฐ์Šค์— ์ฐธ์—ฌํ•˜์—ฌ ๋“ค์€ ๊ฐ•์˜ ๋‚ด์šฉ ์†Œ๊ฐ์„ ๋ฐ”ํƒ•์œผ๋กœ ์ž‘์„ฑ ๋œ ํฌ์ŠคํŠธ ์ž…๋‹ˆ๋‹ค. ๊ฐœ์š” ํ•œ์ฐฝ ํ”„๋กœ์ ํŠธ๋ฅผ ๋งŒ๋“ค๋‹ค๋ณด๋ฉด ๋‚œ๊ด€์— ๋ด‰์ฐฉํ•˜๊ฒŒ ๋˜๋Š”๋ฐ ์ฒซ ๋ฒˆ์งธ๋กœ ๋Œ์•„๋Š”๊ฐ€๋Š”๋ฐ ์“ฐ๋ ˆ๊ธฐ์žฅ ์ฝ”๋“œ์ธ๊ฒฝ์šฐ ๋‘ ๋ฒˆ์งธ๋กœ ๋Œ์•„๊ฐ€์ง„ ์•Š๋Š”๋ฐ ๊ตฌ์กฐ๋ฅผ ์ด์˜๊ฒŒ ์ง  ๊ฒฝ์šฐ์ด๋‹ค. ๋‘˜ ๋‹ค ์ •๋ง ๊ฑฐ์ง€๊ฐ™์€ ๊ฒฝ์šฐ์ด์ง€๋งŒ ํ•ด๋‹น ์ƒํ™ฉ์„ ์–ด๋–ป๊ฒŒ...

๐Ÿฅœ [NextJS] Zod ๋ฅผ ํ™œ์šฉํ•œ validation check

library ์ค‘ Zod ๋ฅผ ํ™œ์šฉํ•œ validation ์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๋Š” ํฌ์ŠคํŠธ ์ž…๋‹ˆ๋‹ค. ๊ฐœ์š” ์š”์ฆ˜ ํ•œ๊ฐ€๋กœ์ด NextJS 14์— ๋Œ€ํ•ด ๋ฐฐ์›Œ๋‚˜๊ฐ€๋Š” ์ค‘โ€ฆ NextJS 14์—์„œ๋Š” Server Action ๊ณผ Zod ๋ฅผ ํ™œ์šฉํ•ด API ์—ฐ๊ฒฐ์„ ๋ณด๋‹ค ๋” ๊ฐ„๊ฒฐํ•˜๊ฒŒ ํ•œ๋‹ค๋Š” ๋ง์„ ๋“ฃ๊ณ  ์•Œ์•„๋ณด๊ฒŒ ๋˜์—ˆ๋‹ค. ๋จผ์ € Server Action ์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž ...