๐Ÿฐ Note #2021-01-15

Ko Seoyoungยท2021๋…„ 2์›” 9์ผ
0
post-custom-banner

(์—†์–ด์ง„์ค„์•Œ์•˜๋Š”๋ฐ ์ž„์‹œ์ €์žฅํ•จ์— ์žˆ์—ˆ์Œใ…Ž)

์ง€๊ธˆ๊นŒ์ง€๋Š” ๊ด€๋ฆฌ์ž ํ”„๋กœ๊ทธ๋žจ์ธ ์Šˆํผ์–ด๋“œ๋ฏผ, ์›น ์„œ๋น„์Šค์—์„œ ์ž‘์€ ๊ธฐ๋Šฅ๋“ค, ์‡ผํ•‘๋ชฐ ํฌ๋กค๋ง์˜ ์—…๋ฌด๋“ค์„ ํ–ˆ๋‹ค๋ฉด, ์˜ค๋Š˜์€ ์ƒˆ๋กœ์šด ์—…๋ฌด๋ฅผ ์ ‘ํ–ˆ๋‹ค!
๋ฐ”๋กœ storybook์— ์ปดํฌ๋„ŒํŠธ ๊ด€๋ จ ๋ฌธ์„œ๋ฅผ ์ถ”๊ฐ€ํ•˜๋Š” ์ผ์ด๋‹ค.

์šฐ๋ฆฌํšŒ์‚ฌ๋Š” atomic ๋””์ž์ธ ๋ฐฉ์‹์„ ์‚ฌ์šฉํ•˜์—ฌ ์ค‘๋ณต๋˜๋Š” ์Šคํƒ€์ผ์„ ๊ฐ€์ง„ ๋ฒ„ํŠผ์ด๋‚˜ ์„น์…˜, ์นด๋“œ, ํ…œํ”Œ๋ฆฟ ๋“ฑ์„ atom, molecules๋“ฑ์˜ ํด๋”์— ์ปดํฌ๋„ŒํŠธ๋กœ ๋ถ„๋ฆฌํ•˜์—ฌ ์žฌ์‚ฌ์šฉํ•œ๋‹ค.

storybook์€ ์•„๋ž˜์™€ ๊ฐ™์ด ์ปดํฌ๋„ŒํŠธ๋“ค์˜ ์†์„ฑ ๋“ฑ์„ ์‰ฝ๊ฒŒ ์ปจํŠธ๋กคํ•ด์„œ ์ ์šฉ๋œ ๊ฒฐ๊ณผ๋ฅผ ๋ฐ”๋กœ ๋ณผ ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š” ํˆด์„ ์ œ๊ณตํ•œ๋‹ค. ๋”ฐ๋ผ์„œ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ง์ ‘ ๊ตฌํ˜„ํ•œ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋””์ž์ด๋„ˆ๊ฐ€ ์‰ฝ๊ฒŒ ์ดํ•ดํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜๊ณ  ์›ํ™œํ•œ ์†Œํ†ต๊ณผ ํ”ผ๋“œ๋ฐฑ์ด ๊ฐ€๋Šฅํ•ด์ง„๋‹ค.

๊ทธ๋ž˜์„œ ๋‚˜๋Š” ๋””์ž์ด๋„ˆ์™€ ๊ฐœ๋ฐœ์ž์˜ ์—ฐ๊ฒฐ๊ณ ๋ฆฌ ๋Š๋‚Œ์œผ๋กœ '์šฐ๋ฆฌ๋Š” ์ด๋ ‡๊ฒŒ ๊ฐœ๋ฐœํ–ˆ์–ด์š”'๋ผ๋Š” ๊ฒƒ์„ ์ž˜ ๋ณด์—ฌ์ฃผ๋„๋ก ํ•˜๋Š” ์—ญํ• ! ๋จผ์ € molecules์— ์žˆ๋Š” card ์ปดํฌ๋„ŒํŠธ๋“ค์„ ์ถ”๊ฐ€ํ•˜๋Š” ์—…๋ฌด๋ถ€ํ„ฐ ํ–ˆ๋‹ค. ์ฒ˜์Œ๋ณด๋Š” ์ปดํฌ๋„ŒํŠธ๋“ค์„ ํ•˜๋‚˜ํ•˜๋‚˜ ์†์„ฑ์„ ํ™•์ธํ•˜๊ณ  ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”์ง€ ํ™•์ธํ•˜๋‹ˆ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊นŠ๊ฒŒ ์•Œ ์ˆ˜ ์žˆ๋Š” ๊ณ„๊ธฐ๊ฐ€ ๋˜์—ˆ๋‹ค.
(๊ธ‰๋งˆ๋ฌด๋ฆฌ)

profile
Web Frontend Developer ๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป #React #Nextjs #ApolloClient
post-custom-banner

0๊ฐœ์˜ ๋Œ“๊ธ€