beomy

이번 포스트에서는 폼 엘리먼트(input, textarea, select 엘리먼트)에 양방향 데이터 바인딩을 하는 방법을 이야기 할 것입니다. 1. v-model 사용법 v-model 디렉티브를 사용하여 폼 엘리먼트(input, textarea, select 엘리먼트)에 양방향 데이터 바인딩을 할 수 있습니다. v-model은 모든 폼 엘리먼트의 초기 value와 checked, selected 속성을 무시합니다. Vue 인스턴스의 데이터에 의해서만 동작합니다. 참고 - IME 사용시 유의사항 IME (중국어, 일본어, 한국어 등..)가 필요한 언어의 경우 IME 중 v-model이 업데이트 되지 않습니다. IME 중 업데이트 처리를 하기 위해서는 input 이벤트를 사용해야 합니다. 문자열 메시지: {..

1. 이벤트 리스너 v-on 디렉티브는 이벤트 리스너입니다. v-on 디렉티브는 DOM 이벤트가 발행하는지 듣고 있다가 이벤트가 발생 했을 때 JavaScript를 실행합니다. Add 1 위 버튼을 클릭한 횟수는 {{ counter }} 번 입니다. new Vue({ el: '#app', data: { counter: 0 } });위의 예제는 v-on이라는 이벤트 리스너가 click 이벤트가 발행하는지 듣고 있다가 이벤트가 발생 되었을 때 간단한 JavaScript를 실행하는 예제입니다. CodePen에서 결과를 확인 할 수 있습니다. 2. 메소드 이벤트 핸들러 대부분의 이벤트 핸들러의 로직은 복잡하기 때문에 v-on에 JavaScript로 넘겨주기 어렵습니다. 그렇기 때문에 v-on에 m..

이번 포스트에서는 v-for을 사용하여 리스트 렌더링 하는 방법에 대해 이야기 할 것입니다. 1. v-for와 배열 v-for 디렉티브를 사용하여 배열을 리스트 렌더링 할 수 있습니다. v-for 디렉티브에 item in items 형태의 문법을 넘겨줘야 합니다. items는 원본 데이터 배열이고 item은 반복되는 배열의 요소입니다. 기본 사용방법 {{ item.message }} new Vue({ el: '#app', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } });위의 예제는 배열을 사용한 기본적인 리스트 렌더링 예제입니다. 또한 배열의 몇번째 인덱스인지 알 수 있는 인덱스 정보도 제공합니다...

이번 포스트는 v-if와 v-show를 이용하여 조건부 렌더링을 이야기 합니다. 1. v-if v-if 디렉티브를 사용하여 조건부 렌더링을 사용할 수 있습니다. Yes new Vue({ el: '#app', data: { ok: true, }, });v-else v-if 디렉티브는 v-else 디렉티브와 함께 사용 할 수 있습니다. Yes No new Vue({ el: '#app', data: { ok: true, }, });위의 예제는 CodePen에서 결과를 확인 할 수 있습니다. v-else-if v-else-if 디렉티브는 2.1.0에 추가되었습니다. 이름에서 알 수 있듯이 else if 블록 역할을 합니다. A B C Not A/B/C new Vue({ el: &#3..

이번 포스트에서는 컴포넌트에 클래스를 바인딩하는 방법과 인라인 스타일을 사용하는 방법을 이야기 하려고 합니다. 스타일을 적용할 때 클래스와 인라인 스타일이 많이 사용되기 때문에, 이번 포스트는 컴포넌트에 스타일을 적용하는 방법을 이야기 한다고 보셔도 될 것 같습니다. 1. HTML 클래스 바인딩 객체로 클래스를 바인딩 하는 방법, 배열로 클래스를 사용하는 방법, 컴포넌트와 함께 사용하는 방법 3가지를 이야기 하도록 하겠습니다. 객체 구문 클래스를 동적으로 바인딩하기 위해서는 v-bind:class(약어 :class)를 사용하면 됩니다. :class에 객체를 전달해서 클래스를 바인딩 할 수 있습니다. 위 예제에서 isActive가 true일 경우 active 클래스가 바인딩 됩니다. 객체를 이용하여 여러 ..

이번 포스트에서는 Vue.JS에서 비슷한 특징을 가진 computed 속성과 watch 속성의 특징을 이야기 하려고 합니다. 1. computed 속성 템플릿 문법([Vue.JS] 템플릿 문법 참고)에서 JavaScript 표현식을 사용하면, 쉽게 원하는 데이터를 DOM에 그릴 수 있습니다. 하지만 복잡한 연산을 템플릿 안에서 하게 되면, 코드를 이해하고, 유지보수하기 어려워집니다. {{ message.split('').reverse().join('') }} 위의 예제는 템플릿 문법 안에서 JavaScript를 사용하여 message를 역순으로 출력한 예제입니다. 지금은 단순해 보일 수도 있지만 좀 더 복잡한 로직을 사용한다면 computed 속성을 사용하는 것이 좋습니다. ..

Vue.JS는 렌더링 된 DOM과 Vue 인스턴스의 데이터에 바인딩 할 수 있는 HTML 기반의 문법을 제공합니다. 이 문법을 템플릿 문법이라고 하겠습니다. Vue.JS는 내부적으로 템플릿 문법을 가상 DOM을 리턴하는 render 함수로 컴파일 합니다. Vue.JS는 가상 DOM을 사용하여 DOM을 변경할 때 최소한의 DOM을 조작하고 적용이 가능하도록 하였습니다. 템플릿 문법을 사용하지는 대신 render 함수(JSX도 지원합니다.)를 사용할 수도 있습니다. (render 함수의 사용법은 다음에 설명하도록 하겠습니다...) Vue.JS의 템플릿 문법에 대해 알아 보도록 하겠습니다. 1. 보간법 (Interpolation) DOM에 데이터를 바인딩 하는 방법 중에 보간법, DOM에 데이터를 나타내는 방..

Vue.JS의 라이프 사이클은 Vue.JS 어플리케이션을 구현할 때 빼 놓을 수 없는, 빼 놓고는 Vue.JS 어플리케이션을 개발하기 힘든, 매우 중요한 개념입니다. Vue.JS의 라이프 사이클은 크게 Create, Mount, Update, Destory로 나눌 수 있습니다. 1. Create Vue.JS의 라이프 사이클들 중에 가장 먼저 실행됩니다. create 단계에서 실행되는 라이프 사이클 훅(hook)들은 컴포넌트가 DOM에 추가 되기 전이기 때문에, DOM에 접근하거나 this.$el을 사용할 수 없습니다. 컴포넌트가 DOM에 추가 되기 전에 호출 되기 때문에 서버 사이드 렌더링에서도 지원되는 훅입니다. Create 단계에서 호출되는 라이프 사이클 훅들은 beforeCreate와 created..

Vue.JS 공식 문서를 따르면, Vue는 엄격하게 MVVM 패턴과 관계되어 있지 않지만, MVVM 패턴에 영감을 받았다고 합니다.([디자인패턴] MVC, MVP, MVVM 비교 참고) MVVM 패턴의 특징 중 하나가 데이터 바인딩입니다. Model이 업데이트 되면, 데이터 바인딩으로 인해 View가 업데이트 됩니다. Vue 인스턴스 만들기 Vue 어플리케이션을 만드는 것은 Vue 인스턴스를 만드는 것에서 시작됩니다. Vue 어플리케이션의 구조는 루트 Vue 인스턴트 밑에 하위 컴포넌트가 붙는 컴포넌트 트리 구조입니다. Root Instance └─ TodoList ├─ TodoItem │ ├─ DeleteTodoButton │ └─ EditTodoButton └─ TodoListFooter ├─ Cle..

비동기 프로그래밍으로 발생하는 콜백지옥을 해결하는 방법으로 ES6에서 추가된 Promise를 사용하는 방법이 있습니다. ([자바스크립트] 비동기프로그래밍 - 콜백함수(Callback function) 참고) 이번 포스트에서는 비동기 프로그래밍을 처리할 수 있는 방법으로 async와 await에 대해 이야기 하려 합니다. 1. 문법 async function name([param[, param[, ... param]]]) { statements } name: 함수 이름 param: 함수에 전달되는 인자들의 이름 statements: 함수 본문 리턴 값: async 함수의 return 값으로 resolve 된 Promise 객체 혹은 async 함수에서 예외가 발생하였다면 발생 된 예외로 reject 된 P..