์๋ ํ์ธ์ !
vueJS ๊ธฐ๋ฅ์ ์ฌ์ฉํ์ฌ ์ด ๊ทธ๋ฆฌ๋๋ฅผ ์ฌ๋ฐ๋ฅด๊ฒ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ด ์๋์ง ์๊ณ ์ถ์ต๋๋ค...
DOM์ด ์์ฑ๋๋ ๋ฐฉ์ ๋๋ฌธ์ ์์ ฏ์ ์ถ๊ฐํ ๋ vue ์ปดํฌ๋ํธ๋ฅผ ์ถ๊ฐํ ์ ์๋ ๊ฒ ๊ฐ๊ณ , ๊ฐ๋จํ ์๋ฐ์คํฌ๋ฆฝํธ ๊ธฐ๋ฅ๋ ์ธ์ํ์ง ๋ชปํ ๊ฒ์ ๋๋ค... ์ผ๋ฐ HTML์์๋ง ์๋ํ๋ฏ๋ก ์๋ฌด ์์ฉ์ด ์์ต๋๋ค.
๋ํ v-if๋ก ์ผ๋ถ ์์ ฏ์ ์จ๊ธฐ๋ ค๊ณ ํ์ง๋ง ํ์๋๋ฉด ์ ์ ํ์ผ์ ๋ ๋๋งํฉ๋๋ค(makeWidget(el)๋ ์ฌ์ฉํ๋ ค๊ณ ์๋ํ์ง๋ง ํ์๊ณ ์์ต๋๋ค). ๋ฐฐ์ด๋ก v-for๋ฅผ ์ํํ๋ ๊ฒฝ์ฐ์๋ ๋ง์ฐฌ๊ฐ์ง์ ๋๋ค.
๋๋ webpack๊ณผ ํจ๊ป ์ด ๊ทธ๋ฆฌ๋์ vueJs 2.4.2์ ์ต์ ๋ฒ์ ์ ์ฌ์ฉํ๊ณ ์์ต๋๋ค.
๋ค๋ฅธ ์ ๋ณด๊ฐ ํ์ํ๋ฉด ์๋ ค์ฃผ์ญ์์ค. ๊ทธ๋ฌ๋ ์ด๊ฒ์ ์ผ๋ฐ์ ์ธ ์ง๋ฌธ์ด๋ฏ๋ก ๋ช ํํด์ผ ํฉ๋๋ค.
๊ฐ์ฌ ํด์!
๋๋์ด ์ฑ๊ณตํ์ต๋๋ค! ๊ด์ฌ ์๋ ์ฌ๋์๊ฒ ์ด ๋ฐฉ๋ฒ ์ฌ์ฉ: https://codepen.io/nyoung697/pen/BperoZ
์ด ์ ๊ทผ ๋ฐฉ์์ ์ฌ์ฉํ์ต๋๋ค: https://codepen.io/Tropicalista/pen/PmKajR
์ด ์ ๊ทผ ๋ฐฉ์์ ์ฌ์ฉํ์ต๋๋ค: https://codepen.io/Tropicalista/pen/PmKajR
์ด ์์ ์ ๋ฌธ์ ๊ฐ ์์ต๋๋ค
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
๋๋์ด ์ฑ๊ณตํ์ต๋๋ค! ๊ด์ฌ ์๋ ์ฌ๋์๊ฒ ์ด ๋ฐฉ๋ฒ ์ฌ์ฉ: https://codepen.io/nyoung697/pen/BperoZ