RSS DEV ์ปค๋ฎค๋‹ˆํ‹ฐ

๐Ÿš€ ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์Šค์‹œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์›น์‚ฌ์ดํŠธ | Vite ๋ฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๊ตฌ์ถ•

VanillaJS ์Šค์‹œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์›น์‚ฌ์ดํŠธ๋Š” ๋ถ€๋“œ๋Ÿฌ์šด ์• ๋‹ˆ๋ฉ”์ด์…˜๊ณผ ๋ฐ˜์‘ํ˜• ๋ ˆ์ด์•„์›ƒ์„ ๊ฐ–์ถ˜ ์ผ๋ณธ ์Œ์‹ ํ…Œ๋งˆ ๋ ˆ์Šคํ† ๋ž‘ ๊ฒฝํ—˜์„ ์„ ๋ณด์ด๋Š” ์˜คํ”ˆ ์†Œ์Šค ๋žœ๋”ฉ ํŽ˜์ด์ง€์ž…๋‹ˆ๋‹ค. Vite์™€ Vanilla JavaScript๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌ์ถ•๋˜์—ˆ์œผ๋ฉฐ, ๋ฌด๊ฑฐ์šด ํ”„๋ ˆ์ž„์›Œํฌ์— ์˜์กดํ•˜์ง€ ์•Š๊ณ  ํ•ต์‹ฌ ์›น ๊ธฐ๋ณธ ์‚ฌํ•ญ์„ ๋ณด์—ฌ์ฃผ๋Š” ํ›Œ๋ฅญํ•œ ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค. ์ด ์›น์‚ฌ์ดํŠธ๋Š” ๋ถ€๋“œ๋Ÿฌ์šด ์• ๋‹ˆ๋ฉ”์ด์…˜, ๋ฐ˜์‘ํ˜• ๋ ˆ์ด์•„์›ƒ, ๊ทธ๋ฆฌ๊ณ  ์žฌ๋ฏธ์žˆ๋Š” UI ์š”์†Œ๋ฅผ ํŠน์ง•์œผ๋กœ ํ•˜๋ฉฐ, ํฌํŠธํด๋ฆฌ์˜ค๋‚˜ UI ์˜๊ฐ์„ ์–ป๊ธฐ์— ์™„๋ฒฝํ•ฉ๋‹ˆ๋‹ค. ์ด ์›น์‚ฌ์ดํŠธ์˜ ์ฃผ์š” ํŠน์ง•์œผ๋กœ๋Š” ๋ถ€๋“œ๋Ÿฌ์šด ์• ๋‹ˆ๋ฉ”์ด์…˜, ๋ฐ˜์‘ํ˜• ๋ ˆ์ด์•„์›ƒ, Vanilla JavaScript ๋กœ์ง, Vite ๊ธฐ๋ฐ˜ ๋นŒ๋“œ, ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ UI ์š”์†Œ, ๊ทธ๋ฆฌ๊ณ  ๊น”๋”ํ•œ ์ฝ”๋“œ ๊ตฌ์กฐ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ์›น์‚ฌ์ดํŠธ๋Š” ํ•ต์‹ฌ ๋™์ž‘ ๋ฐ DOM ์กฐ์ž‘์„ ์œ„ํ•ด Vanilla JavaScript, ๋ฒˆ๊ฐœ์ฒ˜๋Ÿผ ๋น ๋ฅธ ๋ฒˆ๋“ค๋Ÿฌ ๋ฐ ๊ฐœ๋ฐœ ์„œ๋ฒ„๋ฅผ ์œ„ํ•ด Vite, ๋งˆํฌ์—… ๋ฐ ์Šคํƒ€์ผ์„ ์œ„ํ•ด HTML ๋ฐ CSS, ๊ทธ๋ฆฌ๊ณ  ๋ฐ˜์‘ํ˜• ๋””์ž์ธ ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌ์ถ•๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด ํ”„๋กœ์ ํŠธ์˜ ๋ชฉ์ ์€ ๊ฐœ๋ฐœ์ž๋“ค์ด JavaScript DOM ์กฐ์ž‘, CSS ์• ๋‹ˆ๋ฉ”์ด์…˜, ๋ฐ˜์‘ํ˜• ๋””์ž์ธ, ๊ทธ๋ฆฌ๊ณ  ํšจ์œจ์ ์ธ ๋นŒ๋“œ ๋„๊ตฌ ๋“ฑ ํ•ต์‹ฌ ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ์ˆ ์„ ๊ฐ•ํ™”ํ•˜๋„๋ก ๋•๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ด ์›น์‚ฌ์ดํŠธ๋Š” ์ดˆ๊ธ‰์—์„œ ์ค‘๊ธ‰ ๊ฐœ๋ฐœ์ž ํฌํŠธํด๋ฆฌ์˜ค ๋ฐ UI ์—ฐ์Šต์— ์ด์ƒ์ ์ด๋ฉฐ, ์ถ”๊ฐ€์ ์ธ ์‚ฌ์šฉ์ž ์ •์˜ ๋ฐ ๊ฐœ๋ฐœ์„ ์œ„ํ•œ ์‹œ์ž‘์ ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์›น์‚ฌ์ดํŠธ์˜ ์ฝ”๋“œ ๊ตฌ์กฐ๋Š” ๊น”๋”ํ•˜๊ณ  ์ฝ๊ธฐ ์‰ฌ์›Œ ๊ฐœ๋ฐœ์ž๋“ค์ด ํŒจ๋Ÿด๋ž™์Šค ์Šคํฌ๋กค, ์Œํ–ฅ ํšจ๊ณผ ๋˜๋Š” ๋ฉ”๋‰ด ํ•„ํ„ฐ์™€ ๊ฐ™์€ ์ž์ฒด ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒ ๊ธฐ๋Šฅ์„ ์‰ฝ๊ฒŒ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ํ”„๋กœ์ ํŠธ๋Š” GitHub์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ, ์‚ฌ์šฉ์ž๋“ค์ด ํƒ์ƒ‰ํ•˜๊ณ  ์˜๊ฐ์„ ์–ป์„ ์ˆ˜ ์žˆ๋„๋ก ๋ผ์ด๋ธŒ ๋ฐ๋ชจ๋„ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค. ์ „๋ฐ˜์ ์œผ๋กœ, VanillaJS ์Šค์‹œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์›น์‚ฌ์ดํŠธ๋Š” ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ์ˆ ์„ ํ–ฅ์ƒ์‹œํ‚ค๊ณ  ๋งค๋ ฅ์ ์ด๊ณ  ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒํ•œ ์‚ฌ์šฉ์ž ๊ฒฝํ—˜์„ ๋งŒ๋“ค๊ณ ์ž ํ•˜๋Š” ๊ฐœ๋ฐœ์ž๋“ค์—๊ฒŒ ํ›Œ๋ฅญํ•œ ์ž๋ฃŒ์ž…๋‹ˆ๋‹ค.
favicon
dev.to
๐Ÿš€ VanillaJS Sushi Animated Website | Built with Vite & JavaScript
๊ธฐ์‚ฌ ์ด๋ฏธ์ง€: ๐Ÿš€ ๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์Šค์‹œ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์›น์‚ฌ์ดํŠธ | Vite ๋ฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ๊ตฌ์ถ•
Create attached notes ...