designsystem using storybook and typescript

Transcript

1. TypeScript৬ Storybookਸ ࢎਊೠ ܻঘ౟ ٣੗ੋ दझమ ҳ୷ೞӝ velopert @ RIDI Corp.
2. http://bit.ly/reactkr-slack React Korea ठۑ Workspace ীࢲ #storybook ଻օী ٜয৬ ઱ࣁਃ!
3. ਋ܻо য়ט ழߡೡ ղਊٜ 1. ٣੗ੋ दझమ ੉೧ 2. Storybook ઱ਃӝמ ࢓ಝࠁӝ 3. ٣੗ੋ दझమ ҳ୷ 4. Rollup ਵ۽ ۄ੉࠳۞ܻ ߣٜ݂ / NPM ী publish http://bit.ly/reactkr-slack
4. ѐߊ੗۽ࢲ ٣੗ੋ दझమਸ যڌѱ ੉೧೧ঠ ೡө ? بੑೞӝ ਤೞৈ যڌѱ ળ࠺ೡө? http://bit.ly/reactkr-slack
7. Design System ?
8. ٣੗ੋ दझమ਷, ٣੗੉ց৬ ѐߊ੗о 
 ੌҙ੸ੋ UIܳ ઁҕೞӝ ਤ೧ࢲ ೙ਃೠ ܻࣗझܳ ઴ৈસפ׮.
9. Style Guide Component Library
10. Style Guid e ౠ੿ ࠳ے٘ / ೐۽؋౟ীࢲ ٣੗ੋਸ ೡ ٸ ૑ெঠ ೞח ӏ஗ٜ
11. Color
12. https: / / material.io/design/color/#color - theme - creation
13. https: / / w w w .carbondesignsystem.com/guidelines/color/overview/
14. https: / / atlassian.design/guidelines/product/foundations/color
15. Typography
16. https: / / atlassian.design/guidelines/product/foundations/typography
17. https: / / w w w .carbondesignsystem.com/guidelines/typography/overview/
18. Motion
19. https: / / material.io/design/motion/understanding - motion.html#principles
20. Spacing (margin/padding)
21. https: / / w w w .carbondesignsystem.com/guidelines/spacing/
22. https: / / w w w .carbondesignsystem.com/guidelines/icons/usage
23. https: / / zeit.co/design/icons
24. UIী݅ ੸ਊغח Ѫ਷ ইש
25. https: / / brand.netflix.com/en/assets/
26. https: / / w w w .audi.com/ci/en/intro/basics/colours.html
27. Component Library “UI Kit”, “Pattern Library” ۄҊب ܻࠛݴ, ੤ࢎਊ оמೠ ஹನք౟ٜ੄ ஸ۩࣌ਵ۽ ੉ܖযઉ ੓਺
28. https: / / w w w .carbondesignsystem.com/components/checkbox/code
29. https: / / designsystem.digital.gov/components/button/
30. https: / / atlassian.design/guidelines/product/components/modal - dialog
31. https: / / zeit.co/design/video
32. Design System
 = Style Guide + Component Library
33. https: / / product - unicorn.com/design - systems - style - guides - all - those - libraries - what - the - hell - is - the - difference-4c2741193fd
34. ׮݅, ҕध ੿੄ח ইתפ׮ . ׮নೠ ੿੄о ੓णפ׮.
39. ҕా੼ ٣੗ੋҗ ѐߊ੄ ࢤ࢑ࢿਸ ֫ৈ઱ӝ ਤೠ ޙࢲചػ о੉٘
40. “If you don’t document it, it doesn’t exist” https: / / uxdesign.cc/starting - a - design - system-595d03c770d0
41. Ӓր Bootstrap, Bulma, Ant Design…
42. Public Design Systemਸ ࢎਊ ೡ ҃਋, ಴അ ೡ ࣻ ੓ח ٣੗ੋ੉ ࢚׼൤ ઁೠ ؼ ࣻ ߆ী হ׮.
43. ѐੋ, ژח ٣੗੉ց হ਺ = ੸׼ೠ ೝ҅
44. UIܳ ా೧ ࠳ے٘੄ ةౠೠ о஖ܳ ಴അ೧ղӝ ਤ ೧ࢶ ૒੽ ݅ٚ ٣੗ੋ दझమ੉ ਬܻೣ
45. ٣੗ੋ दझమ੉ ೙ࣻח ইפ׮.
46. ٣੗ੋ दझమਸ ٜ݅ӝ ਤ೧ࢶ , ٣੗੉ց + ѐߊ੗੄ ഈস੉ ݒ਋ ઺ਃ
47. ਋ܻо ߓ਎ Storybook਷ ޙࢲച بҳ
49. ؀উਵ۽ ࢎਊ ೡ ࣻ ੓ח بҳ
52. Storybook v5.2 ࠗఠ MDX ૑ਗ!
53. Storybook ࢎਊ೧ࠇद׮~~~ http: / / bit.ly/start - storybook
54. Storybook Addon
56. ٣੗ੋ दझమ ٜ݅ӝ
57. যڃ ஹನք౟ࠗఠ ٜ݅ө?
58. ೐۽ં౟ ୡӝ ױ҅ࠗఠ ٣੗ੋ दझమ ҳ୷ೞҊ ೙ਃೠѢ ೞաೞա ୶о೧ աоݶ ੉࢚੸੉ѷ૑݅…
59. ೐۽ં౟ ѐߊ ٣੗ੋ दझమ ѐߊ ੸ਊ ѐࢶ ߈৔ ҙ଴ ѐߊ द੘ ա઺ী ѐߊ द੘ ੉޷ ߓನؽ
60. UI Auditin g (UI Inventory)
63. ਋ࢶࣽਤ ੿ೡ ٸ ׮਺ਸ Ҋ۰೧ࠁࣁਃ: ஹನք౟ ࢎਊ ࠼ب / ѐߊ ҕࣻ
64. Buttonਸ ٜ݅যࠅөਃ?
65. ࢚క
66. ࢤӣ࢜ (theme / variation)
67. ࢎ੉ૉ
68. ই੉௑җ ೣԋ ࢎਊ ؼ ٸ
69. Sketchapp / Figma ۽ ࢎ੹ ੘স
71. ੉ ъ੄ীࢶ ੉ ೐۽ࣁझח ࢤۚ..!
72. Emotionਸ ࣗѐ೤פ׮!
73. styled-components ח ਬݺೞભ..?
74. ۄ੉࠳۞ܻ ਊب۽ח emotion ࢎਊਸ ୶ୌ!
75. ؊ ੘਷ ౵ੌ ࢎ੉ૉ
76. ׮਍۽٘ ࣻ ૑դ 8ਘী ੉޷ ୶ਘ
77. ࢲߡ ࢎ੉٘ ۪؊݂ ߹ب ੘স ೙ਃ হ਺
78. ۄ੉࠳۞ܻ ߓನೞӝ
80. https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c ESModule ഋక۽ ٜ݅ ઴ ݽܴ ೒۞Ӓੋ ੓ӟ ೞ૑݅ ࠺ҕध ࠁా CommonJS ഋక۽ ݽٕ ݅ٞ ESModule, CommonJS ݽف ૑ਗ
81. https: / / w w w .keycdn.com/blog/tree - shaking CommonJS ૑ਗ উೣ!
82. ਬਊೠ झషܻ࠘ ౲!
83. ܻঘ౟ ۄ਋ఠܳ ࢎਊೞח ҃਋ storybook - react - router গ٘ৡ
84. ߈਽ഋ ٣੗ੋਸ ೞח ҃਋ @storybook/addon - viewport গ٘ৡ
85. emotion ীࢲ ޷٣য ௪ܻ ੘ࢿೞӝ
88. ܻ؋झ੄ ஶప੉ց ஹನք౟੄ झషܻܳ ੘ࢿೞח ҃਋
90. ੿ܻ