โค๏ธโ๐ฅ CDD | Component Driven Development
- ๋ถํ ๋จ์๋ก UI ์ปดํฌ๋ํธ๋ฅผ ๋ง๋ค์ด ๋๊ฐ๋ ๊ฐ๋ฐ, ์ปดํฌ๋ํธ๋ฅผ ๋ชจ๋ ๋จ์๋ก ๊ฐ๋ฐํด UI๋ฅผ ๊ตฌ์ถ ๋๋ฌํ๋ ๊ฐ๋ฐ ๋ฐ ์ค๊ณ ๋ฐฉ๋ฒ๋ก ์ด๋ค. ๊ธฐ๋ณธ์ ์ธ ์ปดํฌ๋ํธ ๋จ์์์๋ถํฐ ๋ทฐ๊น์ง ๊ตฌ์ฑ์ ์ํด์ ๊ฐ ์ปดํฌ๋ํธ๋ฅผ ์ ์ง์ ์ผ๋ก ์กฐ๋ฆฝ์์ผ ๋๊ฐ๋ ์ํฅ์ ์ธ ์ฑํฅ์ ๋๊ณ ์๋ค.
โค๏ธโ๐ฅ ๊ตฌ์กฐ์ ์ธ CSS ์์ฑ ๋ฐฉ๋ฒ์ ๋ฐ์
- ์ธํฐ๋ท์ด ๋ง๋ค์ด์ง ์ดํ ๊ธฐ์ ์ ๋ฐ๋ฌ๊ณผ ์ฌ์ฉ์๋ค์ด ๋ค์ํ ํ๊ฒฝ์์ ์ธํฐ๋ท์ ์ฌ์ฉํ๊ธฐ ์์ํ๋ค. ์ด์ ๋ฐ๋ผ์ CSS์ ์์ฑ ๋ฐฉ์๋ ๋ฐ์ ํ์๋๋ฐ, ํ๋ก์ ํธ์ ๊ท๋ชจ๋ ๋ณต์ก๋๊ฐ ์ปค์ง๋ฉด์ ๊ฐ์ด ์์
ํ๋ ํ์์ ์๋ ์ฆ๊ฐํจ์ ๋ฐ๋ผ CSS๋ฅผ ์์ฑํ ๋ ์ผ๊ด์ ์ธ ํจํด์ด ์กด์ฌํ์ง ์๋ค๋ ๊ฒ์ด ํฐ ๊ฑธ๋ฆผ๋์ด๊ฐ ๋์๋ค. ๋ํ ๋ค์ํ ๋๋ฐ์ด์ค๋ค์ ๋ฑ์ฅ์ผ๋ก ์น์ฌ์ดํธ๋ค์ด ๋ค์ํ ๋์คํ๋ ์ด๋ฅผ ์ปค๋ฒํด์ผ ๋๊ธฐ ๋๋ฌธ์ CSS๋ ๋์ฑ ๋ณต์กํด์ง๊ฒ ๋๋ค. ๋ฐ๋ผ์ CSS ์์
์ ํจ์จ์ ์ผ๋ก ํ๊ธฐ ์ํด์ ๊ตฌ์กฐํ๋ CSS์ ํ์์ฑ์ด ๋๋๋์๊ณ , CSS๋ฅผ ๊ตฌ์กฐํํ๋ ์ด๋ฌํ ๋ฌธ์ ์ ๋ค์ ํด๊ฒฐํ๊ธฐ ์ํ
CSS ์ ์ฒ๋ฆฌ๊ธฐ
๋ผ๋ ๊ฐ๋
์ด ๋ฑ์ฅํ๋ค.
โค๏ธโ๐ฅ CSS ์ ์ฒ๋ฆฌ๊ธฐ
- CSS๊ฐ ๊ตฌ์กฐ์ ์ผ๋ก ์์ฑ๋ ์์๊ฒ ๋์์ ์ฃผ๋ ๋๊ตฌ, ์ ์ฒ๋ฆฌ๊ธฐ์ ์์ ๋ง์ ํน๋ณํ syntax๋ฅผ ๊ฐ์ง๊ณ CSS๋ฅผ ์์ฑํ๋๋ก ํ๋ ํ๋ก๊ทธ๋จ์ด๋ค. CSS ๋ฌธ์๋ฅผ ์์ฑํ ๋๋ ๋ฒ๊ฑฐ๋กญ๊ฑฐ๋ ๋ง์ ๋ฐ๋ณต์ ์ธ ์์
์ ์๊ตฌํ๋ค. (ex: Color ๊ฐ ์ฐพ๊ธฐ, tag ๋ซ๊ธฐ) ์ด๋ฟ๋ง ์๋๋ผ ํด๋์ค์ ์์๊ณผ ๊ฐ์ ์ฌํญ์ผ๋ก ์ ์ CSS ๋ฌธ์๋ ์์ด ๋ง์์ง๊ณ ์ด๋ก ์ธํด ์ดํ ์ ์ง๊ด๋ฆฌ์ ๋ง์ ์ํฅ์ ๋ผ์น๋ค. ์ด๋ฐ CSS ๋ฌธ์ ์ ๋ค์ ํ๋ก๊ทธ๋๋ฐ ๊ฐ๋
์ ํ์ฉํ CSS ์ ์ฒ๋ฆฌ๊ธฐ๋ฅผ ํตํด ํด๊ฒฐํ ์ ์๋ค.
โค๏ธโ๐ฅ SASS
- CSS๋ฅผ ํ์ฅํด ์ฃผ๋ ์คํฌ๋ฆฝํ
์ธ์ด
- CSS๋ฅผ ๋ง๋ค์ด ์ฃผ๋ ์ธ์ด๋ก, JS์ฒ๋ผ ํน์ ์์ฑ ๊ฐ์ ๋ณ์๋ก ์ ์ธํด ํ์ํ ๊ณณ์ ์ ์ธํ ๋ณ์๋ฅผ ํ์ฉํ์ฌ ์ธ ์ ์๊ณ , ๋ฐ๋ณต๋๋ ์ฝ๋๋ฅผ ํ ๋ฒ์ ์ ์ธ์ผ๋ก ์ฌ๋ฌ ๋ฒ ์ฌ์ฌ์ฉ์ด ๊ฐ๋ฅํ ๊ธฐ๋ฅ์ ๊ฐ์ก๋ค.
- SCSS ์ฝ๋๋ฅผ ์ฝ์ด์ ์ ์ฒ๋ฆฌํ ๋ค์ ์ปดํ์ผ ํ, ์ ์ญ CSS ๋ฒ๋ค ํ์ผ์ ๋ง๋ค์ด ์ฃผ๋ ์ ์ฒ๋ฆฌ๊ธฐ ์ญํ ์ ํ๋ค.
- ํ์ง๋ง ์ผ๋ง ์ง๋์ง ์์ SASS๊ฐ
CSS์ ๊ตฌ์กฐํ
๋ฅผ ํด๊ฒฐํด ์ฃผ๋ ์ฅ์ ๋ณด๋ค ๋ค๋ฅธ ๋ฌธ์ ๋ค์ ๋ ๋ง์ด ๋ง๋ค์ด๋ธ๋ค๋ ๊ฒ์ด ๋ฐํ์ง๋ค. ์ ์ฒ๋ฆฌ ๋ด๋ถ์์ ์ด๋ค ์์
์ ํ๋์ง ์์ง ๋ชปํ๊ณ , ์คํ์ผ์ด ๊ฒน์น๋ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๊ธฐ ์ํด ๋จ์ ๊ณ์ธต ๊ตฌ์กฐ๋ฅผ ๋ง๋ค์ด ๋ด๋ ๊ฒ์ ์์งํ๊ฒ ๋๊ณ , ๊ทธ ๊ฒฐ๊ณผ ์ปดํ์ผ๋ CSS์ ์ฉ๋์ด ์ด๋ง๋ฌด์ํ๊ฒ ์ปค์ง๊ฒ ๋๋ค.
๐ก ์ ์ฒ๋ฆฌ๊ธฐ์ ์งํฅ์
- ๋จ์ ๊ณ์ธต ๊ตฌ์กฐ๋ฅผ ๋ง๋ค์ด ๋ด๋ ๊ฒ์ ์์งํ๋ ๊ฒ๊ณผ ์ปดํ์ผ๋ CSS ํฐ ์ฉ๋๊ณผ ๊ฐ์ CSS ์ ์ฒ๋ฆฌ๊ธฐ์ ๋ฌธ์ ์ ์ ๋ณด์ํ๊ธฐ ์ํด์ BEM, OOCSS, SMACSS์ ๊ฐ์ CSS ๋ฐฉ๋ฒ๋ก ์ด ๋๋๋๋ค. ๊ฐ๊ฐ์ ์ ์ฒ๋ฆฌ๊ธฐ๋ค์ ์ฅ๋จ์ ์ ๊ฐ์ง๊ณ ์์ผ๋ ๊ฒฐ๊ตญ ๋ชจ๋ ๊ฐ์
์ฝ๋์ ์ฌ์ฌ์ฉ
, ์ฝ๋์ ๊ฐ๊ฒฐํ
, ์ฝ๋์ ํ์ฅ์ฑ
๊ณผ ๊ฐ์ ์งํฅ์ ์ ๊ฐ์ง๊ณ ์๋ค.
โค๏ธโ๐ฅ BEM
- CSS ๋ฐฉ๋ฒ๋ก ์ผ๋ก Block, Element, Modifier๋ก ๊ตฌ๋ถํ์ฌ ํด๋์ค๋ช
์ ์์ฑํ๋ ๋ฐฉ๋ฒ์ด๋ค. ์์ ์ฌ์ง๊ณผ ๊ฐ์ด ๊ฐ๊ฐ์ Block, Element, Modifier์
--
์ __
๋ก ๊ตฌ๋ถํ๋ค. ํด๋์ค๋ช
์ BEM ๋ฐฉ์์ ์ด๋ฆ์ ์ฌ๋ฌ ๋ฒ ๋ฐ๋ณตํด ์ฌ์ฌ์ฉํ ์ ์๋๋ก ํ๋ฉฐ HTML/CSS/SASS ํ์ผ์์๋ ๋ ์ผ๊ด๋ ์ฝ๋ฉ ๊ตฌ์กฐ๋ฅผ ๋ง๋ค์ด ์ค๋ค. ํ์ง๋ง ํด๋์ค๋ช
์ ํ์๊ฐ ์ฅํฉํด ์ง๋ฉฐ ์ด๋ฐ ๊ธด ํด๋์ค๋ช
์ฌ์ฉ ๋๋ฌธ์ ๋งํฌ์
์ด ๋ถํ์ํ๊ฒ ์ปค์ง๋ค๋ ๋ฌธ์ ์ ์ด ๋ฐ์ํ๊ธฐ ์์ํ๋ค. ์ฌ์ฌ์ฉํ ๋๋ง๋ค ๋ชจ๋ UI ์ปดํฌ๋ํธ๋ฅผ ๋ช
์์ ์ผ๋ก ํ์ฅํด์ผ๋ง ํ๋ค. ๋ํ SASS์ BEM๋ ๊ณ ์น์ง ๋ชปํ ๋ช ๊ฐ์ง ๋ฌธ์ ๋ค์ ์ธ์ด ๋ก์ง ์์ ์ง์ ํ ์บก์ํ์ ๊ฐ๋
์ด ์๋ค๋ ๊ฒ์ด์๊ณ , ์ด๋ก ์ธํด ๊ฐ๋ฐ์๋ค์ด ์ ์ผํ ํด๋์ค๋ช
์ ์ ํํ๋ ๊ฒ์ ์์กดํ ์๋ฐ์ ์์๋ค.
โค๏ธโ๐ฅ Styled-Component
- ๊ธฐ๋ฅ์ ํน์ ์ํ๋ฅผ ๊ฐ์ง ์ปดํฌ๋ํธ๋ค๋ก๋ถํฐ UI๋ฅผ ์์ ํ ๋ถ๋ฆฌํด ์ฌ์ฉํ ์ ์๋ ๋จ์ํ ํจํด์ ์ ๊ณต
- ๊ธฐ์กด DOM์ ๋ง๋๋ ๋ฐฉ์์ธ CSS, SCSS ํ์ผ์ ๋ฐ์ ๋๊ณ , ํ๊ทธ๋ id, class ์ด๋ฆ์ ๊ฐ์ ธ์ ์ฐ์ง ์๊ณ , ๋์ผํ ์ปดํฌ๋ํธ์์ ์ปดํฌ๋ํธ ์ด๋ฆ์ ์ฐ๋ฏ ์คํ์ผ์ ์ง์ ํ๋ ๊ฒ์ด๋ค. CSS ํ์ผ์ ๋ฐ์ ๋์ง ์๊ณ , ์ปดํฌ๋ํธ์ ๋ด๋ถ์ ๋ฃ๊ธฐ ๋๋ฌธ์ CSS๊ฐ ์ ์ญ์ผ๋ก ์ค์ฒฉ๋์ง ์๋๋ค.
- ์ ํ๋ฆฌ์ผ์ด์
์ผ๋ก ๊ฐ๋ฐ ๋ฐฉํฅ์ด ์งํํ๊ฒ ๋๋ฉด์ ์ปดํฌ๋ํธ ๋จ์ ๊ฐ๋ฐ์ ์บก์ํ์ ์ค์์ฑ์ ๋ถ๋ฌ์๋ค. ํ์ง๋ง CSS๋ ์ปดํฌ๋ํธ ๊ธฐ๋ฐ์ ๋ฐฉ์์ ์ํด ๋ง๋ค์ด์ง ์ ์ด ํ ๋ฒ๋ ์์๋ค. ๊ฒฐ๊ตญ CSS๋ ์ปดํฌ๋ํธ ์์ญ์ผ๋ก ๋ถ๋ฌ๋ค์ด๊ธฐ ์ํด CSS-in-JS๊ฐ ํ์ํด ์ด ๋ฌธ์ ๋ฅผ ์ ํํ๊ฒ ํด๊ฒฐํ๋ค. CSS-in-JS์ ๋ํ์ ์ผ๋ก Styled-Component๊ฐ ์๋ค.
โ CSS ๋ฐฉ๋ฒ๋ก ํน์ง, ์ฅ๋จ์