디렉티브라 함은 v-시작하는 대표적으로 v-model, v-show 말합니다. 이 편리한 기능을 커스텀으로 만들어서 사용할 수 있습니다. 특정 기능을 directive로 구현할 수도 있고 component로도 구현할 수 있습니다. 2가지 옵션 중에 어떤 것을 선택해야 할지 의문이 들었는데 Vue.js 공식 사이트에서 그 차이점을 알 수 있었습니다. Directives vs Components Vue has a clearer separation between directives and components. Directives are meant to encapsulate DOM manipulations only, while components are self-contained units that have t..
상황에 따라 사용될 컴포넌트가 동적으로 변경되어야 할 때가 있다. 그럴 때 아래와 같은 방법을 사용한다. var vm = new Vue({ el: '#example', data: { currentView: 'home' }, components: { home: { /* ... */ }, posts: { /* ... */ }, archive: { /* ... */ } } }) components에 사용할 컴포넌트 목록을 추가한다. 아래처럼 is prop에 변경할 컴포넌트명을 가지고 있는 data를 바인딩한다. 초기 값이 home으로 되어 있기 때문에 home 컴포넌트가 노출된다. 조건에 따라 currentView 값을 바꾸면 그에 맞는 컴포넌트가 노출된다. 참고 https://kr.vuejs.org/v2/g..
첫 번째 Todo App을 완성하는데 약 1시간이 걸렸고 vuex를 적용하는 데는 2시간가량이 걸렸다. 주말에 Vue Mastery 사이트에서 전 강좌를 무료로 풀었는데 vuex 강좌를 쭉 들으면서 사용 방법을 익혔다. 시작하기 전에 불필요한 Home 관련 코드를 삭제해서 정리한 후 오늘 vuex로 상태를 관리하도록 변경, 컴포넌트를 3개로 나누는 작업을 진행했다. React.js를 사용할때는 Redux.js를 사용했는데 Vuex.js 사용해 보니 동작 방식은 유사했지만 getters는 차이가 있었다. Redux의 reducer가 vuex에서는 mutations와 같은 역할로 보였다. 그리고 컴포넌트에서 사용했던 각각의 옵션과 유사한 기능을 하는 옵션이 store 존재한다. 아래 표는 각 기능을 매핑해 ..
Vue Mastery에 Intro 학습하고 나서 Todo App을 구현해 봤다. 프로젝트는 Vue CLI로 손쉽게 구성할 수 있었다. Vue CLI 설치한 후 vue ui 명령을 수행하면 프로젝트를 웹페이지에서 쉽게 설정할 수 있다. 👍 .prettierrc.js 파일을 설정하여 몇 가지 규칙을 추가했다. module.exports = { singleQuote: true, semi: false, } 프로젝트를 생성하면 기본적으로 만들어 주는 페이지 중에 Home은 그대로 두고 About 페이지를 Todo로 변경해서 진행했다. 구현한 기능은 다음과 같다. - 할일 추가, 삭제, 수정 - 완료된 할 일 목록, 남은 할 일 목록, 전체 할 일 목록 보여주기 - 완료한 할일 모두 삭제 Todo App {{ ed..
리뷰 입력과 리뷰 목록을 탭 메뉴로 분리하는 작업을 진행한다. Vue 인스턴스를 생성하여 전역 이벤트 객체를 만들고 서로 연동하는 방식이 흥미롭다. 하지만 프로그램이 규모가 커진다면 디버깅하기 무척 어려울 것으로 추정된다. 우선 따라 해 보기로 했다. Tabs - Intro to Vue.js | Vue Mastery In this lesson, we’ll learn how to add tabs to our application and implement a simple solution for global event communication. www.vuemastery.com reviews 데이터를 product-tabs 컴포넌트에 props로 전달한다. Cart({{ cart.length }}) const..
이번에는 v-model 키워드를 활용해서 form 요소에 양방향 바인딩(2 way binding)하는 방법을 배워 봅니다. 또한 사용자 입력값을 유효성 체크하는 로직도 추가합니다. Cart({{ cart.length }}) Reviews There are no reviews yet. {{ review.name }} Rating: {{ review.rating }} {{ review.review }} input, textarea, select, submit 요소를 가진 리뷰(product-review) 컴포넌트를 추가하고 v-model로 각 값을 바인딩시킵니다. 리액트의 경우 state를 컴포넌트 내부에 선언하고 setState 함수로 업데이트하는 방식인데 vue 경우 v-model로 연동하면 자동으로 바..
cart html를 상위 컴포넌트로 이동시킨 후 하위 컴포넌트(product)에서 add to cart 버튼이 클릭됐을 때 장바구니 상태를 업데이트하도록 변경한다. Cart({{ cart.length }}) emit를 사용하면 광범위하게 이벤트가 전파 되기때문에 선호하지 않는 방법을 사용하고 있다. 🤔 Vue.component("product", { props: { premium: { type: Boolean, required: true } }, template: ` {{ title }}On Sale! In Stock Out of Stock Shipping: {{ shipping }} {{ detail }} Add to cart `, data(){ return { brand: 'Vue Mastery', ..