ํฌ๋์ฑ๋ ๋ง๋ค์ด๋ณด๊ณ ์บ๋ฆญํฐ๋ ๋ง๋ค์ด๋ณด๊ณ ์ฌ๋ฐ์๋คโฆ ๊ทผ๋ฐ Sass๋ Tailwind ์์
์ด ๋๋ ์ ์ด๋ ๊ฒ ํ๋ค๊น?? ๋ฐ๋ก ์ธํ๋ฐ ๊ฐ์๋ฅผ ์ข ๋ค์ด๋ด์ผ๊ฒ ๋ค. ๊ทธ๋ฆฌ๊ณ ์ด์ ์ค๋ ๋๋ฌด ์กธ๋ฆฌ๋ค,, ์ฒด๋ ฅ์ด ๊ฐ์๊ธฐ ๊ธ๊ฐ,,,
ํ์ค ์งํ ์ ๋ค๋ฆญ ํํธ๋ฅผ ๋งก๊ฒ ๋์๋ค,,, ํจ๊ธฐ๊ฐ ๋๋ฌด ์์๋ฒ๋ ธ๋? ใ
ใ
;; ๋ฏธ๋ฆฌ ๊ณต๋ถํ๊ธฐ ์ํด ๊ฐ์๋ฅผ ํ ๋ฒ ๋ค์ด๋ณผ๊น ํ๋ค. ๋ฏธ๋ฆฌ ๋ฏธ๋ฆฌ ์์ฑํด์ผ์ง,,!!
๊ทธ๋ฆฌ๊ณ ์ด์ ์์ค ์์,,, ์ฒซ ๋ ์ด๋ผ ์ด์ง ๋ฐฉ์ฌ ํ๋๋ฐ ํค๊น๋ฅ ํ ๋ถ๋ถ์ด ๋ช ๊ตฐ๋ฐ ์์๋ค ^-^,,, ๋ณต์ต์ ์ ํด๋ณด์,,,
์ฐํด ๋ ๋ณต์ต์ด๋ ์ ๋ง์ด ์์ผ๊ฒ ๋ค ใ
ใ
์!! ์ ์ฃผ JS 100์ ๋ ๋ค์ ํ๊ธฐ ์์ํด์ผ๊ฒ ๋ค ใ
ใ
,,,
1. ๋ธ๋ผ์ฐ์ ๋ ๋๋ง ๊ณผ์ โ ์งํ์ ์ํด DOM, CSSOM, ๋ ๋ ํธ๋ฆฌ๊ฐ ์ด๋ป๊ฒ ์์ฑ๋๋์ง์ ๋ํด ๊ณต๋ถํ๋ค.
DOM ์์ฑ์๋ฆฌ ๋ฟ๋ง ์๋๋ผ ์ ์ด๊ฒ ํ์ํ์ง, ๊ฐ๋ฐ์ ์ด๋ป๊ฒ ์ ๋ชฉ์ํฌ ์ ์์์ง์ ๋ํ ๊ณ ๋ฏผ๊ณผ ๊ณต๋ถ๋ ํ์ํ ๊ฒ ๊ฐ๋ค
2. ์บ๋ฆญํฐ ๋ง๋ค๊ธฐ : ๋จ์ํ animation๋ง ์ฌ์ฉํ ๊ฒ ๊ฐ๋ค. ๋ค๋ฅธ ์ฌ๋๋ค ์ฝ๋ ๋ณด๋ฉด์ ๋ง์ด ๋ฐฐ์์ผ๊ฒ ๋ค.
3. Saas Document์ ์ค๋ฅ๊ฐ ์์ด์ ์์ ํ๊ณ Pull Request๋ฅผ ์ฒ์ ๋ ๋ ค๋ดค๋ค ํํ ๊ฑฐ์ ํ์ง ๋ง์ธ์ฌ ์ฌ์ค๋
๋ฉํ: ์ฒด๋ ฅ์ด ์ง์น๋๊น ๋ฉํ์ด ์ฝ๊ฐ ๊ฐ์ด ๋๊ฐ๋ ๋๋.. ์ง์ง์์ต๋๋ค..
๋ธ๋ผ์ฐ์ ๋ ๋๋ง ๊ณผ์ โ ์งํ์ ์ํด DOM, CSSOM, ๋ ๋ ํธ๋ฆฌ๊ฐ ์ด๋ป๊ฒ ์์ฑ๋๋์ง์ ๋ํด ๊ณต๋ถํ๋ค.
DOM ์์ฑ์๋ฆฌ ๋ฟ๋ง ์๋๋ผ ์ ์ด๊ฒ ํ์ํ์ง, ๊ฐ๋ฐ์ ์ด๋ป๊ฒ ์ ๋ชฉ์ํฌ ์ ์์์ง์ ๋ํ ๊ณ ๋ฏผ๊ณผ ๊ณต๋ถ๋ ํ์ํ ๊ฒ ๊ฐ๋ค
์์ผ๋ก ํด์ผํ ์ผ, ๊ณต๋ถํ ๊ฒ
โข ๋ธ๋ผ์ฐ์ ๋ ๋๋ง ๊ณผ์ ๋ธ๋ก๊น
โข ์๋ฃ ๊ตฌ์กฐ์ ๋ํด ๊ณต๋ถํ๊ณ ์๊ณ ๋ฆฌ์ฆ ๋ฌธ์ ํ๊ธฐ
โข ์๋ฐ์คํฌ๋ฆฝํธ ์์ตํ๊ธฐ
โข ์ด๋ ฅ์ ์ฐ๊ธฐ ์ด์ฉ๋ค๋ณด๋ DOM ์ฒซ์ฑํฐ๋ฅผ ๋งก์๋ฒ๋ คโฆ์ด๋ฒ์ฃผ๋,,์์
๊ณผ,,์ฑ
์งํ๊ณผ,,๊ณผ์ ์,,์ด๋ ฅ์์ ๋ช์ผ๋ก ๋น ์ ธ๋ฒ๋ ธ์ต๋๋ค,,,CSS๋ณต์ต๊น์ง ํ๋ ๊ฒ์ด ๋ชฉํ์ธ๋ฐ,,์ฒด๋ ฅ์ด,,ํญ์ ๋ถ์กฑํฉ๋๋ค,,! ์์ฃผ ์ฐ์ฃผ๋ก ๊ฐ๋ฒ๋ฆฌ๋ ๋,,
Bootstrap, Sass,Tailwind,JS ์๋ก์ด ์ฃผ์ ๋ฅผ ๋งค์ผ ๋งค์ผ ๋ฐฐ์ ๋ ํ ์ฃผ CSS ์ ๋ฆฌ๋ฅผ ์ฃผ๋ง์ ํด์ผ๊ฒ ๋ค. ์๋ฐ์คํฌ๋ฆฝํธ ์์
์์ํ๋๋ฐ ์ฃผ๋ง์ ์๋ฐ์คํฌ๋ฆฝํธ ๊ณต๋ถ๋ฅผ ํด์ผ ๋ค์์ฃผ ์์
์ ๋ฐ๋ผ๊ฐ ์ ์์ ๋ฏ ํ๋ค. ์ฑ
์งํ ์ฒซ ์ฑํฐ ๋ฐ ์ ๋ง๋ฌด๋ฆฌํ์! ์ด๋ ฅ์๋ ํํํ ์์ฑํ์!
์ฃผ๋ง์ ์ฑ
์งํ, ๊ณผ์ ,์ด๋ ฅ์, CSS์ ๋ฆฌ,์์ค ๊ณต๋ถ ํ์!
๋ฐฐ์ด ๊ฒ์ ๋ค ์ํํ๊ณ ์์ค๋ก ๋์ด๊ฐ๊ณ ์ถ์๋๋ฐ ๋น์ฅ ์ด๋ฒ ์ฃผ ๊ธ์์ผ๋ถํฐ ์์
์ ๋ค์ด๊ฐ๋ค..! ๊ณํํ๊ฐ ํฐ์ ธ๋๊ฐ๊ณ ์์ด์ ์ ํ๊ณผ ์ง์ค์ด ํ์ํ ๋ฏํ๋ค :>
* ์์ค ์ฒซ ์์
์ด ์์๋๋ฐ ์ด๋ ค์ด ๋ฏํ๋ฉด์๋ ์ฌ๋ฏธ์์๋ค
* ์์ค๋ ์์
์ ํ ๋ฒ์ด๋ผ๋ ๋์น๋ฉด ๋ง์ด ํ๋ค์ด์ง ๊ฒ ๊ฐ์ ๋๋์ด ๋ค์๋ค. ์์ต์๊ฐ์ ๋ณต์ต์ ์์ฃผ๋ก ์๊ฐ์ ์จ์ผํ ๊ฒ ๊ฐ๋ค.
* ์ด๋ฒ ์ฐํด์ ํ์ค๋ฅผ ๊ฐ๋จํ๊ฒ๋๋ง ํ ๋ฒ์ฉ ์น ํ์ด๋ณด๋ ๊ฒ์ด ๋ชฉํ์ด๋ค
์บ๋ฆญํฐ๋ฅผ ๋ง๋๋๋ฐ ๋ง๋๋ก ๋์ง ์๊ณ ์๊น์ ์ ํํ๋ ๊ฑฐ์์ ๋ง์ ๋ค์ง ์์์ ๋์์ด๋์ ์์ง์ ์ฌ์ ํ ์๋ค๊ณ ๋๊ผ๋ค. ์ด๋ ฅ์๋ฅผ ์์ฑํ๋ ๋ฐฉ๋ฒ์์๋ ์ ์ด๋ ๊ฒ ์์ฑํด์ผ๋๋๊ตฌ๋๋ผ๊ณ ์กฐ๊ธ ๋ ๋ช
ํํ ์ ์ ์์๋ค.
์ด๋ฒ์ฃผ์๋ ํ์ค๋ ์์ค์ ๋ํด์ ์กฐ๊ธ ๋ ๊ณต๋ถํ ๋ ค๊ณ ํ๋ค.
๊ทธ๋ฆฌ๊ณ ์ด๋ ฅ์๋ฅผ ๋์์ธํด๋ณด๊ณ ์ง์ Tailwind๋ก ๋ง๋ค์ด๋ณผ๋ ค๊ณ ํ๋ค. ์ด๋ฒ์ฃผ๊ฐ ๊ทธ๋๋ CSS๋ฅผ ์ ๋ฆฌํ ์ ์๋ ๋ง์ง๋ง ์ฃผ๋ผ๊ณ ์๊ฐํ๊ณ ์ด๋ฒ์ฃผ๊น์ง๋ CSS์ ๋ํด์ ์ ๋
ํ๋ ค๊ณ ํ๋ค.
์ด๋ฒ์ฃผ์๋ 1์ ์ด์ ์ ์๊ณ ์๋๋ฐ ์์ฃผ ์ข์ ๊ฒ๊ฐ๋ค! - ์ฒด๋ ฅ์ ์ผ๋ก ์ฉ์กํด์ง ๊ฒ ๊ฐ์์ ์์
์ ๋ ์ด์ฌํ ๋ฃ๊ณ ์๋ ๊ฒ ๊ฐ๋ค!!
sass ์ฒ์ ๋ค์ด๋ณด๋๋ฐ ์์ค์ ์์ธ ๊ธฐ๋ถ์ด๋ผ์ ์ฌ๋ฏธ์๊ณ ์์ผ๋ก ํ์ฉ์ ์ข ๋ ํด๋ณด๊ณ ์ถ๋ค!
ํ์ค๋ฅผ ์ฑ
์งํ ๋๋ฌธ์ ์ฒ์ ํด๋ณด๋๋ฐ! ์ฒจ์ด๋ผ์ ๋ฌด์จ ์๋ฆฌ์ ธโฆ. ์์ค๋ ์์์ผํ๋ ๊ฒ ๊ฐ๊ณ โฆ.๊ทธ๋ฆฌ๊ณ ๋ฌด์๋ณด๋ค ์งํ ์์ฒด๊ฐ ์๊ฐ๋ณด๋ค ์ด๋ ต๋ค๋ ๊ฒ!
์ง๊ธ css ์ ๋ฆฌ๋ฅผ ๋ชปํ๊ณ ์ฐ์ ๊ณผ์ ์ ์์ ์๋ ์ผ๋ค์ ํ๋๋ผ๊ณ ์ ๋ฆฌํ ์๊ฐ์ด ์๋ค. ์ด๋ฒ ์ฐํด๋ฅผ ํตํด์ ์ ๋ฆฌ๋ฅผ ํด๋ด์ผ๊ฒ ๋ค!!! ์ฆ๊ฒ๋ค์์์์์!! ์์
ํ์ค ์งํ ๋๋ฌด ํ๋ค๋ค.. ๊ฑฐ์ ํ์ ์์ค์ด ์๋๊ฐ.. ์๊ฐ์ค..!
tailwind๋ sass ์ฌ๋ฏธ์๊ฒ ๋ค์๊ณ ๋ฒ์จ css๋ฅผ ์์ด๋ฒ๋ฆฐ ๋๋.. ์ฌ๋ผ์ ธ๋จ
๊ณผ์ ๊ฐ ๋๋ฌด ๋ง๊ณ ํ ๊ฒ ์ ์ ์์ธ๊ฑฐ ๊ฐ์์ ๋๋ฌด ์์ํ๋ค..ใ
ใ
ใ
์ฃผ๋ง์๋ ์ฐ์ ์ด๋ ฅ์, ์ด๋ ฅ์๊ณผ์ , css์ ๋ฆฌ๋ฅผ ๋ง๋๋ง๋ ํด์ผ๊ฒ ๋คโฆ!
์๋ฒฝ์ ์ผ์ฐ ์์ผํ๋ค! ์ ๋๋ฌธ์ ์์
์ ์ ๋๋ก ๋ชป ๋ฃ๋๊ฒ ๊ฐ๋คใ
ใ