๐ Study/๐ฉบ Testing ์ธ๋ค์ผํ ๋ฆฌ์คํธํ ๐ 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 ๊ฐ์ ํธํ๊ฒ ์์ ํ๋ฉด์ ์ด๋ป๊ฒ ๋ ๋๋ง ๋๋์ง ์ฝ๊ฒ ํ ์คํธ ํ ์ ์๋ ์คํ ๋ฆฌ๋ถ์ ์จ๋ณด๋ฉด ์ ๋ง ํธํ๊ณ ์ข๋ค. ๊ทธ๋ ๊ธฐ์ ์ปดํฌ๋ํธ ๋จ์๋ก ๊ฐ๋ฐ์ ํ ์ ์๊ณ ๋ ์ผ์ข ์ ํ๋ก์ ํธ ๋ฌธ์ํ ์์ ๋ ํ ์ ์๋ค. ๊ทธ๋ฐ๋ฐ ๊ฒฝํ์ ์ฒ์ ์จ๋ณด๋ ค๊ณ ํ ๋ ์คํ ๋ฆฌ๋ถ์ด ์ ํํ ๋ญ์ง๋ ๋ชจ๋ฅด๊ฒ ๊ณ ์ด๋ป๊ฒ ์์ํด์ผ ํ ์ง ๊ฐ์ด ์ ์ ์ค๋๋ฐ ๋ฌด์๋ณด๋ค ์คํ ๋ฆฌ ํ ์คํธ ์ฝ๋๋ฅผ ๋ฐ๋ก ์์ฑ์ ํด์ผ ํ๋ค๋ ๋ถ๋ด๊ฐ์ ์ ๋ป ์์ํ๊ธฐ๊ฐ ์ด๋ ค์ด ๊ฑฐ ๊ฐ๋ค. ํ์ง๋ง ๋ง์ ํ๋ฒ ์ ์ฉํด์ ์ด๊ฑฐ์ ๊ฑฐ ๊ฑด๋๋ ค๋ณด๋ฉฐ ์ด๋ ์ ๋ ์ ์ํ๊ณ ๋๋ฉด ๊ทธ๋ฅ ๊ณต์ฅ์ฒ๋ผ ์ฐ์ด๋ผ ์ ์๋ค! ^-^)ใ ์.. ๋๋ณด๊ธฐ ์ด์ 1 ๋ค์