๋์์ธ ์์คํ , ์ํ ๋ฏน ๋์์ธ, storybook์ ํ์ฉํ ๋์์ธ ์์คํ ๋ฑ์ ๋ํด ํ์ตํ๋ค.
- ์ ํ ๊ฐ๋ฐ์ ๊ด๋ จ๋ ์ธ์๋ค์ด ํต์ผ ๋ ๊ท์นํ์ ์ฌ์ฉ์์๊ฒ ์ผ๊ด๋ ์ฌ์ฉ์ฑ์ ์ ๊ณต
- ์๋น์ค ํ์ฅ์ด๋ ๋ค์ํ ๋๋ฐ์ด์ค ํ๊ฒฝ์ ๋์ํ ๋ ์๊ฐ๊ณผ ๋ ธ๋ ฅ์ ์ ์ฝํด ์ฃผ๋ ๋๊ตฌ
- ํ๋ก์ ํธ ์งํ ์๋ ์์น
- ํ์ ๊ฐ์ ์ํต๊ณผ ํ์ ์ํ
- ์ฃผ๋์ด ๋ ๋ฒจ์ ๋์์ด๋/๊ฐ๋ฐ์๋ฅผ ์ํ ์จ๋ณด๋ฉ ๊ต์ก ๋๊ตฌ ๋ฐ ๋ ํผ๋ฐ์ค๋ก ํ์ฉ
- ์ผ๊ด์ฑ ์๋ UI๋ฅผ ๊ฒฝํํ๋ฉด์ ์๋น์ค๋ฅผ ์ฝ๊ฒ ์ดํดํ๊ณ ์ฌ์ฉ
- ์ ๋ฐ์ ์ธ ์ฌ์ฉ์ ๋ง์กฑ๋๋ฅผ ํฅ์ํ๋ ๊ฒฐ๊ณผ๋ฅผ ๊ฐ์ ธ์จ๋ค.
๊ฐ๋ฐ์์ ๋์์ธ ๊ด๋ จ ์ ๋ฌด๋ฅผ ์ค์ฌ์ฃผ๊ธฐ์ ๋น์ฆ๋์ค ๋ก์ง ๋๋ ์ฑ๋ฅ ์ต์ ํ์ ๊ฐ์ ๋ ํฌ๊ณ ๋ณต์กํ ๋ฌธ์ ์ ๊ฐ๋ฐ์๊ฐ ์ง์ค ํ ์ ์๋ค.
- ์ฌ์ฉ์๋ค์ ์ ํ์ด๋ ์๋น์ค๋ฅผ ์ฌ์ฉํ๋ฉด์ ๋ธ๋๋์ ์ฐ๊ฒฐ๋๋ ๋๋์ ๋ฐ๋๋ค.
- ์๊ฐ์ด ์ง๋จ์ ๋ฐ๋ผ ์ฌ์ฉ์ ๊ธฐ์ต์ ๊ฐ๋ ฅํ๊ฒ ๋จ๊ณ ๋ธ๋๋ ์ถฉ์ฑ๋์ ์ธ์ง๋๊ฐ ๋์์ง๋ค.
์์(atom), ๋ถ์(molecule), ์ ๊ธฐ์ฒด(organism), ํ
ํ๋ฆฟ(template), ํ์ด์ง(page)๊ฐ ์๋ค.
์์ ๋จ์์ ๊ตฌ์ฑ ์์(์์)๋ฅผ ๋ง๋ค๊ณ ์ด๋ฅผ ์กฐํฉํด ๋ ํฐ ๋จ์์ ๊ตฌ์ฑ ์์(๋ถ์, ์ ๊ธฐ์ฒด ๋ฑ)๋ฅผ ์์ฑํ๋ ๋ฐฉ์์ผ๋ก ์งํํ๋ค.
๋ชจ๋ํ๋ ๊ตฌ์ฑ ์์๋ ์ฝ๊ฒ ์ฌ์ฌ์ฉํ ์ ์์ด ๊ฐ๋ฐ ์๊ฐ์ ๋จ์ถ์ํค๊ณ ์ฝ๋์ ์ค๋ณต์ ์ค์ธ๋ค.
์น์ฌ์ดํธ๋ ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ณ๊ฒฝ์ด๋ ์ ๋ฐ์ดํธ๊ฐ ํ์ํ ๋, ๊ฐ ๊ตฌ์ฑ ์์๋ฅผ ๊ฐ๋ณ์ ์ผ๋ก ์์ ํ๊ธฐ ์ฝ๊ณ ์ด๋ฌํ ๋ณ๊ฒฝ์ด ์ ์ฒด ์์คํ ์ ์ํฅ์ ๋ฏธ์น์ง ์๋๋ค.
ํ๋ก์ ํธ์ ์ ์ง ๋ณด์๋ฅผ ํธ๋ฆฌํ๊ฒ ๋ง๋ค์ด ์ค๋ค.
์๋ก์ด ๊ธฐ๋ฅ์ด๋ ํ์ด์ง๋ฅผ ์ถ๊ฐํ ๋ ์ ์ฐํ ํ์ฅ์ด ๊ฐ๋ฅํ๋ค. (๊ธฐ์กด ๊ตฌ์ฑ ์์๋ฅผ ํ์ฅํ์ฌ ์๋ก์ด ๋ฒ์ ์ ๋ง๋ค ์ ์๊ธฐ ๋๋ฌธ)
ํ๋ก์ ํธ์ ํ์ฅ์ฑ์ด ๋์์ง๊ณ , ์๋ก์ด ์๊ตฌ ์ฌํญ์ด ์๊ฒผ์ ๋ ๋น ๋ฅด๊ฒ ๋์ํ ์ ์๋ค.
ํด๋น ํผ๊ทธ๋ง ํ๋ฌ๊ทธ์ธ์ ํตํด ํผ๊ทธ๋ง ํ ํฐ์ ์ถ์ถํ ์ ์๋ค.
ํ์ผ๋ก ์ถ์ถํ ์ ์๋ค.
ํด๋น ํ์ผ์๋ ๊ฐ ์คํ์ผ์ด ๋ค์ด๊ฐ ์๋ค.
ํ ํ๋ฆฟ ๋ฆฌํฐ๋ด๋ฅผ ์ฌ์ฉํด ๊ฐ์ด ์ง์ ํ ์ ์๋ค.
Button.storise.js์์ primary, label์ ์ค์ ํด ์ฃผ๋ฉด ๋๋ค.
npm run storybook
ํด์ฃผ๋ฉด ์ด๋ฐ์์ผ๋ก ํ์ธ์ด ๊ฐ๋ฅํ๋ค.
๋๋จธ์ง๋ ๋น์ทํ๊ฒ ์์ ํด ์ฃผ์๋ค.
๊ทธ์ค itemBox.js/itemBox.stories.js์์
items๊ฐ ์๋๋ฐ ๋ฐฐ์ด ํํ๋ก ํํ๋์ด ์์๋ค.
๊ทธ๋ฅ ๋ฃ์ด ์ค ๊ฒฝ์ฐ ํ์ค์ ํด๋น ๋ฉํธ๊ฐ ์ ๋ถ ๋ค์ด๊ฐ๋ ๋ฌธ์ ๊ฐ ์์๋ค.
map() ๋ฉ์๋๋ฅผ ํ์ฉํด ํด๊ฒฐ ํ ์ ์์๋ค.
๋์์ธ ์์คํ
์ ์ด์ฉํ๋ฉด ๋ค๋ฅธ ๊ฐ๋ฐ์์ ๊ฐ์ด ํ์
์ ํ ๋ ๋์์ธ ์์
์ด ํต์ผ ๋๊ณ
์ฌ์ฌ์ฉ์ฑ์ ์ ์ฉํ๋ค ์๊ฐํ๋ค.
์ด๋ฒ ๊ณผ์ ๋ story book์ผ๋ก ์งํํ๋ค.
์ด๋ป๊ฒ ํ๋์ง ๊ธฐ์ต์ด ์ ์๋ ์ด๋ฐ์๋ ์ด๋ค์์ผ๋ก ๊ตฌ์ฑ๋๋์ง ํ์ ํ๋๋ฐ ์๊ฐ์ ๋ญ๋นํ ๊ฑฐ ๊ฐ๋ค.
์ดํ์ ๊ธ๋ฐฉ ์งํํ ์ ์์๊ณ items์์ 2์ฐจ ๋ฉ๋ถ์ด ์๋ ๊ฑฐ ๊ฐ๋ค.
list๊ฐ ๋ฐฐ์ด๋ก ๋์ด ์์ด map()๋ฉ์๋๋ฅผ ์๊ฐํ๋ค.
๋๋ฌด ๊น์ ๋ค์ด๊ฐ์ง ์์์ ๋คํ์ด๋ผ ์๊ฐํ๋ค.