Vue๋
ํ๋ก ํธ์๋ ๊ฐ๋ฐ๋๊ตฌ ์ค ํ๋
- ๊ฐ๋ฒผ์ด ํฌ๊ธฐ์ ์ง๊ด์ ์ธ ๋ฌธ๋ฒ
- ๐ Virtual DOM์ ์ฌ์ฉํ์ฌ ๋ณ๊ฒฝ๋ ๋ถ๋ถ๋ง ์ ๋ฐ์ดํธํ๊ณ ํ์ํ ์ต์ํ์ DOM ์กฐ์์ ์ํํ์ฌ ๋น ๋ฅธ ๋ ๋๋ง ์๋์ ํจ์จ์ ์ธ ์ ๋ฐ์ดํธ ๊ด๋ฆฌ ์ ๊ณต
- ์์ฒด์ ์ผ๋ก ์ํ ๊ด๋ฆฌ ๋๊ตฌ์ธ Vue jsx ๋ด์ฅ
- ๐ ์ ํ๋ฆฌ์ผ์ด์ ์ ์ํ ๊ด๋ฆฌ๋ฅผ ์ํ ๊ณต์ ์ํ ๊ด๋ฆฌ ๋ผ์ด๋ธ๋ฌ๋ฆฌ
- ํ์ด์ง ์ ํ์ ์ํ ๊ธฐ๋ฅ์ธ Vue js Router ์ ๊ณต
- ๐ ํ์ด์ง ๊ฐ์ ์ ํ๊ณผ URL ๊ธฐ๋ฐ์ผ๋ก ๋ทฐ๋ฅผ ๋์ ์ผ๋ก ๋ก๋ฉํ๊ณ ๊ด๋ฆฌ
- ๊ธฐ์กด html๊ณผ ์ ์ฌํ Template ํ์ ์ ๊ณต
- ๊ฐ๋ฐ ๋ฐฉ์์ ๋จ์ํจ
- ๐ ๋์ ์ธ ํ์ ์ํด v-if ๋ฌธ๋ฒ๋ง ์ ๊ณต
- ๋ฐ์์ฑ (Reactivity)
- ๋ฐ์ดํฐ ๊ฐฑ์ ํ๋ฉด ํ๋ฉด๋ ๋ฐ๋
๐ ๏ธ Vue ๋๊ตฌ
- ํจํค์ง ๊ด๋ฆฌ์ : npm, yarn
- Vue CLI : ์ ์ํ Vue.js ๊ฐ๋ฐ์ ์ํ ํ์ค ๋๊ตฌ ํคํธ๋ก Babel, PostCSS, TypeScript, ESLint ๋ฑ ๋ฐ๋ก ์ง์
- Nuxt.js : ์๋ฒ ์ธก ๋ ๋๋ง๋ Vue.js ์ฑ์ ๋ง๋ค ์ ์๋ ํ๋ ์์ํฌ ๐ SSR์ ์ง์ํ์ฌ SEO์ ์ฌ์ฉ์ ์ธํฐํ์ด์ค ์๋ต์ฑ ํฅ์
- Vuetify : ๋จธํฐ๋ฆฌ์ผ ๋์์ธ ํ๋ ์์ํฌ ๊ตฌ์ฑ ์์ ์ ๊ณตํ๋ Vue UI ๋ผ์ด๋ธ๋ฌ๋ฆฌ
๐ฉ๐งVue2 ์ค์น
> npm install -g @vue/cli
> vue create ํ๋ก์ ํธ๋ช
๐ vue create ์ ์๋ฌ ๋ฐ์ (Error : command failed : yarn)
ํ๋ก์ ํธ ์์ฑ์ npm์ ์ฌ์ฉํ๊ฒ ๋ค๊ณ ์ง์
๐vue create ํ๋ก์ ํธ๋ช --packageManager npm
ESLint
js ์ฝ๋์์ ๋ฌธ๋ฒ์ ์ค๋ฅ๋ฅผ ์ฐพ๊ณ ์ผ๊ด๋ ์ฝ๋ ์คํ์ผ์ ์ ์งํ๋๋ก ๋์์ฃผ๋ ์ ์ ์ฝ๋ ๋ถ์ ๋๊ตฌ๋ก,
๊ฐ๋ฐ์๊ฐ ์์ฑํ ์ฝ๋๊ฐ ์ ํด์ง ๊ท์น์ ๋ฐ๋ผ ์ผ๊ด๋๊ฒ ์์ฑ๋๋๋กํ์ฌ ์ฝ๋์ ํ์ง ํฅ์
๐ ํ๋ก์ ํธ์ ์ค์ ํ์ผ (.eslintrc ๋ฑ)์ ํตํด ๊ตฌ์ฑ๋จ
npm i -D eslint eslint-plugin-vue babel-eslint
โด๏ธ .eslintrc.js ํ์ผ
// .eslintrc.js
module.exports={
env:{
browser: true,
node: true
},
extends: [
// vue
'plugin:vue/essential', // Lv1
//'plugin:vue/vue2-strongly-recommended', // Lv2
//'plugin:vue/vue2-recommended', // Lv3
// js
'eslint:recommended'
],
parserOptions: {
parser: 'babel-eslint',
},
rules: {
}
}
โณ๏ธ env
env:{ browser: true, node: true }
๋ธ๋ผ์ฐ์ ํ๊ฒฝ, Node.js ํ๊ฒฝ์์ ๋์ํ๋ ์ฌ๋ฌ๊ฐ์ง ์ ์ญ ๊ฐ๋ ๋ค์ ๋ชจ๋ ์ฝ๋ ๊ฒ์ฌํ ๊ฒ์ธ์ง ์ค์
โณ๏ธ extends
extends: [ // vue 'plugin:vue/essential', // Lv1 //'plugin:vue/vue2-strongly-recommended', // Lv2 //'plugin:vue/vue2-recommended', // Lv3 // js 'eslint:recommended' ]
ESLint๋ฅผ ํตํด์ ์ฝ๋ ๊ฒ์ฌํ ๊ธฐ๋ณธ์ ์ธ ๊ท์น ๋ช ์
โณ๏ธ parseOptions
parserOptions: { parser: 'babel-eslint', }
๊ธฐ๋ณธ์ ์ธ ์ฝ๋๋ฅผ ๋ถ์ํ ์ ์๋ ๋ถ์๊ธฐ ์ง์
๐ฅ babel : ์ต์ js ๋ฌธ๋ฒ๊ณผ ์คํ์ ์ธ ๋ฌธ๋ฒ์ ๊ตฌ๋ฒ์ ์ js๋ก ๋ณํํด์ฃผ๋ ๋๊ตฌ
โณ๏ธ rules
์ฌ์ฉ์ ๊ท์น ๋ช ์
์ฐธ๊ณ ์๋ฃ
https://v2.ko.vuejs.org/v2/guide/installation.html
https://tech.kakao.com/posts/375
https://www.elancer.co.kr/blog/view?seq=171
https://learn.microsoft.com/ko-kr/windows/dev-environment/javascript/vue-overview
'FE' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[Vue] devServer ๊ตฌ์ฑํ๊ณ proxy ์ค์ ํ๊ธฐ (0) | 2024.09.06 |
---|---|
[FE] ๋น๋๊ธฐ (0) | 2024.06.17 |
[FE] Vuex (0) | 2024.06.17 |
[FE] Vue2 ๋ฌธ๋ฒ ์ ๋ฆฌ 1 (0) | 2024.06.11 |