Storybook
Storybook์ด๋?
UI ์ปดํฌ๋ํธ๋ฅผ ๊ฐ๋ฐํ ๋ ์ฒด๊ณ์ ์ด๊ณ ํจ์จ์ ์ผ๋ก ๊ฐ๋ฐํ ์ ์๋๋ก ๋์์ฃผ๋ ์ ์ฉํ ํด
๋ค์ํ ์ํ(์คํ ๋ฆฌ)์ ๋ฐ๋ผ ๋ณ๊ฒฝ๋๋ ์คํ์ผ์ ๋ฌธ์ ํํ๋ก ๊ด๋ฆฌํ๋ค.
์ฅ์
์ปดํฌ๋ํธ๋ฅผ ๊ฐ๋ณ์ ์ผ๋ก ๊ด๋ฆฌํ ์ ์๊ณ ๋ค์ํ ์๋๋ฆฌ์ค์์์ ๋์์ ๊ฐํธํ๊ฒ ํ์ธ ๊ฐ๋ฅ
์คํ ๋ฆฌ๋ถ์ ์ฌ์ฉํ๋ฉด ๋ฐ๊ฐ์ ๋ก ์ฌ์ฌ์ฉ์ฑ์ ๊ณ ๋ คํ ๊น๋ํ ์ปดํฌ๋ํธ๋ฅผ ์์ฑํ๊ฒ๋๋ค.
๋ฌธ์ํํ๋ก ๊ด๋ฆฌ๋๊ธฐ ๋๋ฌธ์ ์ปดํฌ๋ํธ๋ฅผ ๋์ฑ ์ฝ๊ฒ ์ดํดํ๊ณ ์ฌ์ฉํ ์ ์๊ฒ ๋๋ค.
์ฑ๊ณผ ๋ณ๊ฐ๋ก ๋ฐฐํฌํ ์ ์์ด ์์ ๋ฌผ์ ๊ณต์ ํ๊ธฐ ์ฝ๋ค.
๋์์ด๋์ ์ํตํ๊ธฐ ์ฌ์์ง๋ค.
๋์ ํ์ง์ ์ ํ๋ฆฌ์ผ์ด์ ์ ๊ฐ๋ฐํ๋๋ฐ ๋์์ด ๋๋ค.
๋จ์
ํ์ต๊ณก์ ์ด ๊ฝค ๋์ ํธ์ด๋ค.
์ง์์ ์ผ๋ก ๊ด๋ฆฌ๊ฐ ํ์ํ๋ฉฐ, ์คํ ๋ฆฌ๋ถ ํ์ผ์ด ๋์ด๋ ์๋ก ๊ด๋ฆฌํ๊ธฐ ์ด๋ ค์์ง๋ค.
ํ ์คํธ ์์ฑ๊ณผ ๋ง์ฐฌ๊ฐ์ง๋ก ๊ฐ๋ฐ ์ธ ๋ถ๊ฐ์ ์ธ ์๊ฐ์ด ํ์ํด ์ ์ฒด ๊ฐ๋ฐ ์๊ฐ์ด ์ฆ๊ฐํ๊ฒ ๋๋ค.
Install
Run
์คํ ๋ฆฌ๋ถ์ ์คํ์์ผ ๋ณ๋์ ์น์์ ๋ฌธ์ํ๋ ์คํ ๋ฆฌ๋ถ์ ํ์ธํ ์ ์๋ค.
default porrt 6006
Config
์คํ ๋ฆฌ๋ถ์ ์ค์น๊ฐ ์๋ฃ๋๋ฉด ๋ฃจํธ ๊ฒฝ๋ก์ ์คํ ๋ฆฌ๋ถ ํ๊ฒฝ์ค์ ํ์ผ(main.ts, preivew.ts)์ด ๋ด๊ธด .storybook ๋๋ ํ ๋ฆฌ๊ฐ ์ถ๊ฐ๋๋ค.
main.ts
์คํ ๋ฆฌ๋ถ์ ๋ฉ์ธ ์ค์ ํ์ผ, ์คํ ๋ฆฌ๋ถ์ ํ๊ฒฝ ์ค์ ๊ณผ ๋ค์ํ ์ต์ ์ ์ค์ ํ ์ ์๋ค.
stories โ ๋ก๋ํ ์คํ ๋ฆฌ๋ถ ํ์ผ์ ์ง์
addon โ ์ฌ์ฉํ
addon
์ ๋ฑ๋กํ๋ค. (๋ฑ๋กํ ์์์ ๋ฐ๋ผ ์คํ ๋ฆฌ๋ถ ๋ฌธ์์ ํ์๋๋ค.)typescript โ ํ์ ์คํฌ๋ฆฝํธ์ ๊ด๋ จ๋ ์ต์
framework โ ์คํ ๋ฆฌ๋ถ์์ ์ฌ์ฉํ ํ๋ ์์ํฌ ์ง์
core โ ์คํ ๋ฆฌ๋ถ์ ์ธ๋ถ์ ์ผ๋ก ์ ์ดํ ์ ์๋ ์ต์
docs โ ์คํ ๋ฆฌ๋ถ ๋ฌธ์ํ์ ๊ด๋ จ๋ ์ต์
webpackFinal โ ์คํ ๋ฆฌ๋ถ์์ ์ฌ์ฉํ ์นํฉ ์ค์ ์ ๋ณ๊ฒฝํ๋ ์ต์
staticDirs โ ์ ์ ํ์ผ์ด ์๋ ๊ฒฝ๋ก๋ฅผ ์ง์
preview.ts
ํ๋ฉด์ ํ์๋๋ ์คํ ๋ฆฌ๋ถ์ ์ปค์คํฐ๋ง์ด์ง ํ ์ ์๋ ์ค์ ํ์ผ
parameters โ ์ปจํธ๋กค๋ฌ, ์ก์ , ์ธํฐ๋์ ๋ฑ์ ์คํ ๋ฆฌ์ ์ํธ์์ฉ๋ค์ ์ ์ญ์ผ๋ก ์ ์ด
With Typescript
ํ์ ์คํฌ๋ฆฝํธ์ ๊ฐ์ด ์ฌ์ฉํ๊ฒ๋๋ฉด ์คํ ๋ฆฌ๋ถ์ ๋ฌธ์ํ ์์ ์ด ์์ฒญ ๊ฐํธํด์ง๋ค.
์คํ ๋ฆฌ๋ถ์ ํ์ ์คํฌ๋ฆฝํธ์ ํจ๊ป ์ฌ์ฉํ ๊ฒฝ์ฐ, ์ปดํฌ๋ํธ์ ์ ์๋ ์ธํฐํ์ด์ค๋ฅผ ์ธ์ํ์ฌ ์ปดํฌ๋ํธ์ ์ ๋ณด๋ฅผ ์๋์ผ๋ก ์ ๋ ฅํด์ฃผ๋ฏ๋ก description, default, control๊ณผ ๊ฐ์ ์ ๋ณด๋ฅผ ์ ๋ ฅํด ์ค ํ์๊ฐ ์์ด์ง๊ธฐ์ ์์ฐ์ฑ์ด ํฅ์๋๋ค.
Optional props Issue
์คํ ๋ฆฌ๋ถ์์ optional props๋ฅผ ์ฝ์ ๋ undefined ๊ฐ๋ ์ต์ ์ ํฌํจ์์ผ ํ์ํด์ฃผ๋ ์ด์๊ฐ ์์๋ค.
undefined ์ต์ ์ด ๋ค์ด๊ฐ๋ฉด์ ์๋์ผ๋ก ์ค์ ๋ control type๋ ๋ฌธ์ ๊ฐ ์๊ฒผ๋ค.
์์ธ์ ์คํ ๋ฆฌ๋ถ ์ค์ ํ์ผ์ธ main.ts์์ ์ค์ ๋ reactDocgen
์์ ์ฌ์ฉ๋๋ react-docgen-typescript
์ค์ ๋ฌธ์ ์๋ค.
react-docgen-typescript๋ ์ปดํฌ๋ํธ์ props๋ฅผ ์๋์ผ๋ก ๋ฌธ์ํํ๋ ๊ธฐ๋ฅ์ ์ํํ๋๋ฐ, ์ด๋ optional props๊ฐ undefined ๊ฐ์ ๊ฐ์ง ์ ์๊ธฐ ๋๋ฌธ์ ๋ฌธ์ํ์ ํฌํจ์ํจ๋ค.
๊ด๋ จ ์ต์ ์ ์ ๊ฑฐํ ์คํ ๋ฆฌ๋ถ์ ์ฌ์คํ์ ํด๋ณด๋ undefined ๊ฐ์ ์ ์ธํ ๊ฐ๋ค์ด ์ฌ๋ฐ๋ฅด๊ฒ ํ์๋์๋ค.
Last updated