개발자 꿈은 이루어진다.

(공부 책 : Vue.js Quick Start ) 1. el, data, computed 옵션 var vm = new Vue({ el: '#example', data: model, computed: { test : function() { ... } } }) el 옵션은 Vue 인스턴스에 연결할 HTML DOM 요소를 지정합니다. 주의할 점은 el옵션에 여러 개 요소를 지정할 수 없다는 점입니다. data 옵션에 주어진 모든 속성들은 Vue 인스턴스 내부에서 직접 이용되지 않고 Vue 인스턴스와 Data 옵션에 주어진 객체 사이에 프록시를 두어 처리합니다. computed 옵션에 지정한 값은 함수였지만 Vue 인스턴스는 프록시 처리하여 마치 속성처럼 취급합니다. test는 분명 함수입니다만 console..

(공부 책 : Vue.js Quick Start ) 1. v-pre 디렉티브 v-pre 디렉티브는 HTML 요소에 대한 컴파일을 수행하지 않습니다. {{message}} v-pre를 사용하지 않았다면 message 속성의 값이 바인딩되어 나타나겠지만 v-pre 디렉티브로 인해 Vue 객체는 컴파일하지 않고 html 문자열 그대로 출력합니다. 2. v-once v-once 디렉티브는 HTML 요소를 단 한번 랜덩링합니다. 위 예제에서 v-pre를 v-once로 변경하여 브라우저를 실행해봅니다. Vue 인스턴스 데이터를 변경하더라도 다시 랜더링을 수행하지 않는걸 확인할 수 있습니다. 3. 계산형 속성 앞서 v-bind 디렉티브를 통해 데이터 바인딩 방법에 대한 예제를 살펴보았습니다. 하지만 연산 로직이 필요..

(공부 책 : Vue.js Quick Start ) 반복적인 데이터를 렌더링하는 방법으로 v-for 디렉티브를 많이 사용합니다. 기존 다른 언어의 for문과 역할은 비슷합니다. 번호 이름 전화번호 주소 {{index+1}} {{contact.name}} {{contact.tel}} {{contact.address}} 위 예시 코드는 model 객체 내부에 contacts 배열을 html 내 v-for을 이용해서 배열의 개수만큼 반복되어 나타냅니다. 원본 데이터가 객체일 경우 조금 달라지는데 key를 이용해 값에 접근하는 HashMap 구조이기 때문에 key, value값을 얻을 수 있는 구조를 사용합니다. 지역을 선택하세요 {{ index+1 }} : {{val}} v-for 디렉티브와 v-if 디렉티브..

(공부 책 : Vue.js Quick Start ) 1. ex01-01.html 분석 {{message}} 코드 내 var model = { message: 'Hello World!' }; 부분은 Model을 담당하고 있습니다. 데이터를 가지고 있지요. var ex01_01 = new Vue({ el: '#ex01_01', data: model }) ex01_01 객체는 ViewModel로 Vue 객체의 el 속성은 HTML 요소를 data 속성은 모델 객체를 참조합니다. 즉, ex01_01 객체가 HTML 요소와 데이터를 참조하고 있기에 데이터가 변경되면 HTML 요소에 반영시킵니다. 간단한 코드만 보아도 모든 작업은 반응형으로 이루어 진다는걸 알 수 있습니다. 2. v-text, v-html 디렉티브..

React와 Vue중 무엇을 공부할지 고민하다 상대적으로 배우기 더 쉽다 생각한 Vue를 선택하게 되어 공부한 기록을 남기고자 합니다. (공부 책 : Vue.js Quick Start ) 1. MVVM 패턴 Vue.js는 MVVM(Model - View - ViewModel) 패턴을 따르고 있습니다. MVVM패턴은 애플리케이션 로직과 UI 분리를 위해 설계된 패턴으로 View는 HTML, CSS로 작성하고 ViewModel은 View의 실제 논리 및 데이터 흐름을 담당합니다. View는 비즈니스 로직에서 ViewModel의 상태 데이터를 변경하면 View에 즉시 반영되어 ViewModel 외 다른 요소는 신경쓸 필요 없습니다. 2. 개발환경 Node.js: 서버 측 자바스크립트 언어 ( nodejs.or..