VanillaJS ์ค์ ์ ๋๋ฉ์ด์
์น์ฌ์ดํธ๋ ๋ถ๋๋ฌ์ด ์ ๋๋ฉ์ด์
๊ณผ ๋ฐ์ํ ๋ ์ด์์์ ๊ฐ์ถ ์ผ๋ณธ ์์ ํ
๋ง ๋ ์คํ ๋ ๊ฒฝํ์ ์ ๋ณด์ด๋ ์คํ ์์ค ๋๋ฉ ํ์ด์ง์
๋๋ค. Vite์ Vanilla JavaScript๋ฅผ ์ฌ์ฉํ์ฌ ๊ตฌ์ถ๋์์ผ๋ฉฐ, ๋ฌด๊ฑฐ์ด ํ๋ ์์ํฌ์ ์์กดํ์ง ์๊ณ ํต์ฌ ์น ๊ธฐ๋ณธ ์ฌํญ์ ๋ณด์ฌ์ฃผ๋ ํ๋ฅญํ ์์์
๋๋ค. ์ด ์น์ฌ์ดํธ๋ ๋ถ๋๋ฌ์ด ์ ๋๋ฉ์ด์
, ๋ฐ์ํ ๋ ์ด์์, ๊ทธ๋ฆฌ๊ณ ์ฌ๋ฏธ์๋ UI ์์๋ฅผ ํน์ง์ผ๋ก ํ๋ฉฐ, ํฌํธํด๋ฆฌ์ค๋ UI ์๊ฐ์ ์ป๊ธฐ์ ์๋ฒฝํฉ๋๋ค. ์ด ์น์ฌ์ดํธ์ ์ฃผ์ ํน์ง์ผ๋ก๋ ๋ถ๋๋ฌ์ด ์ ๋๋ฉ์ด์
, ๋ฐ์ํ ๋ ์ด์์, Vanilla JavaScript ๋ก์ง, Vite ๊ธฐ๋ฐ ๋น๋, ์ธํฐ๋ํฐ๋ธ UI ์์, ๊ทธ๋ฆฌ๊ณ ๊น๋ํ ์ฝ๋ ๊ตฌ์กฐ๊ฐ ์์ต๋๋ค. ์ด ์น์ฌ์ดํธ๋ ํต์ฌ ๋์ ๋ฐ DOM ์กฐ์์ ์ํด Vanilla JavaScript, ๋ฒ๊ฐ์ฒ๋ผ ๋น ๋ฅธ ๋ฒ๋ค๋ฌ ๋ฐ ๊ฐ๋ฐ ์๋ฒ๋ฅผ ์ํด Vite, ๋งํฌ์
๋ฐ ์คํ์ผ์ ์ํด HTML ๋ฐ CSS, ๊ทธ๋ฆฌ๊ณ ๋ฐ์ํ ๋์์ธ ๊ธฐ์ ์ ์ฌ์ฉํ์ฌ ๊ตฌ์ถ๋์์ต๋๋ค. ์ด ํ๋ก์ ํธ์ ๋ชฉ์ ์ ๊ฐ๋ฐ์๋ค์ด JavaScript DOM ์กฐ์, CSS ์ ๋๋ฉ์ด์
, ๋ฐ์ํ ๋์์ธ, ๊ทธ๋ฆฌ๊ณ ํจ์จ์ ์ธ ๋น๋ ๋๊ตฌ ๋ฑ ํต์ฌ ํ๋ก ํธ์๋ ๊ธฐ์ ์ ๊ฐํํ๋๋ก ๋๋ ๊ฒ์
๋๋ค. ์ด ์น์ฌ์ดํธ๋ ์ด๊ธ์์ ์ค๊ธ ๊ฐ๋ฐ์ ํฌํธํด๋ฆฌ์ค ๋ฐ UI ์ฐ์ต์ ์ด์์ ์ด๋ฉฐ, ์ถ๊ฐ์ ์ธ ์ฌ์ฉ์ ์ ์ ๋ฐ ๊ฐ๋ฐ์ ์ํ ์์์ ์ผ๋ก ์ฌ์ฉํ ์ ์์ต๋๋ค. ์น์ฌ์ดํธ์ ์ฝ๋ ๊ตฌ์กฐ๋ ๊น๋ํ๊ณ ์ฝ๊ธฐ ์ฌ์ ๊ฐ๋ฐ์๋ค์ด ํจ๋ด๋์ค ์คํฌ๋กค, ์ํฅ ํจ๊ณผ ๋๋ ๋ฉ๋ด ํํฐ์ ๊ฐ์ ์์ฒด ์ธํฐ๋ํฐ๋ธ ๊ธฐ๋ฅ์ ์ฝ๊ฒ ์ถ๊ฐํ ์ ์์ต๋๋ค. ์ด ํ๋ก์ ํธ๋ GitHub์์ ์ฌ์ฉํ ์ ์์ผ๋ฉฐ, ์ฌ์ฉ์๋ค์ด ํ์ํ๊ณ ์๊ฐ์ ์ป์ ์ ์๋๋ก ๋ผ์ด๋ธ ๋ฐ๋ชจ๋ ์ ๊ณต๋ฉ๋๋ค. ์ ๋ฐ์ ์ผ๋ก, VanillaJS ์ค์ ์ ๋๋ฉ์ด์
์น์ฌ์ดํธ๋ ํ๋ก ํธ์๋ ๊ธฐ์ ์ ํฅ์์ํค๊ณ ๋งค๋ ฅ์ ์ด๊ณ ์ธํฐ๋ํฐ๋ธํ ์ฌ์ฉ์ ๊ฒฝํ์ ๋ง๋ค๊ณ ์ ํ๋ ๊ฐ๋ฐ์๋ค์๊ฒ ํ๋ฅญํ ์๋ฃ์
๋๋ค.
dev.to
๐ VanillaJS Sushi Animated Website | Built with Vite & JavaScript
