๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

ZINEE/Works

[Angular] ์•ต๊ทค๋Ÿฌ ์Šคํ† ๋ฆฌ๋ถ(Storybook) ํ™œ์šฉ๊ธฐ

์‹œ์ž‘ํ•˜๋ฉฐ

๐Ÿ’ก ์ด ์Šคํ† ๋ฆฌ๋ถ ํ™œ์šฉ๊ธฐ๋Š” ๋งˆํฌ์—… ๊ฐœ๋ฐœ์ž๋ฅผ ๋Œ€์ƒ์œผ๋กœ ์ž‘์„ฑ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.
     ์•ต๊ทค๋Ÿฌ์˜ ์•„์ฃผ ๊ธฐ์ดˆ์ ์ธ ๊ธฐ๋Šฅ์„ ํ™œ์šฉํ•œ ๋ฐฉ๋ฒ•์ด๋ฏ€๋กœ ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ์ž ๋ถ„๋“ค์ด ๋ณด์‹œ๊ธฐ์—๋Š” ์˜ค๋ฅ˜๊ฐ€ ์žˆ์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
     ๋” ์ข‹์€ ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค๋ฉด ์ฝ”๋ฉ˜ํŠธ๋กœ ์•Œ๋ ค์ฃผ์„ธ์š” :)

 

๋งˆํฌ์—… ๊ฐœ๋ฐœ์„ ํ•˜๋Š” ์‚ฌ๋žŒ๋“ค์€ ์ €๋งˆ๋‹ค ๋‹ค์–‘ํ•œ ๋ฐฉ์‹์œผ๋กœ ์ž‘์—…๋ฌผ์„ ๊ด€๋ฆฌํ•ฉ๋‹ˆ๋‹ค. ํ”„๋ก ํŠธ์—”๋“œ ๊ฐœ๋ฐœ๊ณผ ์™„์ „ํžˆ ๋™๋–จ์–ด์ ธ์„œ ์ •์ ์ธ ๊ฒฐ๊ณผ๋ฌผ์„ ๋งŒ๋“œ๋Š” ์‚ฌ๋žŒ๋„ ์žˆ๊ณ  ๋ณ„๋„์˜ ๋งˆํฌ์—… ์‚ฐ์ถœ๋ฌผ ์—†์ด ํ”„๋ก ํŠธ ๊ฐœ๋ฐœ๊ณผ ๊ฐ™์€ ์„ ์ƒ์—์„œ ์ง„ํ–‰์„ ํ•˜๊ธฐ๋„ ํ•ฉ๋‹ˆ๋‹ค. ๋งˆํฌ์—… ๊ฐœ๋ฐœ์ž์˜ ์ˆ™๋ จ๋„๋‚˜ ๊ฐœ๋ฐœ ํ™˜๊ฒฝ์— ๋”ฐ๋ผ ๋‹ค๋ฅด์ง€๋งŒ ๋งˆํฌ์—… ๊ฐœ๋ฐœ๋„ ๋” ๋‚˜์€ ํ˜‘์—… ๋ฐฉ์‹์— ๋Œ€ํ•ด ๊ณ ๋ฏผํ•ด์•ผ ํ•œ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

 

์ด ํ”„๋กœ์ ํŠธ ๊ฐ™์€ ๊ฒฝ์šฐ์—๋Š” ํ•˜๋‚˜์˜ ํ…œํ”Œ๋ฆฟ์ด ์—ฌ๋Ÿฌ๊ฐ€์ง€ ์ผ€์ด์Šค๋กœ ๊ฐˆ๋ฆฌ๋Š” ํ™”๋ฉด๋“ค์ด ๋งŽ์ด ํ•„์š”ํ–ˆ์Šต๋‹ˆ๋‹ค. ๊ธฐํš์ž/๋””์ž์ด๋„ˆ์™€์˜ ์›ํ™œํ•œ ์†Œํ†ต์„ ์œ„ํ•ด ์‹ค์ œ ๊ฐœ๋ฐœ์ด ์ง„ํ–‰๋˜์ง€ ์•Š์€ ์ƒํ™ฉ์—์„œ๋„ ๋ทฐ๋ฅผ ํ™•์ธ ํ•  ์ˆ˜ ์žˆ๊ณ  ๊ฐ„๋‹จํ•œ ์ˆ˜์ •์€ ์ง์ ‘ ํ…Œ์ŠคํŠธ ํ•ด๋ณผ ์ˆ˜ ์žˆ๋Š” ํ™˜๊ฒฝ์„ ์ œ๊ณตํ•ด๋ณด๊ณ  ์‹ถ์—ˆ์Šต๋‹ˆ๋‹ค. ๋ฌด์—‡๋ณด๋‹ค ์ž‘์—…์ž์ธ ์ € ์Šค์Šค๋กœ๋„ ํ”„๋ก ํŠธ์—”๋“œ ์ชฝ์—์„œ 'ใ…‡ใ…‡ใ…‡ ํ™”๋ฉด ์–ด๋””์— ์žˆ๋‚˜์š”?' ๋ผ๊ณ  ๋ฌผ์—ˆ์„๋•Œ ๋น ๋ฅด๊ฒŒ ๊ณต์œ ํ•  ์ˆ˜ ์žˆ๋Š” ํ™”๋ฉด์„ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ์–ด์„œ ๋งค์šฐ ํŽธ๋ฆฌํ•จ์„ ๋Š๊ผˆ์Šต๋‹ˆ๋‹ค.

 

์Šคํ† ๋ฆฌ๋ถ์€ ์›๋ž˜ ๋ฆฌ์•กํŠธ์—์„œ ๋จผ์ € ์‚ฌ์šฉ๋˜๋˜ ๊ฐœ๋…์ธ๋ฐ ์•ต๊ทค๋Ÿฌ, ๋ทฐ ๋“ฑ ๋‹ค๋ฅธ ํ”„๋ ˆ์ž„์›Œํฌ์—์„œ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ํ™•์žฅ์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์•ต๊ทค๋Ÿฌ ์Šคํ† ๋ฆฌ๋ถ์— ๊ด€๋ จ๋œ ๊ตญ๋‚ด์ž๋ฃŒ๊ฐ€ ๋งŽ์ด ์—†์–ด์„œ ๊ฐœ๋…์€ ๋ฆฌ์•กํŠธ์™€ ๋น„์Šทํ•˜๊ฒ ์ง€๋งŒ ์ดˆ๋ณด์ž ์ž…์žฅ์—์„œ๋Š” ์•ฝ๊ฐ„ ๋ง‰๋ง‰ํ•  ์ˆ˜๋„ ์žˆ์„ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค. ์ € ์—ญ์‹œ๋„ ๋Š๊ผˆ๊ธฐ ๋•Œ๋ฌธ์— ํ™œ์šฉ๊ธฐ๋ฅผ ๊ธ€๋กœ ๋‚จ๊ฒจ๋ด…๋‹ˆ๋‹ค.

์Šคํ† ๋ฆฌ๋ถ์ด๋ž€?

Storybook์€ UI ๊ฐœ๋ฐœ์„ ์œ„ํ•œ ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋ถ„๋ฆฌํ•˜์—ฌ ๊ฐœ๋ฐœ์„ ๋” ๋น ๋ฅด๊ณ  ์‰ฝ๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค. ์ด๋ ‡๊ฒŒํ•˜๋ฉด ํ•œ ๋ฒˆ์— ํ•˜๋‚˜์˜ ๊ตฌ์„ฑ ์š”์†Œ์—์„œ ์ž‘์—… ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ณต์žกํ•œ ๊ฐœ๋ฐœ ์Šคํƒ์„ ์‹œ์ž‘ํ•˜๊ฑฐ๋‚˜ ํŠน์ • ๋ฐ์ดํ„ฐ๋ฅผ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์— ๊ฐ•์ œ๋กœ ๋„ฃ๊ฑฐ๋‚˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ํƒ์ƒ‰ํ•˜์ง€ ์•Š๊ณ ๋„ ์ „์ฒด UI๋ฅผ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. 

์„ค์น˜ ๋ฐ ์‹คํ–‰

์„ค์น˜

์ฐธ๊ณ  : https://storybook.js.org/docs/angular/get-started/install/

$ npx sb init

์‹คํ–‰

$ npm run storybook

์ด๋ ‡๊ฒŒ ๋œจ๋ฉด ์ •์ƒ๊ตฌ๋™๋œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. http://localhost:6006/ ์œผ๋กœ ์ ‘์†ํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์€ ํ™”๋ฉด์„ ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋‘˜๋Ÿฌ๋ณด๊ธฐ

์•„๋ž˜ ์˜ˆ์‹œ๋ฅผ ํ†ตํ•ด ์•Œ์ˆ˜ ์žˆ๋“ฏ ์‰ฝ๊ฒŒ ์ƒ‰์ƒ, ํฌ๊ธฐ, ํ…์ŠคํŠธ๋ฅผ ๋ณ€๊ฒฝํ•ด ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๊ธฐ๋ณธ ์˜ˆ์‹œ๋กœ ๊ตฌํ˜„๋˜์–ด์žˆ๋Š” ๋ฒ„ํŠผ ์Šคํ† ๋ฆฌ๋ถ

์‚ฌ์šฉ๋ชฉ์ 

์˜ˆ๋ฅผ ๋“ค์–ด gnb์˜ ๊ฒฝ์šฐ์— ๋งˆํฌ์—…์€ ํ•˜๋‚˜์ง€๋งŒ ๋ณด์—ฌ์ง€๋Š” ๊ฒฝ์šฐ์˜ ์ˆ˜๊ฐ€ n๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค๋ฉด,

  1. ๋งˆํฌ์—…์„ ๋ณต๋ถ™ํ•ด์„œ ํ…œํ”Œ๋ฆฟ์„ 4๊ฐœ๋ฅผ ๋งŒ๋“ค์–ด ํ™•์ธ
  2. ์ฃผ์„์„ ๋‹ฌ์•„ ์„ค๋ช…ํ•ด ๋†“์Œ
    1. ๋ณดํ†ต ์ฃผ์„์„ ์ œ๋Œ€๋กœ ํ™•์ธํ•˜์ง€ ์•Š์Œ
    2. ํ˜น์€ ๋ณด๋”๋ผ๋„ ์ดํ•ด๋ฅผ ์ž˜๋ชปํ•ด์„œ ๊ฒฐ๊ตญ ๋‹ค์‹œ ์ผ์ผ์ด ์„ค๋ช…์„ ํ•ด์•ผํ•จ

์ด๋Ÿฐ ๋ฒˆ๊ฑฐ๋กœ์›€์„ ํ•ด๊ฒฐํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ์ ์ด ๊ฐ€์žฅ ํฐ ์žฅ์ ์ด์ž ์Šคํ† ๋ฆฌ๋ถ์˜ ๋ณธ์งˆ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

์ œ์ž‘๋ฐฉ๋ฒ•

.html / .ts / .stories.ts ์ด ์„ธ๊ฐ€์ง€ ํŒŒ์ผ์„ ๋ชจ๋‘ ์ ์ ˆํ•˜๊ฒŒ ์‚ฌ์šฉํ•˜์—ฌ์•ผ ํ•ฉ๋‹ˆ๋‹ค.

  1. ์ € ๊ฐ™์€ ๊ฒฝ์šฐ์—๋Š” .html ๊ตฌ์กฐ๋ฅผ ๋ณด๋ฉด์„œ ๋จผ์ € .ts ํŒŒ์ผ์— @Input() ์†์„ฑ๋“ค์„ ์„ ์–ธํ•ฉ๋‹ˆ๋‹ค.
  2. ๊ทธ๋ฆฌ๊ณ  ๋‹ค์‹œ .html ๋กœ ๋Œ์•„๊ฐ€ ํ•ด๋‹น ์†์„ฑ์— ๋”ฐ๋ผ ์–ด๋–ป๊ฒŒ ํ•ญ๋ชฉ๋“ค์„ ๋ณด์—ฌ์ค„์ง€ ์ฒ˜๋ฆฌ๋ฅผ ํ•˜๊ณ ,
  3. .stories.ts ํŒŒ์ผ์—์„œ ์Šคํ† ๋ฆฌ๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

*.html

๋งˆํฌ์—…๊ณผ ์Šคํ† ๋ฆฌ๋ถ์ด ์–ด๋–ป๊ฒŒ ์—ฐ๊ฒฐ๋˜์–ด ์žˆ๋Š”์ง€ ์•„๋ž˜์˜ ๊ทธ๋ฆผ์„ ํ†ตํ•ด ํ™•์ธํ•˜์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. mk-admin-nav.component.html ์„ ๋ณด๋ฉด ํ•˜๋‚˜์˜ ๋งˆํฌ์—…์œผ๋กœ ์ƒํƒœ๊ฐ’์— ๋”ฐ๋ผ ๋ณด์—ฌ์ค„์ง€ ๋ง์ง€๋ฅผ ๊ฒฐ์ •ํ•˜๊ณ , ํ•ด๋‹น ์†์„ฑ์— ๋งž๋Š” ๊ฐ’์„ ๋„ฃ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค. ์•„์ฃผ ๊ธฐ์ดˆ์ ์ธ ํ”„๋ก ํŠธ ๊ธฐ์ˆ (๋ฐ์ดํ„ฐ ๋ฐ”์ธ๋”ฉ)์„ ์‚ฌ์šฉํ•ด์„œ ์›ํ•  ๋•Œ์—๋งŒ ํ•ด๋‹น ๋งˆํฌ์—…์ด ๋ณด์—ฌ์ง€๊ณ /๊ฐ€๋ ค์ง€๊ณ  ํ•  ์ˆ˜ ์žˆ๊ฒŒ ์ œ์–ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

- *ngIf (ํ•ด๋‹น ์ƒํƒœ๊ฐ€ true ์ผ๋•Œ๋งŒ ๋งˆํฌ์—…์ด ๋‚˜ํƒ€๋‚จ)

*.ts

*.stories.ts

์‚ฌ์šฉ์˜ˆ์‹œ

๊ทธ๋ ‡๊ฒŒ ๋งŒ๋“ค์–ด์ง„ ์Šคํ† ๋ฆฌ๋ถ์€ ์–ด๋–ป๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์„๊นŒ์š”?

๋งŒ์•ฝ ๋””์ž์ด๋„ˆ๊ฐ€ "๊ฝ‰ ์ฑ„์›Œ์ง„ ๋กœ๊ณ  ๋ง๊ณ  ์›ํ˜•์˜ png์ด ๋กœ๊ณ ์— ์ ์šฉ๋˜์—ˆ์„ ๋•Œ๋Š” ์–ด๋–ป๊ฒŒ ๋ณด๋‚˜์š”?" ๋ผ๊ณ  ํ–ˆ์„๋•Œ,

๋‹ค์–‘ํ•œ ์ด๋ฏธ์ง€์™€ ํ…์ŠคํŠธ๋ฅผ ์ง์ ‘ ์ˆ˜์ •ํ•ด๋ณด๋ฉด์„œ ํ…Œ์ŠคํŠธํ•  ์ˆ˜ ์žˆ๋„๋ก ์•ˆ๋‚ดํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

์ด๋ฏธ์ง€์™€ ํ…์ŠคํŠธ๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ์˜ˆ์‹œ

๋ฐฐํฌ

์ฐธ๊ณ  : simplereact.gitbook.io/simplereact/storybook

$ npm i @storybook/storybook-deployer --save-dev

์„ค์น˜ ํ›„ package.josn ํŒŒ์ผ์— ๋ฐฐํฌ ๋ช…๋ น์–ด ๋“ฑ๋ก

// package.json
"scripts": {
  "docs-storybook": "start-storybook",
  "deploy-storybook": "storybook-to-ghpages"
}

  ๊ฐ„๋‹จํ•˜๊ฒŒ ๋ฐฐํฌ ๊ฐ€๋Šฅ!

$ npm run deploy-storybook

 

ํ™•์ธํ•˜๊ธฐ

zineeworld.github.io/angular-storybook/?path=/story/example-introduction--page

๋ฐ˜์‘ํ˜•