React 2

[ ํ† ์ด ํ”„๋กœ์ ํŠธ ] ์ง€๋ขฐ์ฐพ๊ธฐ ๊ฒŒ์ž„ ๋งŒ๋“ค๊ธฐ ( feat. typescript, react, mobx )

ํ”„๋กœ์ ํŠธ ๋™๊ธฐ ์ด ํ”„๋กœ์ ํŠธ๊ฐ€ ์ง€๋ขฐ์ฐพ๊ธฐ์—ฌ์•ผ ํ•˜๋Š” ํฐ ์ด์œ ๋Š” ์—†๋‹ค. mobx๋ฅผ ์จ๋ณด๋Š” ๊ฒƒ์— ํฐ ์˜๋ฏธ๋ฅผ ๋‘” ํ”„๋กœ์ ํŠธ์˜€๋‹ค. ๊ธฐ๋ณธ์ ์ธ ๊ธฐ๋Šฅ์€ ๊ตฌํ˜„์ด ์™„๋ฃŒ๋˜์—ˆ๊ณ  ์•ž์œผ๋กœ๋Š” ์ถ”๊ฐ€์ ์ธ ๊ธฐ๋Šฅ, ๋ฒ„๊ทธ ์ˆ˜์ •์„ ์ง„ํ–‰ํ•  ์˜ˆ์ •์ด๋‹ค. stack๐Ÿ”— CRA-typescript eslint prettier styled-component mobx ์ง€๋ขฐ์ฐพ๊ธฐ๋ฅผ ๋งŒ๋“ค๊ธฐ๋กœ ํ–ˆ๋‹ค๋ฉด, ์ด๋Ÿฐ ๊ฒŒ์ž„ ๊ตฌํ˜„์ด ์ต์ˆ™ํ•˜์ง€ ์•Š์„ ๋•Œ ๋ง‰๋ง‰ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ฐ”๋กœ ์ฝ”๋“œ๋ฅผ ๋ณด๊ณ  ๋”ฐ๋ผ ํ•˜๋Š” ๊ฒƒ๋„ ์ข‹์ง€๋งŒ ์ง์ ‘ ์ƒ๊ฐํ•ด๋ณด๋ฉฐ ๊ตฌํ˜„ํ•ด๋ณด๊ณ  ์‹ถ์€ ์‚ฌ๋žŒ์€ ๋‚ด๊ฐ€ ๊ตฌํ˜„ํ•˜๋ฉด์„œ ์ƒ๊ฐํ•œ ์ˆœ์„œ๋ฅผ ์ž‘์„ฑํ–ˆ์œผ๋‹ˆ ๊ฐ€์ด๋“œ๊ฐ€ ํ•„์š”ํ•˜๋‹ค๋ฉด ์ฐธ๊ณ ํ•˜์‹œ๊ธธ!๐Ÿ™๐Ÿผ ์ง€๋ขฐ์ฐพ๊ธฐ ๊ตฌํ˜„ ๊ฐ€์ด๋“œ matrix ํ˜•ํƒœ์˜ ๊ฒŒ์ž„ ๋ณด๋“œ๋ฅผ ๋งŒ๋“ ๋‹ค. ( ๋‚˜๋Š” 8x8 ๋กœ ์„ธํŒ…ํ–ˆ๋‹ค. Array์˜ ๋‚ด์žฅ ๋ฉ”์„œ๋“œ์ธ from() ๊ณผ fill()์„ ์‚ฌ์šฉํ–ˆ๋‹ค...

dev 2022.05.09

[ react ] react-router-dom v6_v5์™€์˜ ์ฐจ์ด์™€ routing

SPA ์˜ ๊ฒฝ์šฐ ์„œ๋ฒ„์—์„œ ์‚ฌ์šฉ์ž์—๊ฒŒ ์ œ๊ณตํ•˜๋Š” ํŽ˜์ด์ง€๋Š” ํ•œ ์ข…๋ฅ˜์ด์ง€๋งŒ, ํ•ด๋‹น ํŽ˜์ด์ง€์—์„œ ๋กœ๋”ฉ๋œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ ํ˜„์žฌ ์‚ฌ์šฉ์ž ๋ธŒ๋ผ์šฐ์ €์˜ ์ฃผ์†Œ ์ƒํƒœ์— ๋”ฐ๋ผ ๋‹ค์–‘ํ•œ ํ™”๋ฉด์„ ๋ณด์—ฌ์ค„ ์ˆ˜ ์žˆ๋‹ค. ๋‹ค๋ฅธ ์ฃผ์†Œ์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ํ™”๋ฉด์„ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒƒ์„ ๋ผ์šฐํŒ…์ด๋ผ๊ณ  ํ•œ๋‹ค. ๋ฆฌ์•กํŠธ ์ž์ฒด์— ์ด ๊ธฐ๋Šฅ์ด ๋‚ด์žฅ๋˜์–ด ์žˆ์ง€๋Š” ์•Š์ง€๋งŒ, ๋ธŒ๋ผ์šฐ์ € API๋ฅผ ์ง์ ‘ ์‚ฌ์šฉํ•˜์—ฌ ์ด๋ฅผ ๊ด€๋ฆฌํ•˜๊ฑฐ๋‚˜, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ด ์ž‘์—…์„ ๋”์šฑ ์‰ฝ๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ฆฌ์•กํŠธ ๋ผ์šฐํŒ… ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๋ฆฌ์•กํŠธ ๋ผ์šฐํ„ฐ ( react-router ), ๋ฆฌ์น˜ ๋ผ์šฐํ„ฐ (reach-router), Next.js ๋“ฑ ์—ฌ๋Ÿฌ๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค. ๊ทธ ์ค‘ ์šฐ๋ฆฌ๋Š” ๋ฆฌ์•กํŠธ ๋ผ์šฐํ„ฐ์— ๋Œ€ํ•ด ๋‹ค๋ค„๋ณด์ž. ๋ฆฌ์•กํŠธ ๋ผ์šฐํ„ฐ๋Š” ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ์—์„œ ์ด๋ฃจ์–ด์ง€๋Š” ๋ผ์šฐํŒ…์„ ์•„์ฃผ ๊ฐ„๋‹จํ•œ๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•œ๋‹ค. ๋” ๋‚˜์•„๊ฐ€ ๋‚˜..

dev/react 2022.04.08