[FE] Vue 개념 및 설치

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://eslint.vuejs.org/

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