Vuex Helper Vuex의 각 속성들을 더 쉽게 사용하는 방법 - Helper Store에 있는 아래 4가지 속성들을 간편하게 코딩하는 방법 state -> mapState getters -> mapGetters mutations -> mapMutations actions -> mapActions Helper의 사용법 helper를 사용하고자 하는 vue 파일에서 아래와 같이 해당 helper를 로딩 만약 헬퍼를 사용하지 않았다면, State에 정의 된 num에 접근하려면 this.$store.state.num 와 같이 접근해야 한다. 생소하게 보이는 mapState앞에 있는 ...은 ES6의 Object Spread Operator이다. //App.vue import { mapState } fro..

개요 ECMAScript 2015 Vue.js 코딩을 간편하게 해주는 문법 학습 const & let Arrow Function Enhanced Object Literals modules Spread Operator Babel, Can I use const & let ES6에서 사용하는 변수 선언 방식 let 한번 선언하면 다시 선언할 수 없다. // 똑같은 변수를 재선언할 때 오류 let a = 10; let a = 20; // Uncaught SyntaxError: Identifier 'a' has already been declared const 한번 할당한 값을 변경할 수 없다. // 값을 다시 할당했을 때 오류 const a = 10; a = 20; // Uncaught TypeError: As..

Single File Component 화면의 특정 영역에 대한 HTML, CSS, JS 코드를 한 파일에서 관리하는 방법 전역 컴포넌트는 Vue.component를 사용해 정의되고, container 엘리먼트를 대상으로 하는 new Vue({el: '#container'})가 정의됐었다. vue 확장자를 가진 파일을 모두 싱글 파일 컴포넌트라고 한다. 뷰 로더에 의해 HTML, CSS, JS와 같은 웹 자원으로 분리되어 실행 프론트엔드가 Javascript 기반인 경우 단점 전역 정의 모든 구성 요소에 대해 고유한 이름을 지정하도록 강요. 구문 강조가 약해 여러 줄로 된 HTML에 보기 안좋은 슬래시가 많이 필요 .Vue 확장자 완전한 구문 강조 CommonJS 모듈 컴포넌트에만 제한된 CSS 각 *...

템플릿 문법 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수있는 HTML 기반 템플릿 구문을 사용한다. 모든 Vue.js 템플릿은 스펙을 호환하는 브라우저 및 HTML 파서로 구문 분석 할 수있는 유효한 HTML이다. 반응형 시스템과 결합된 Vue는 앱 상태가 변경 될 때 최소한으로 DOM을 조작하고 다시 적용할 수 있는 최소한의 컴포넌트를 지능적으로 파악할 수 있다. 데이터 바인딩 뷰 인스턴스에서 정의한 속성들을 화면에 표시하는 방법 문자열 가장 기본적인 데이터 바인딩 방식은 콧수염 괄호(Mustache Tag) 속성이 변경될 때 마다 갱신된다. v-once를 사용하여 데이터 변경 시 업데이트를 방지 할 수지만, 같은 노드의 바인딩에도 영향을 미친다는 점을 유의해야 합니다...

Vue Router 웹페이지 간의 이동 방법 최신 웹 앱 형태 중 하나인 SPA(Single Page Application)에서 주로 사용 화면 간의 전환이 매끄러울 뿐만 아니라 애플리케이션의 UX를 향상시킬 수 있다. 일반적으로 브라우저에서 웹 페이지를 요청하면 서버에서 응답을 받아 웹 페이지를 다시 사용자에게 돌려주는 시간 동안 화면 상에 깜빡거림 현상이 나타난다. 라우팅으로 처리하면 깜빡거림 없이 화면을 매끄럽게 전환할 수 있을 뿐만 아니라 더 빠르게 화면을 조작할 수 있어 사용자 경험이 향상된다. 설치 CDN 방식 NPM 방식 npm install vue-router 뷰 라우터 등록 뷰 라우터를 설치하고 나면 아래 코드와 같이 라우터 인스턴스를 하나 생성하고 뷰 인스턴스에 등록한다. // 라우터 ..

컴포넌트 Vue.js가 제공하는 가장 강력한 기능 중 하나 컴포넌트는 HTML 마크업, 자바스크립트 로직을 포함한 하나의 덩어리 캡슐화가 자연스럽게 가능해지고 따라서 재사용이 가능해짐 전역 컴포넌트 선언 Vue.component는 컴포넌트를 글로벌하게 등록하는 메서드 주의 : 확장된 Vue인스턴스, 즉 컴포넌트에서 data를 정의할때 반드시 함수로 정의해야함 Tip: 컴포넌트 이름을 하이픈을 포함한 소문자여야 함 Vue.component('컴포넌트 이름', 컴포넌트 내용); Vue.component('app-header', { template: 'Header' }); Vue.component('app-content', { template: 'content' }); 지역 컴포넌트 선언 컴포넌트를 Vue인스..