์žฌ๋ฐŒ๊ฒŒ ํ•ฉ์‹œ๋‹ค

๊ธฐ๋กํ•˜๊ธฐ, ๊ฐ€์‹œํ™”ํ•˜๊ธฐ

Vanilla JS/์‡ผํ•‘๋ชฐ SPA 1
Vanilla Javascript๋กœ ์ปดํฌ๋„ŒํŠธ ๋งŒ๋“ค๊ธฐ

๋ฐ”๋‹๋ผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ ์‡ผํ•‘๋ชฐ SPA๋ฅผ ๊ตฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด, ๊ฐ€์žฅ ๊ธฐ๋ณธ์ด ๋  ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ •์˜ํ–ˆ๋‹ค. ํ™ฉ์ค€์ผ๋‹˜์˜ ๊ธ€์„ ์ฐธ๊ณ ํ•ด ์ดˆ์•ˆ์„ ์งœ๊ณ , ์ˆ˜์ •์„ ๊ฑฐ์ณค๋‹ค. ๊ธฐ์กด ์ฝ”๋“œ constructor: ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ƒ์„ฑํ•œ๋‹ค. ์ฆ‰ ์ดˆ๊ธฐ state/props๋ฅผ ์„ค์ •ํ•˜๊ณ , template ์—ฐ์‚ฐ์˜ ๊ฒฐ๊ณผ๋ฌผ์ธ ๋งˆํฌ์—…์„ ๋ Œ๋”๋งํ•˜๊ณ , ์ด๋ฒคํŠธ๋ฆฌ์Šค๋„ˆ๋ฅผ ๋“ฑ๋กํ•œ๋‹ค. setup: ์ดˆ๊ธฐ state๋ฅผ ์„ค์ •ํ•œ๋‹ค. mounted: ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ๋“ค์˜ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ๋‹ค. template: ์ปดํฌ๋„ŒํŠธ์˜ state๋ฅผ ๋ฐ˜์˜ํ•œ ๋งˆํฌ์—…์„ ๋ฆฌํ„ดํ•œ๋‹ค. render: $target๋‚ด์— ๋งˆํฌ์—…์„ ๋ Œ๋”๋งํ•œ๋‹ค. ๊ทธ ๋‹ค์Œ mounted ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ๋‹ค. setState: ์ƒํƒœ๋ฅผ ์—…๋ฐ์ดํŠธํ•˜๊ณ , render ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•œ๋‹ค. mounted ๋ฉ”์„œ๋“œ๋ฅผ ์ข€ ๋” ์ž์„ธํžˆ ์‚ดํŽด๋ณด์ž. ์˜ˆ์‹œ๋กœ ํ™ฉ..
Vanilla JS/์‡ผํ•‘๋ชฐ SPA 2022.10.24
1
๋”๋ณด๊ธฐ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”