Vue3์์ ์ ์ํ๋ ์๋ก์ด ๋ฐฉ์์ ์ปดํฌ๋ํธ ๊ตฌ์กฐ๋ฅผ ์๊ฐํ๋ ค๊ณ ํฉ๋๋ค. (composition api) Vue2์์๋ ์ ์ฉ์ด ๊ฐ๋ฅํ๊ณ ํ์ ์คํฌ๋ฆฝํธ์ ํจ๊ป ์ฌ์ฉํ๊ธฐ๋ ์ฉ์ดํ๊ธฐ ๋๋ฌธ์ ์ค๋ฌด์ ์ ์ฉํ๋ ๊ฒ๋ ์๊ฐ๋ณด๋ค๋ ์ด๋ ต์ง ์์์ต๋๋ค! ๐ฅณ
๊ธฐ์กด jsํ์ผ์์ ํด๋ ์์ฒด๋ฅผ importํ๋ ๊ฒ์ด ๋ถ๊ฐ๋ฅ ํฉ๋๋ค. ํ์ง๋ง Vue, React์ ๊ฐ์ ํ๋ ์์ํฌ์์ index ํ์ผ์ ์์ฑํ๋ฉด ํด๋ ์์ ๋ค์ด์๋ ํ์ผ ์ ์ฒด๋ฅผ import ํ๋๊ฒ ๊ฐ๋ฅํฉ๋๋ค! ์ค์ ๋ฐฉ๋ฒ์ import ํ ํด๋ ์์ index.js๋ฅผ ๋ง๋ค
Vue cli3 ์ด์๋ถํฐ๋ ํ๋ก์ ํธ๋ฅผ ์์ฑํ ๋ scss ๊ด๋ จ ๊ธฐ๋ฅ์ ์ฝ๊ฒ ์ถ๊ฐํ ์ ์์ต๋๋ค. ํ์ง๋ง ํ๋ก์ ํธ ์งํ ์ค๊ฐ์ scss๋ฅผ ์ ์ฉํ ์ผ์ด ์๊ฒจ ํด๋น ๋ด์ฉ์ ์ ๋ฆฌํ์์ต๋๋ค ๐์ ์ผ ๋จผ์ ํด๋น package์ node-sass์ sass-loader๋ฅผ ์ค์นํด์ค๋
์ฌ์ด๋ฒ ๊ณต๊ฒฉ์ ๊ฐ์์ฌ์ด๋ฒ ๊ณต๊ฒฉ์ธํฐ๋ท์ ํตํด ๋ค๋ฅธ ์ปดํจํฐ์ ๋ถ๋ฒ ์ ์ํ์ฌ ์๋๋ฐฉ ๊ตญ๊ฐ๋ ๊ธฐ์ , ๊ฐ์ธ์ ์์์ ์ ํ๋ ค๋ ํ๋๊ณผ๊ฑฐ์๋ ๋คํธ์ํฌ ํน์ ๋ก์ปฌ ํธ์คํธ ์์์์ ์๋ชป๋ ์ค์ ์ ์ด์ฉํด ๊ด๋ฆฌ์ ๊ถํ์ ์ ๋ ์ด๋ณด์ ๋ฐฉ์์ด ๋๋ค์๊ธฐ์ ์ ๋ฐ์ ์ ๋ฐ๋ผ ์ฌ์ด๋ฒ ๊ณต๊ฒฉ ๋ฐฉ์๋ ๋ค์
Vue ๊ณต์ ๋ฌธ์ ๊ธฐ๋ฐ์ผ๋ก ์์ฑํ ํ์ ์คํ์ผ ๊ฐ์ด๋์ ๋ํ ๋ด์ฉ ์ ๋ฆฌ์ ๋๋ค ๐์์ธํ ๋ด์ฉ์ ๊ณต์๋ฌธ์๋ฅผ ์ฐธ๊ณ ๋ถํ๋๋ฆฝ๋๋ค.Style Guide - Vue.js1\. ์ปดํฌ๋ํธ์ ์ด๋ฆ์ ํฉ์ฑ์ด๋ฅผ ์ฌ์ฉํ๋ค.html ํ๊ทธ์ ๊ฒฝ์ฐ ํ ๋จ์ด๋ก ํ๊ทธ๊ฐ ๊ตฌ์ฑ๋์ด ์๊ธฐ ๋๋ฌธ์ ์ถฉ๋
ie์์ document.querySelectorAll()์ ๋ด์ ๊ฐ์ฒด์ forEach ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ฉด ์๋ฌ๊ฐ ๋ ธ์ถ๋์ด ํด๊ฒฐ ๋ฐฉ๋ฒ์ ์ ๋ฆฌ ํ์์ต๋๋ค. ๊ธฐ์กด ForEach ์ฌ์ฉ๋ฒ์ Element ๊ฐ์ฒด์ ํ๋กํ ํ์ ๋ฉ์๋์ธ querySelectorAll์ด NodeList
์ด๋ค ์ค์ฒด๊ฐ ์ ๋ง ๊ทธ ์ค์ฒด๊ฐ ๋ง๋์ง ํ์ธํ๋ ๊ณผ์ ์ค์ฒด : ๋ฉ์์ง, ์ฌ์ฉ์, ์ถ์ฒ, ์ฅ์น ๋ฑ (์ฆ, ์ค์ฒด์ ์ง์ค์ฑ์ ํ์ธํ๋ ๊ณผ์ )์์ ๋ ๋ฉ์์ง์ ๋ํ ์ธ์ฆ๋ฉ์์ง์ ๋ด์ฉ์ด ์ ์ก ๋์ค ๋ถ๋ฒ์ ์ผ๋ก ๋ณ๊ฒฝ๋์ง ์๊ณ ์ ํํ๊ณ ์์ ํ๊ฒ ์์ ๋์๋์ง ํ์ธํ๋ ๊ฒ๋ฉ์์ง์ ๋ํ ๋ฌด๊ฒฐ์ฑ
์ํธ : ๋ ์ฌ๋์ด ์์ ํ์ง ์์ ์ฑ๋์ ํตํ์ฌ ์ ๋ณด๋ฅผ ์ฃผ๊ณ ๋ฐ๋๋ผ๋ ์ 3์๋ ์ด ์ ๋ณด์ ๋ด์ฉ์ ์ ์ ์๋๋ก ํ๋ ๊ฒํ๋ฌธ : ์๋์ ๋ฉ์์ง์ํธ๋ฌธ : ์ฝ๋ํ๋ ๋ฉ์์ง์ํธํ : ํ๋ฌธ โ ์ํธ๋ฌธ์ผ๋ก ๋ง๋๋ ๊ฒ๋ณตํธํ : ์ํธ๋ฌธ โ ํ๋ฌธ์ผ๋ก ๋ง๋๋ ๊ฒํค(key) : ์ํธํ์ ๋ณต
์ ๋ณด๋ณดํธ์ ๊ฐ๋ ์ ๋ณด๋ฅผ ์ฌ๋ฌ ๊ฐ์ง ์ํ์ผ๋ก๋ถํฐ ๋ณดํธํ๊ธฐ ์ํ ์ ์ฑ ๋ฐ ๊ธฐ๋ฒ(์ ์ฅ,์ ๋ฌ) (ํ๋ฝ๋์ง ์๋ ์ ๊ทผ, ์์ , ํผ์, ์ ์ถ)์ปดํจํฐ ๋ณด์์ ๊ฐ๋ ์ ๋ณด๋ณดํธ์ ํ ์์ญ, ์ปดํจํ ํ๊ฒฝ์ด ๊ด์ฌ๋ ๋ชจ๋ ์ํฉ์ ๋ํ ์ ๋ณด ๋ณดํธ๋ฅผ ์๋ฏธ\*\*์ ๋ณด๋ณดํธ์ ํต์ฌ๋ชฉํ๊ธฐ๋ฐ์ฑ๊ธฐ
jquery ui ์์ ฏ์ ์ฌ์ฉํด์ select box์ ๋ํ ์ปค์คํ ์ ์ฝ๊ฒ ์ ์ํ ์ ์์ต๋๋ค. ์ฌ์ง์ด aria์ ๊ด๋ จ๋ ์น ์ ๊ทผ์ฑ๋ ์๋์ผ๋ก ์ถ๊ฐ๋๊ณ ์ฌ์ฉ์์ ์ก์ ์ ๋ฐ๋ผ ํด๋น ๊ฐ์ด ์ํฉ์ ๋ง๊ฒ ๋ณ๊ฒฝ๋๊ธฐ ๋๋ฌธ์ ์ ๊ทผ์ฑ๊ณผ ๊ด๋ จํด์๋ ์ฌ์ฉํ๊ธฐ ์ข๋ค๊ณ ์๊ฐํ์ต๋๋ค.๋จ์ ์ด๋ผ
history API๋ ๋ธ๋ผ์ฐ์ ์ ์ธ์ ๊ธฐ๋ก์ ์กฐ์ํ ์ ์๋ ๋ฉ์๋๋ฅผ ๋ด๊ณ ์๋ ๊ฐ์ฒด์ ๋๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก ๋ค๋ก๊ฐ๊ธฐ, ์์ผ๋ก ๊ฐ๊ธฐ, ํ์ด์ง ์ด๋ ๋ฑ์ ์กฐ์ํ ์ ์์ผ๋ฉฐ SPA์ ๊ด๋ จํ์ฌ html5์์ ์๋กญ๊ฒ ์ถ๊ฐ๋ ๋ฉ์๋๋ฅผ ์์๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.ํด๋น ๋ฉ์๋๋ ๋ธ๋ผ์ฐ์ ์
swiper๋ ์ฌ๋ผ์ด๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ๋ค์ํ ๋ฉ์๋์ ์ค์ ์ ์ง์ํด์ ์ฌ์ฉํ๊ธฐ ๋งค์ฐ ํธํ ์ ์ด ์์ต๋๋ค. ๋ฌด์๋ณด๋ค ํ์ ๋ธ๋ผ์ฐ์ (ie9)์์๋ ๋ฌธ์ ์์ด ์ฌ์ฉ ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ์ธก๋ฉด์์๋ ๋ฐ์ด๋ ๋ถ๋ถ์ด ์์ต๋๋ค.๋ํ ์ฌ์ฉ๋ฒ๋ ๋งค์ฐ ๊ฐ๋จํฉ๋๋ค. ์๋์ ๊ฐ์ด ํ
ํ์ ์ด ์ด๋ฆด ๋ ๋ธ๋ผ์ฐ์ ์ ์คํฌ๋กค์ ๋ฐฉ์งํ๊ธฐ ์ํด ํํ๊ฒ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ผ๋ก css๋ฅผ ํ์ฉํ์ฌ body์ overflow:hidden์ ์ ์ฉ ์ํต๋๋ค. ๋ฐฉ๋ฒ๋ ๊ฐํธํ๊ณ ์คํ์ผ๋ก ์ ์ดํ ์ ์๊ธฐ ๋๋ฌธ์ ๋ง์ด ์ฌ์ฉํ์ง๋ง ios safari์์ ๋์ํ์ง ์๋ ๋ฌธ์ ๊ฐ ์๊ธฐ ๋