๐ Study ์ธ๋ค์ผํ ๋ฆฌ์คํธํ useSyncExternalStore? ๐ก ํ์ต ๊ณต์ ์คํฐ๋์์ ๋ฐํ๋ฅผ ์ํด ์ ๋ฆฌํ ๊ธ์ ๋๋ค. ๐ค ๋น ๋ฅธ ์์ฑ์ ์ํด ์์ด์ฒด๋ก ์์ฑ๋์ด ์์ต๋๋ค. โ ๏ธ ํ์ต ์ค์ ์์ฑํ ๊ธ์ด๋ฏ๋ก ๋ด์ฉ์ ์ค๋ฅ๊ฐ ์์ ์ ์์ต๋๋ค! ๐ฅฐ ์ค๋ฅ๋ฅผ ๋ฐ๊ฒฌํ์ ๋ค๋ฉด ๋๊ธ๋ก ์๋ ค์ฃผ์๋ฉด ๊ฐ์ฌํ๊ฒ ์ต๋๋ค! โ๏ธ useSyncExternalStore ์ ๋์ด? 1. React 18์ ํ์ , Concurrency React ํ์ React 18์ ๋ฐํํ๋ฉด์, ์ด๋ฒ ๋ฆด๋ฆฌ์ฆ๋ ๋์์ฑ(Concurrency) ์ ๋์ ์ผ๋ก ๋ ๋๋ง ์์ง ๊ฐ์ (์๋๋ฐฐ์นญ)๊ณผ ์ฌ์ฉ์ ๊ฒฝํ ํฅ์(transition, suspense)์ ์ง์คํ๋ค๊ณ ํจ. ๋์์ฑ์ด ๋จผ๋? ์ด๋ฆ ๊ทธ๋๋ก ์์์ ์๊ด์์ด ๋์์ ์ํ ๋ ์ ์๋ ์ฑ์ง. ํ๋ก๊ทธ๋๋ฐ ์ ์ธ ๊ฐ๋ ์ผ๋ก ๋งํ๋ฉด ํ๋ก๊ทธ๋จ์ ๋ ๋ฆฝ์ ์ผ๋ก ์คํ๋ ์ ์๋ ์ฌ๋ฌ ์กฐ๊ฐ์ผ๋ก ๋๋์ด .. ๋๋ณด๊ธฐ ๐ Storybook Error : useLocation() may be used only in the context of a <Router> component. ์ด ์๋ฌ๋ ๋ฉ์ธ์ง์์๋ ์ ์ ์๋ค ์ถ์ด ์ปดํฌ๋ํธ ๋ด์์ useLocation() ๋ฉ์๋๋ฅผ ์ฌ์ฉํ ๋ ์ด๊ฑด Router ์ปดํฌ๋ํธ ๋ด์์๋ง ์ฌ์ฉ ํ ์ ์๋ค๊ณ ๊ฒฝ๊ณ ํ๋ ์๋ฌ๋ค. ์๋๋ ์ด ์๋ฌ๋ฅผ storybook-react-rouer ๋ฅผ ์ค์นํด ํด๊ฒฐ ํ ์ ์๋๊ฑฐ ๊ฐ์๋ฐ ์ต๊ทผ ์ ๋ฐ์ดํธ ๋ React Router v.6 ๋ ํธํ์ด ์๋๋๊ฑด์ง ๋ญ์ง ๋๋ ์ ์ฉ์ด ์ ์๋๋ค...ใ ๊ทธ๋์ ์ด๋ฆฌ์ ๋ฆฌ ๋ฐฉ๋ฒ์ ์ฐพ์๋ณด๋ค ์์๋ฐฉํธ์ผ๋ก ์๋์ ๊ฐ์ด ์ฐ์ ํด๊ฒฐํ๋ค. function TestRouter({ children }) { return ( ); } ์ด๋ฐ ์๋ฌด ์ญํ ๋ ์ํ๋ Router ๋ฅผ ํ๋ ๋ง๋ค๊ณ export const decorators = [ Story => ( ), ]; .storybook/preview.js ํ.. ๋๋ณด๊ธฐ Storybook Chromatic ์ผ๋ก ๋ฐฐํฌํด๋ณด๊ธฐ! + ๋ฒ์ธ Netlify Storybook์ ๋จ์ํ ํ ์คํ ํด์ ๋์ด ํ์ & ๋ฌธ์ํ ํด์ด๋ค. ๊ทธ๋ฌ๊ธฐ ์ํด์ ๋น์ฐํ ๊ณต์ ํ ์ ์๋๋ก ๋ฐฐํฌ๋ ํ ์ ์๊ณ Storybook์ ๋ฐฐํฌํ๊ธฐ ์ํ ์ ์ฉ ์๋น์ค๊น์ง ์๋ค. ๊ทธ๊ฒ์ด ๋ฐ๋ก Chromatic! Chromatic ๊ณผ ํจ๊ป๋ผ๋ฉด ๋ฐฐํฌ๋ ๋ฌผ๋ก ๊ทธ ์ดํ์ build ๊ด๋ฆฌ๊น์ง Storybook ๋ง์ถค์ผ๋ก ์์ฝ๊ฒ ํ ์ ์๋ค! ์ค๋น๋ฌผ์ Storybook์ ์ ์ฉํ ํ๋ก์ ํธ Github ๋ ํฌ์งํ ๋ฆฌ๋ง ์์ผ๋ฉด ๋๋ค! 1. ๊ฐ์ ๋จผ์ Chromatic ์ฌ์ดํธ์ ์ ์ํด Github ๊ณ์ ์ผ๋ก ๊ฐ์ ์ ํด์ฃผ์! 2. ํ๋ก์ ํธ ์์ฑ ์๋ง ์ต์ด ํ์๊ฐ์ ์ ํด์ ๋ก๊ทธ์ธ์ ํ๋ฉด ์์ ํ๋ฉด์ด ๋ฐ ๊ฒ์ด๋ค. ์ฌ๊ธฐ์ Choose from GitHub์ ์ ํ! ๋ง์ฝ ์๋ฌ๋ค๋ฉด ํ๋ฉด Projects ํญ์ ์๋ add projec.. ๋๋ณด๊ธฐ React ํ๋ก์ ํธ์ Storybook ์ผ๋จ ์ฌ์ฉํด๋ณด๊ธฐ! with TS ๐กStorybook์ ๋ํ ์ดํด์ ํ์ต๋ณด๋ค ๋น ๋ฅธ ์ ์ฉ์ ๋ชฉ์ ์ผ๋ก ์ ๋ฆฌํ ๊ธ์ ๋๋ค! โ ๏ธ Storybook ํ์ต ์ค์ ์์ฑํ ๊ธ์ด๋ฏ๋ก ๋ด์ฉ์ ์ค๋ฅ๊ฐ ์์ ์ ์์ต๋๋ค! ์ปดํฌ๋ํธ์ props ๊ฐ์ ํธํ๊ฒ ์์ ํ๋ฉด์ ์ด๋ป๊ฒ ๋ ๋๋ง ๋๋์ง ์ฝ๊ฒ ํ ์คํธ ํ ์ ์๋ ์คํ ๋ฆฌ๋ถ์ ์จ๋ณด๋ฉด ์ ๋ง ํธํ๊ณ ์ข๋ค. ๊ทธ๋ ๊ธฐ์ ์ปดํฌ๋ํธ ๋จ์๋ก ๊ฐ๋ฐ์ ํ ์ ์๊ณ ๋ ์ผ์ข ์ ํ๋ก์ ํธ ๋ฌธ์ํ ์์ ๋ ํ ์ ์๋ค. ๊ทธ๋ฐ๋ฐ ๊ฒฝํ์ ์ฒ์ ์จ๋ณด๋ ค๊ณ ํ ๋ ์คํ ๋ฆฌ๋ถ์ด ์ ํํ ๋ญ์ง๋ ๋ชจ๋ฅด๊ฒ ๊ณ ์ด๋ป๊ฒ ์์ํด์ผ ํ ์ง ๊ฐ์ด ์ ์ ์ค๋๋ฐ ๋ฌด์๋ณด๋ค ์คํ ๋ฆฌ ํ ์คํธ ์ฝ๋๋ฅผ ๋ฐ๋ก ์์ฑ์ ํด์ผ ํ๋ค๋ ๋ถ๋ด๊ฐ์ ์ ๋ป ์์ํ๊ธฐ๊ฐ ์ด๋ ค์ด ๊ฑฐ ๊ฐ๋ค. ํ์ง๋ง ๋ง์ ํ๋ฒ ์ ์ฉํด์ ์ด๊ฑฐ์ ๊ฑฐ ๊ฑด๋๋ ค๋ณด๋ฉฐ ์ด๋ ์ ๋ ์ ์ํ๊ณ ๋๋ฉด ๊ทธ๋ฅ ๊ณต์ฅ์ฒ๋ผ ์ฐ์ด๋ผ ์ ์๋ค! ^-^)ใ ์.. ๋๋ณด๊ธฐ ํ์ ์คํฌ๋ฆฝํธ ๊ธฐ๋ณธ & ๊ธฐ๋ณธ ํ์ ๐ก Udemy ์ Typescript : ๊ธฐ์ด๋ถํฐ ์ค์ ํ ํ๋ก์ ํธ๊น์ง ๊ฐ์ ์คํฐ๋์์ ํ์ตํ ๋ด์ฉ์ ๊ธฐ๋ฐ์ผ๋ก ์์ฑํฉ๋๋ค. ๐ ์คํฐ๋ ๋ ์ง : 22.05.29 # ์ ์ ํ์ ์ธ์ด VS ๋์ ํ์ ์ธ์ด 1. ๋์ ํ์ ์ธ์ด ์ค์ ์์ค ์ฝ๋๊ฐ ์คํ๋๋ ์์ ์ธ ๋ฐํ์ ์ ํ์ ์ ์ฒดํฌํ๊ณ ๊ฒฐ์ ํ๋ค. ์ฝ๋๋ฅผ ์์ฑ ํ ๋ ํ์ ์ ์ธ์ด๋ ํ์ ์ ๋ํ ๊ท์น์ ์งํฌ ํ์๊ฐ ์์ด ์๋์ ์ผ๋ก ์ฝ๋๊ฐ ์งง์ผ๋ฉฐ ๋ฌ๋ ์ปค๋ธ๊ฐ ๋ฎ๋ค. ํ์ ์ ๋ช ์ ํ ํ์๊ฐ ์์ด ์ ์ ํ์ ์ธ์ด์ ๋นํด ์ฝ๋๋ฅผ ๋น ๋ฅด๊ฒ ์์ฑํ ์ ์๋ค. ์ฝ๋ ๋ด์์ ํ์ ์ ์ ๋์ ์ผ๋ก ๋ณ๊ฒฝํ๋ฉฐ ์ฌ์ฉ ํ ์ ์๋ค. ๋ฐํ์ ํ์ ์ค๋ฅ๋ฅผ ๋ฐ์์ํฌ ๊ฐ๋ฅ์ฑ์ด ๋๋ค. ์ฝ๋๋ฅผ ์ฝ์๋ ํ์ ์ ์ถ๋ก ํ๋ฉฐ ์ฝ์ด์ผ ํ๊ธฐ ๋๋ฌธ์ ๊ฐ๋ ์ฑ์ด ์๋์ ์ผ๋ก ์ข์ง ์๋ค. ex ) JavaScript 2. .. ๋๋ณด๊ธฐ ์ด์ 1 ๋ค์