Community

๐Ÿ—ž๏ธ ์ฃผ๊ฐ„ ๋‰ด์Šค๋ ˆํ„ฐ - ํ•ด์™ธ ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ์ˆ  ํŠธ๋ Œ๋“œ - 7์›” 5์ฃผ์ฐจ

๋งค์ฃผ ์›”์š”์ผ, ํ•ด์™ธ ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ์ˆ  ํŠธ๋ Œ๋“œ ์ค‘ ์ฃผ๋ชฉํ•  ๋งŒํ•œ ๋‚ด์šฉ๋“ค์„ ์„ ๋ณ„ํ•ด ๊ณต์œ ๋“œ๋ฆฝ๋‹ˆ๋‹ค. ์‰ฝ๊ณ  ๋น ๋ฅด๊ฒŒ ์—…๊ณ„ ํŠธ๋ Œ๋“œ๋ฅผ ํ•จ๊ป˜ ์‚ดํŽด๋ณด์•„์š”. --- 1. React ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ์˜ ์ƒํƒœ ๊ด€๋ฆฌ State Management in React Applications ๋งํฌ: https://reacthandbook.dev/state-management React ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์ƒํƒœ ๊ด€๋ฆฌ์— ๋Œ€ํ•œ ๋‚ด์šฉ์„ ๋‹ค๋ฃจ๋Š” ๋ฌธ์„œ์ž…๋‹ˆ๋‹ค. React๋Š” ์ปดํฌ๋„ŒํŠธ ๊ธฐ๋ฐ˜์˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋กœ, ์ปดํฌ๋„ŒํŠธ์˜ ์ƒํƒœ(state)๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. ์ด ๋ฌธ์„œ๋Š” ํ˜„๋Œ€์ ์ธ ์ƒํƒœ ๊ด€๋ฆฌ ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์ƒ์„ธํ•˜๊ฒŒ ์„ค๋ช…ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. React์˜ ๋‚ด์žฅ ์ƒํƒœ ๊ด€๋ฆฌ ๊ธฐ๋Šฅ์ธ useState ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ, Redux, MobX ๋“ฑ๊ณผ ๊ฐ™์€ ๋‹ค๋ฅธ ์ƒํƒœ ๊ด€๋ฆฌ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๋Œ€ํ•ด์„œ๋„ ๋‹ค๋ฃจ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์ƒํƒœ ๊ด€๋ฆฌ๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ์ˆ˜ํ–‰ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์ดํ•ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 2. When to useMemo and useCallback ๋งํฌ: https://kentcdodds.com/blog/usememo-and-usecallback React ํ›…์ธ useMemo์™€ useCallback์˜ ์ ์ ˆํ•œ ์‚ฌ์šฉ ์‹œ๊ธฐ์— ๋Œ€ํ•ด ์„ค๋ช…ํ•œ ๊ธ€์ž…๋‹ˆ๋‹ค. useMemo๋Š” ๊ณ„์‚ฐ ๋น„์šฉ์ด ๋†’์€ ์—ฐ์‚ฐ์„ ์ตœ์ ํ™”ํ•˜๊ณ , useCallback์€ ๋ถˆํ•„์š”ํ•œ ํ•จ์ˆ˜ ์ƒ์„ฑ์„ ๋ฐฉ์ง€ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ํ›…๋“ค์„ ์–ธ์ œ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š”์ง€์— ๋Œ€ํ•œ ๋ช…ํ™•ํ•œ ๊ทœ์น™์€ ์—†์ง€๋งŒ, ์ด ๊ธ€์€ ํ›…๋“ค์˜ ๋™์ž‘ ์›๋ฆฌ์™€ ์ ์šฉ ์‹œ๊ธฐ๋ฅผ ์ดํ•ดํ•˜๋Š” ๋ฐ ๋„์›€์„ ์ค๋‹ˆ๋‹ค. ์„ฑ๋Šฅ ์ตœ์ ํ™”์™€ ๊ด€๋ จ๋œ ์ฃผ์ œ์— ๊ด€์‹ฌ ์žˆ๋Š” ๊ฐœ๋ฐœ์ž๋ผ๋ฉด ๊ผญ ์ฝ์–ด๋ณด์„ธ์š”. 3. ํ…Œ์ŠคํŒ…์— ์œ ์šฉํ•œ Chrome ๋ธŒ๋ผ์šฐ์ €์˜ ์ƒˆ๋กœ์šด ๋ฒ„์ „ Chrome for Testing ๋งํฌ: https://developer.chrome.com/blog/chrome-for-testing/ ํ…Œ์ŠคํŒ…์— ์œ ์šฉํ•œ Chrome ๋ธŒ๋ผ์šฐ์ €์˜ ์ƒˆ๋กœ์šด ๋ฒ„์ „์— ๋Œ€ํ•ด ์†Œ๊ฐœํ•˜๋Š” ๊ธ€์ž…๋‹ˆ๋‹ค. Chrome ํŒ€์ด ๊ฐœ๋ฐœ์ž๋“ค์˜ ์—”๋“œ ํˆฌ ์—”๋“œ(End-to-End) ํ…Œ์ŠคํŠธ ํ™˜๊ฒฝ์—์„œ ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด ์ƒˆ๋กœ์šด ๋ฒ„์ „์˜ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ถœ์‹œํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด ์ƒˆ๋กœ์šด ๋ฒ„์ „์€ ํ…Œ์ŠคํŠธ ์‹คํ–‰ ์ค‘ ์ž๋™ ์—…๋ฐ์ดํŠธ๊ฐ€ ์—†์œผ๋ฏ€๋กœ ํ…Œ์ŠคํŠธ์— ์˜ํ–ฅ์„ ์ฃผ๋Š” ์ƒํ™ฉ์„ ๋ฐฉ์ง€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋˜ํ•œ, ์›ํ•˜๋Š” ํŠน์ • ๋ฒ„์ „์˜ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์„ ํƒํ•˜์—ฌ ์•ˆ์ •์ ์ธ ํ™˜๊ฒฝ์—์„œ ํ…Œ์ŠคํŠธ๋ฅผ ์‹คํ–‰ํ•˜๊ณ  ์ด์Šˆ๋ฅผ ์žฌํ˜„ํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค. 4. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Imports ์ž‘๋™ ์›๋ฆฌ JavaScript Imports Under The Hood ๋งํฌ: https://blog.jim-nielsen.com/2023/imports-under-the-hood/ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ Imports ์ž‘๋™ ์›๋ฆฌ์— ๋Œ€ํ•ด ์„ค๋ช…ํ•˜๋Š” ๊ธ€์ž…๋‹ˆ๋‹ค. ๊ฐœ๋ฐœ์ž๋“ค์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋ชจ๋“ˆํ™”ํ•˜๊ธฐ ์œ„ํ•ด ์ฃผ๋กœ import ๋ฌธ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ์ด ๊ธ€์€ import ๋ฌธ์ด ์‹ค์ œ๋กœ ์–ด๋–ป๊ฒŒ ์ž‘๋™ํ•˜๋Š”์ง€๋ฅผ ๊นŠ์ด ํŒŒํ—ค์น˜๋ฉฐ, ์šฐ๋ฆฌ๊ฐ€ ๋ณต์žกํ•œ ๊ธฐ๋Šฅ์„ ๊ตฌ์ถ•ํ•˜๊ณ  ๊ฐ„ํŽธํ•˜๊ฒŒ ๋งŒ๋“ค์–ด์ฃผ๋Š” ๋„๊ตฌ์— ์–ผ๋งˆ๋‚˜ ์˜์กดํ•˜๋Š”์ง€๋ฅผ ์ƒ๊ธฐ์‹œ์ผœ ์ค๋‹ˆ๋‹ค. 5. JavaScript๋กœ ๊ตฌํ˜„๋œ ๊ธฐ๋ณธ ์ปดํŒŒ์ผ๋Ÿฌ ๊ธฐ๋Šฅ ํŠœํ† ๋ฆฌ์–ผ The Super Tiny Compiler ๋งํฌ: https://github.com/jamiebuilds/the-super-tiny-compiler ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๊ตฌํ˜„๋œ ๊ธฐ๋ณธ ์ปดํŒŒ์ผ๋Ÿฌ ๊ธฐ๋Šฅ์— ๋Œ€ํ•œ ํŠœํ† ๋ฆฌ์–ผ์ž…๋‹ˆ๋‹ค. ์ปดํŒŒ์ผ๋Ÿฌ๋Š” ์†Œ์Šค ์ฝ”๋“œ๋ฅผ ๋‹ค๋ฅธ ํ˜•ํƒœ์˜ ์ฝ”๋“œ๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ์—ญํ• ์„ ํ•ฉ๋‹ˆ๋‹ค. ์ด ํŠœํ† ๋ฆฌ์–ผ์€ ์ปดํŒŒ์ผ๋Ÿฌ์˜ ๊ธฐ๋ณธ์ ์ธ ๋™์ž‘ ์›๋ฆฌ๋ฅผ ๊ฐ„๋‹จํžˆ ์†Œ๊ฐœํ•˜๋ฉด์„œ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์–ด๋–ป๊ฒŒ ์ปดํŒŒ์ผ๋Ÿฌ๋ฅผ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š”์ง€๋ฅผ ์•Œ๋ ค์ค๋‹ˆ๋‹ค. ์ปดํŒŒ์ผ๋Ÿฌ์— ๋Œ€ํ•œ ์ดํ•ด๋ฅผ ๋†’์ด๊ณ ์ž ํ•˜๋Š” ๊ฐœ๋ฐœ์ž๋“ค์—๊ฒŒ ์œ ์šฉํ•œ ์ž๋ฃŒ์ž…๋‹ˆ๋‹ค

์•Œ๋ฆผ

์•Œ๋ฆผ์ด ์—†์Šต๋‹ˆ๋‹ค