Vue에 대한 소개 및 사용하는데 필요한 정보들을 정리합니다.
프로젝트에 Vue를 도입한 결정적인 이유
Vue.js에 대한 간략한 기본 개념 소개
Vue 및 Vuetify와 관련된 프로젝트를 v2.x 버전으로 업그레이드해서 작업할 때 발생하는 문제점들을 정리한다.
Vue 개발에서 상태를 관리해 주는 기능을 제공해 주는 것이 Vuex이고 어플리케이션의 모든 컴포넌트들에 대한 중앙 집중식 저장소의 역할 및 관리 를 담당한다. Vuex는 상태관리 패턴 + 라이브러리이며, Vue의 공식 툴이며 ES2015 문법을 기준으로 한다. Promise를 지원하지만, 혹시 지원하지 못하는 브라우저를 생각해야 한다면 es6-promise도 설치해 줘야 한다. Vuex가 없다면 컴포넌트간의 데이터(상태)를 주고 받기 위해서 부모는 자식에서 props를 통해서 전달하고, 자식은 부모에게 Emit event 방식을 사용해서 처리해야 한다.
현재 진행 중인 Vue.js + Typescript 기반의 프로젝트에서 컴포넌트 구성에 필요한 부분을 정리한 것으로 Typescript로 구성하면 자바스크립트로 어떻게 구성되는지를 비교하면서 진행하도록 한다. 특이한 코드 설정 (readonly, !) Typescript를 사용하면서 ‘?’ 는 생략 가능 또는 null / undefined도 가능하다라는 코드는 많이 봤을테지만 vue-property-decorator 샘플들을 보면 ‘readonly, !:’ 와 같은 생소한 코드를 보게 된다. readonly 대상 멤버를 읽기 전용으로 한정하겠다는 한정자 (OOP 언어에서는 많이 사용)로 Vue에서 Prop이나 Model 등에 readonly를 한정했을 떄 할당을 하면 오류가 발생하게 된다.