[Vuetify] 16. 코딩컨벤션 (coding convention)

18 Jun 2021

일일학습 Report 2020.07.15

JavaScript 언어의 코딩 컨벤션 중 하나로, 현재 나와있는 컨벤션 중 제일 유명하고 활용도가 높다
장점은 기본적인 컨벤션 외에 추가로 각 회사의 스타일에 맞게 설정이 가능하다
- airbnb의 eslint가 가장 유명한 듯하다
- airbnb javascript style guide - github

CLI (Command Line Interface, 명령줄 인터페이스)
Vue.js 개발을 위한 시스템으로 Vue.js에서 공식으로 제공하는 CLI
Vue 프로젝트를 빠르게 구성할 수 있는 스캐폴딩을 제공
- 스캐폴딩 : 학습자에게 적절한 인지적 도움과 안내를 제공하여 학습을 촉진시키는 전략
Vue와 관련된 오픈 소스들의 대부분이 CLI를 통해 구성이 가능하도록 구현되어 있음

url에 따라 컴퍼넌트를 연결하고 설정된 컴포넌트를 보여준다

const router = new VueRouter({
routes: [
  { 
    path: '/',
    component: Main
  },
  {
    path: '/login',
    component: Login
  }
]
})

<!-- 기본적으로 <router-link>는 <a> 태그로 렌더링 -->
<router-link to="/"> 메인페이지 </router-link>

<!-- 현재 라우트에 맞는 컴포넌트가 렌더링됨 -->
<router-view></router-view>

Vue.js가 효율적인 업데이트를 위해 세분화된 반응 시스템을 활용하도록 특별히 고안된 라이브러리
Vue.js 애플리케이션에 대한 상태관리패턴 + 라이브러리
애플리케이션 모든 컴포넌트들의 중앙 저장소 역할 (데이터 관리)
부모 자식 단계가 많이 복잡해진다면 데이터의 전달하는 부분이 매우 복잡해짐
애플리케이션이 여러 구성 요소로 구성되고 더 커지는 경우 데이터를 공유하는 문제가 발생 => vuex를 통해 어떤 상태를 관리하고 싶은지?
State
단일 상태 트리를 사용, 애플리케이션마다 하나의 저장소를 관리 (data)
Getters
Vue 인스턴스의 Computed 같은 역할, State를 기반으로 계산(computed)
Mutations
State의 상태를 변경하는 유일한 방법 (methods)
Actions
상태를 변이시키는 대신 액션으로 변이에 대한 커밋 처리 (비동기 methods)