๐Ÿšค ์„ฑ์žฅ์ผ์ง€ 7.0

์ฑ… ํ–‰๋ณตํ•œ ์ด๊ธฐ์ฃผ์˜์ž(์›จ์ธ ๋‹ค์ด์–ด)์˜ ๋‚ด์šฉ์— ์ž๊ทน๋ฐ›์•„ ์‹œ์ž‘ํ•˜๋Š” ์†Œ๋ฐ•ํ•œ ์„ฑ์žฅ๊ธฐ๋ก

์‚ด์•„์žˆ๋Š” ๊ฝƒ๊ณผ ์ฃฝ์€ ๊ฝƒ์€ ์–ด๋–ป๊ฒŒ ๊ตฌ๋ณ„ํ•˜๋Š”๊ฐ€?
์„ฑ์žฅํ•˜๊ณ  ์žˆ๋Š” ๊ฒƒ์ด ์‚ด์•„ ์žˆ๋Š” ๊ฒƒ์ด๋‹ค.
์ƒ๋ช…์˜ ์œ ์ผํ•œ ์ฆ๊ฑฐ๋Š” ์„ฑ์žฅ์ด๋‹ค!

โš› (7.0)<์™„์ „ ๊ฐœํŽธ> ํŒŒ์ธ๋งŒ ํ•™์Šต๋ฒ•์„ ์•Œ๊ฒŒ ๋œ๋งŒํผ, ์„ฑ์žฅ์ผ์ง€๋Š” ์ •๋ง ๊ทธ ๋‚ ์˜ ํ‚ค์›Œ๋“œ ์ค‘์‹ฌ์œผ๋กœ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ •๋ฆฌํ•˜๋„๋ก ํ•œ๋‹ค.

โš›๏ธ ํ‚ค์›Œ๋“œ: ์ง๊ด€์ ์ด๊ณ  ์‰ฝ๊ณ  ๊ฐ„๋‹จํ•˜๊ฒŒ ์ž‘์„ฑ

React: Context API

๊ทธ๋™์•ˆ ๊ทธ๋ƒฅ ๋ง‰์—ฐํ•˜๊ฒŒ Context API๋ฅผ ์ƒํƒœ ๊ด€๋ฆฌ์™€ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ์—ฐ๊ด€์ง€์–ด์„œ ์ƒ๊ฐํ–ˆ์—ˆ๋‹ค. ํ—Œ๋ฐ ์˜ค๋Š˜ ์„ธ์…˜์„ ๋“ฃ๊ณ ์„œ ์™œ Context API์ธ์ง€, ์–ด๋–ค ์ƒํ™ฉ์—์„œ Context API๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒŒ ์ ์ ˆํ•˜์ง€, ๊ทธ๋ฆฌ๊ณ  ์‹ค์ œ Context๋ฅผ ์–ด๋–ป๊ฒŒ ๋ถ„๋ฆฌํ•˜๊ณ  ๊ฐ๊ฐ์„ ๊ด€๋ฆฌํ•˜๋Š” ๊ฒŒ ์ข‹์€์ง€ ์•Œ๊ฒŒ ๋˜์—ˆ๋‹ค. ์ผ๋‹จ ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ์—๊ฒŒ ๋ฌธ๋งฅ์„ ์ „๋‹ฌํ•œ๋‹ค๋Š” ์˜๋ฏธ์—์„œ Context API๋ผ๋Š” ๊ฒŒ ์ถฉ๊ฒฉโ€ฆ ๋ง๋ถ™์—ฌ Context API์™€ useState ํ˜น์€ useReducer๋ฅผ ๊ฐ™์ด ์‚ฌ์šฉํ•˜๋ฉด ์ด์ œ์„œ์•ผ ์ „์—ญ ์ƒํƒœ ๊ด€๋ฆฌ์˜ ์—ญํ• ์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค.

MSW์˜ ์›๋ฆฌ

ํ”„๋กœ์ ํŠธ ์ง„ํ–‰ ์ค‘, ์ œ๊ณต๋˜๋Š” ์„œ๋ฒ„ ๋ ˆํฌ๋ฅผ ํด๋ก ํ•ด์„œ ๋‹ค๋ฅธ ํฌํŠธ์— ์˜ฌ๋ ค๋‘๊ณ  api ํ†ต์‹ ์„ ํ•˜๋Š” ๊ฒŒ ๋„ˆ๋ฌด ๊ท€์ฐฎ์•„์„œ ์ด์ „์— ์‚ฌ์šฉํ•ด๋ณด๊ณ  ์‹ถ์—ˆ๋˜ MSW๋ฅผ ์‚ฌ์šฉํ•ด๋ดค๋‹ค. ์‚ฌ์‹ค ๊ทธ๋™์•ˆ Node๋‚˜ Express๋กœ ๊ตฌํ˜„ํ•œ ์„œ๋ฒ„์™€ ํฌ๊ฒŒ ๋‹ค๋ฅด์ง€ ์•Š๋‹ค๊ณ  ๋Š๊ผˆ๋Š”๋ฐ ๊ทธ ์›๋ฆฌ ์ž์ฒด๊ฐ€ ์ฐจ์ด๊ฐ€ ํฐ ๊ฒƒ ๊ฐ™๋‹ค. ์ผ๋‹จ ํ”„๋ก ํŠธ์—”๋“œ๋‹จ์˜ ํ”„๋กœ์ ํŠธ์—์„œ ํ†ต์‹ ์„ ๊ฐ€๋กœ์ฑ„์„œ ์‘๋‹ต์„ ํ•˜๋Š” ๋ฐฉ์‹์ด๋ผ๋Š” ๊ฒŒ ์ฐธ ํฅ๋ฏธ๋กœ์› ๋‹ค. ๋˜, ์ด์— ๋Œ€ํ•œ ํ…Œ์ŠคํŒ…๊นŒ์ง€ ๊ฐ€๋Šฅํ•˜๋‹ค๋‹ˆโ€ฆ ๊ทธ๋ƒฅ ๊ฐ„๋‹จํ•œ ์„œ๋ฒ„์™€ api๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๊ฒƒ๋„ ๋„ˆ๋ฌด ์ข‹์ง€๋งŒ, msw๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์–ด๋Š์ •๋„ ์„œ๋ฒ„ api ์งœ๋Š” ๊ฒฝํ—˜๋„ ํ•˜๋ฉด์„œ ๊ฐœ๋ฐœ ์†๋„์—๋„ ๋„์›€์ด ๋  ๊ฒƒ ๊ฐ™๋‹ค.

๐Ÿ“ ํšŒ๊ณ 

์˜ค๋Š˜ ๋ฐฐ์šด ์˜์กด์„ฑ๋ถ€ํ„ฐ ํšก๋‹จ ๊ด€์‹ฌ์‚ฌ, ๊ทธ๋ฆฌ๊ณ  ์•„์ง๋„ ์กฐ๊ธˆ ํ—ท๊ฐˆ๋ฆฌ๋Š” ๋ฉ”๋ชจ์ด์ œ์ด์…˜โ€ฆ ๊ฐœ๋…๋“ค์€ ์•Œ๊ฒ ๋Š”๋ฐ ์ด๋ฅผ ์–ด๋–ป๊ฒŒ ์ฝ”๋“œ์— ์ ์šฉํ•˜๊ณ  ๋…น์ผ์ง€๊ฐ€ ์ฐธ ์‰ฝ์ง€ ์•Š์€ ๊ฒƒ ๊ฐ™๋‹ค. ๊ทธ๋ž˜๋„ ์˜ค๋Š˜ ํ”„๋กœ์ ํŠธํ•˜๋ฉด์„œ ์ด์ œ ์›ฌ๋งŒํ•œ ํ”„๋กœ์ ํŠธ ๊ตฌ์„ฑ์€ ์ฐฉ์ฐฉ ํ•˜๋Š” ๊ฒƒ ๊ฐ™์•„์„œ ๊ธฐ๋ถ„์ด ์ข‹๋‹ค! :) UI์™€ ์ปค์Šคํ…€ ํ›…๋“ค์„ ์–ด๋Š์ •๋„ ๊ตฌํ˜„ํ–ˆ์œผ๋‹ˆ, ๋‚ด์ผ ๋“œ๋””์–ด Query์™€ ๊ฐ™์€ ์บ์‹ฑ์ฒ˜๋ฆฌ์— ์‹œ๊ฐ„์„ ๋งŽ์ด ์Ÿ์•„๋ด์•ผ์ง€!

์ฐธ๊ณ