์๋์์ ์ํ์์ธ ํ์ด์ง ๋ ๋๋ง ์๋๊ฐ์ ๊ด๋ จ ๋ด์ฉ์ ์์ฑ
๋ฆฌ์กํธ ๊ณต์ ๋ฌธ์์ ๋ฐ๋ฅด๋ฉด ์๋์ ๊ฐ์ด ์ค๋ช ํ๊ณ ์์ต๋๋ค.๋ฐ๋ผ์ props drilling์ ๋ฐฉ์ง ํ ์ ์์ต๋๋ค.vue๋ ๋น๊ตํด๋ณธ๋ค๋ฉด event bus์ ๋น์ทํ ๋ชฉ์ ์ ๊ฐ์ง๊ณ ์์ต๋๋ค.๊ธฐ๋ณธ์ ์ผ๋ก React.createContext ๋ฉ์๋๋ฅผ ํตํ์ฌ context ๊ฐ์ฒด๋ฅผ
๊ธฐ๋ณธ์ ์ผ๋ก ํ์ ์คํฌ๋ฆฝํธ Language server์ ์ํด ํ์ ์ด ์ถ๋ก ๋๊ฒ ๋ฉ๋๋คํจ์ ํ๋ผ๋ฏธํฐ์ ๊ธฐ๋ณธ๊ฐ, ๋ฐํ๊ฐ ์ง์ ๋ณ์๋ฅผ ์ ์ธํด์ ๊ฐ์ ํ ๋น ํ ๋ ์ด๋ฏธ์ง์ ๊ฐ์ด test ๋ณ์์์ ์ด๋ค ํ์ ์ return ํด์ฃผ๋์ง ์๋์ผ๋ก ๋ณด์ฌ์ค๋๋ค.test(123) ์คํ์ ํ
๊ธฐ์กด์ ๊ณ ์ ๋ ํ์ ์ ๋์ด์ ๋์จ ํ์ ์ ๋์ดโฆํจ์ ์ค๋ฒ๋ก๋ฉ์ ๋์ดโฆ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ๊ฒ ๊ตฌ์ถํ๊ณ ์ถ๋ค๋ฉด?์ฌ๋ฌ๊ฐ์ง ํ์ ์ฌ์ฉ์ด ๊ฐ๋ฅํ ์ ๋ค๋ฆญ ํ์ ์ ์ฌ์ฉํด๋ณด์!์ผ๋ฐ์ ์ธ ํ์ ๊ณผ ๋ค๋ฅด๊ฒ ํจ์์ ์ ์ธ ์์ ์ด ์๋๋ผ ์ฌ์ฉ ์์ ์ ํ์ ์ ์ ์ธํด์ค๋๋ค.T๋ ์ ๋ค๋ฆญ ํ์ ํ๋ผ๋ฏธ
react-query4๋ฅผ ๊ธฐ์ค์ผ๋ก ์์ฑ๋ ๊ธ์ด๊ธฐ ๋๋ฌธ์ 5๊ฐ ๋์ค๋ฉด์ ์ ๋ฐ์ดํธ ๋ ๋ถ๋ถ์ ๊ณต์๋ฌธ์๋ฅผ ์ฐธ๊ณ ํ๋ ๊ฒ ์ ์ผ ์ข์ต๋๋ค!๊ฐ๋ ๋ง ๋น ๋ฅด๊ฒ ์ดํด๋ณด๋ ์ชฝ์ผ๋ก ๊ฐ๋ณ๊ฒ ์ฝ์ด์ฃผ์๋ฉด ๋ ๊ฑฐ ๊ฐ์ต๋๋ค :) React ํ๊ฒฝ์์ ๋น๋๊ธฐ Query ๊ณผ์ ์ ๋์์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌQuery๊ฐ
Vue3์์ ์ ์ํ๋ ์๋ก์ด ๋ฐฉ์์ ์ปดํฌ๋ํธ ๊ตฌ์กฐ๋ฅผ ์๊ฐํ๋ ค๊ณ ํฉ๋๋ค. (composition api) Vue2์์๋ ์ ์ฉ์ด ๊ฐ๋ฅํ๊ณ ํ์ ์คํฌ๋ฆฝํธ์ ํจ๊ป ์ฌ์ฉํ๊ธฐ๋ ์ฉ์ดํ๊ธฐ ๋๋ฌธ์ ์ค๋ฌด์ ์ ์ฉํ๋ ๊ฒ๋ ์๊ฐ๋ณด๋ค๋ ์ด๋ ต์ง ์์์ต๋๋ค! ๐ฅณ
Vue cli3 ์ด์๋ถํฐ๋ ํ๋ก์ ํธ๋ฅผ ์์ฑํ ๋ scss ๊ด๋ จ ๊ธฐ๋ฅ์ ์ฝ๊ฒ ์ถ๊ฐํ ์ ์์ต๋๋ค. ํ์ง๋ง ํ๋ก์ ํธ ์งํ ์ค๊ฐ์ scss๋ฅผ ์ ์ฉํ ์ผ์ด ์๊ฒจ ํด๋น ๋ด์ฉ์ ์ ๋ฆฌํ์์ต๋๋ค ๐์ ์ผ ๋จผ์ ํด๋น package์ node-sass์ sass-loader๋ฅผ ์ค์นํด์ค๋
Vue ๊ณต์ ๋ฌธ์ ๊ธฐ๋ฐ์ผ๋ก ์์ฑํ ํ์ ์คํ์ผ ๊ฐ์ด๋์ ๋ํ ๋ด์ฉ ์ ๋ฆฌ์ ๋๋ค ๐์์ธํ ๋ด์ฉ์ ๊ณต์๋ฌธ์๋ฅผ ์ฐธ๊ณ ๋ถํ๋๋ฆฝ๋๋ค.Style Guide - Vue.js1\. ์ปดํฌ๋ํธ์ ์ด๋ฆ์ ํฉ์ฑ์ด๋ฅผ ์ฌ์ฉํ๋ค.html ํ๊ทธ์ ๊ฒฝ์ฐ ํ ๋จ์ด๋ก ํ๊ทธ๊ฐ ๊ตฌ์ฑ๋์ด ์๊ธฐ ๋๋ฌธ์ ์ถฉ๋
ie์์ document.querySelectorAll()์ ๋ด์ ๊ฐ์ฒด์ forEach ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ฉด ์๋ฌ๊ฐ ๋ ธ์ถ๋์ด ํด๊ฒฐ ๋ฐฉ๋ฒ์ ์ ๋ฆฌ ํ์์ต๋๋ค. ๊ธฐ์กด ForEach ์ฌ์ฉ๋ฒ์ Element ๊ฐ์ฒด์ ํ๋กํ ํ์ ๋ฉ์๋์ธ querySelectorAll์ด NodeList
jquery ui ์์ ฏ์ ์ฌ์ฉํด์ select box์ ๋ํ ์ปค์คํ ์ ์ฝ๊ฒ ์ ์ํ ์ ์์ต๋๋ค. ์ฌ์ง์ด aria์ ๊ด๋ จ๋ ์น ์ ๊ทผ์ฑ๋ ์๋์ผ๋ก ์ถ๊ฐ๋๊ณ ์ฌ์ฉ์์ ์ก์ ์ ๋ฐ๋ผ ํด๋น ๊ฐ์ด ์ํฉ์ ๋ง๊ฒ ๋ณ๊ฒฝ๋๊ธฐ ๋๋ฌธ์ ์ ๊ทผ์ฑ๊ณผ ๊ด๋ จํด์๋ ์ฌ์ฉํ๊ธฐ ์ข๋ค๊ณ ์๊ฐํ์ต๋๋ค.๋จ์ ์ด๋ผ
history API๋ ๋ธ๋ผ์ฐ์ ์ ์ธ์ ๊ธฐ๋ก์ ์กฐ์ํ ์ ์๋ ๋ฉ์๋๋ฅผ ๋ด๊ณ ์๋ ๊ฐ์ฒด์ ๋๋ค. ๊ธฐ๋ณธ์ ์ผ๋ก ๋ค๋ก๊ฐ๊ธฐ, ์์ผ๋ก ๊ฐ๊ธฐ, ํ์ด์ง ์ด๋ ๋ฑ์ ์กฐ์ํ ์ ์์ผ๋ฉฐ SPA์ ๊ด๋ จํ์ฌ html5์์ ์๋กญ๊ฒ ์ถ๊ฐ๋ ๋ฉ์๋๋ฅผ ์์๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.ํด๋น ๋ฉ์๋๋ ๋ธ๋ผ์ฐ์ ์
swiper๋ ์ฌ๋ผ์ด๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ก ๋ค์ํ ๋ฉ์๋์ ์ค์ ์ ์ง์ํด์ ์ฌ์ฉํ๊ธฐ ๋งค์ฐ ํธํ ์ ์ด ์์ต๋๋ค. ๋ฌด์๋ณด๋ค ํ์ ๋ธ๋ผ์ฐ์ (ie9)์์๋ ๋ฌธ์ ์์ด ์ฌ์ฉ ๊ฐ๋ฅํ๊ธฐ ๋๋ฌธ์ ํฌ๋ก์ค ๋ธ๋ผ์ฐ์ง ์ธก๋ฉด์์๋ ๋ฐ์ด๋ ๋ถ๋ถ์ด ์์ต๋๋ค.๋ํ ์ฌ์ฉ๋ฒ๋ ๋งค์ฐ ๊ฐ๋จํฉ๋๋ค. ์๋์ ๊ฐ์ด ํ
ํ์ ์ด ์ด๋ฆด ๋ ๋ธ๋ผ์ฐ์ ์ ์คํฌ๋กค์ ๋ฐฉ์งํ๊ธฐ ์ํด ํํ๊ฒ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ผ๋ก css๋ฅผ ํ์ฉํ์ฌ body์ overflow:hidden์ ์ ์ฉ ์ํต๋๋ค. ๋ฐฉ๋ฒ๋ ๊ฐํธํ๊ณ ์คํ์ผ๋ก ์ ์ดํ ์ ์๊ธฐ ๋๋ฌธ์ ๋ง์ด ์ฌ์ฉํ์ง๋ง ios safari์์ ๋์ํ์ง ์๋ ๋ฌธ์ ๊ฐ ์๊ธฐ ๋