Vue에서 v-for를 사용할 때는 key 속성을 바인딩하도록 가이드 한다. 이번 포스트에서는 그 이유에 대해서 살펴보자. https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key List Rendering | Vue.js vuejs.org v-for 사용 시 key를 바인딩하는 이유 in place patch 전략 Vue는 메모리를 아끼기 위해서 DOM 최적화를 통해 DOM을 재사용 한다. 이 과정에서 in-place patch 전략이라는 것을 사용한다. patch는 일종의 "땜빵" 을 의미하고 in-place는 현재 지점에서를 의미하니까 in-place patch 전략이란 현재 DOM에서 바뀌어야할 부분만 땜빵해서 처리하고 DOM..

이제까지 배운 내용을 바탕으로 아래 요구사항을 만족시키는 앱을 구성해보자. Todo App 요구사항

이번 포스트에서는 주로 Vue application의 전역 설정과 관련된 config 객체에 대해서 살펴보자. app.config Vue의 createApp() 함수의 결과물인 app은 여러가지 속성들이 있는데 그 중 config 라는 속성에 대해 살펴보자. const app = createApp(. . .); console.log(app.config); 이 객체는 당연히 Vue application의 속성들을 관리하는 객체인데 속성의 이름만 봐도 유용할 것 같은 녀석이 몇 가지 존재한다. 여기서는 globalProperties와 errorHandler, warnHandler에 대해서 살펴보자. 현재는 비어있는 객체이거나 undefined 상태이다. 참고로 이 값들을 설정할 때에는 반드시 mount()를..

이번 포스트에서는 상당히 길고 복합한 Vue 객체의 라이프 사이클에 대해서 살펴보자. Vue 객체의 라이프 사이클 Vue 객체는 beforeCreate에서 부터 unmounted까지 여러 단계를 거쳐 사용되는데 각 단계별로 hook을 이용해서 부가적으로 처리할 일들을 작성할 수 있다. composition api를 사용하는 경우에는 setup hook에서 beforeCreate, created에 해당하는 과정이 한꺼번에 처리된다. 이제까지 코드를 작성하면서 써온 setup() 메서드가 바로 setup hook 이다. life cycle hook composition api를 사용할 경우 각각의 hook은 setup() 내부에서 onXX의 형태로 접근할 수 있다. 라이프 사이클 훅 (Options API)..

이번 포스트에서는 "지켜보는 녀석" watch에 대해서 살펴보자!watch watch?watch는 computed와 유사하게 data 변경 시 동작하는 속성인데 값을 사용할 수도 있지만 부가적인 동작(side effect) 처리에 더 많이 사용되는 속성이다. computed는 data 처럼 template에서 사용되어야 동작하지만 watch는 template에서는 사용되지 않는다. 그저 지켜보다가 값이 변경되면 어떤 일을 처리한다. 또한 computed가 주로 동기로 값을 리턴하는 반면 watch는 비동기로 처리되며 값을 리턴하지 않는다.사용법// 하나의 소스 감시function watch( source: WatchSource, callback: WatchCallback, options?: Watc..

이번 포스트에서는 Vue의 computed 속성에 대해서 살펴보자.  computed computed?computed란 "계산된"이라는 뜻이다.(너무 뻔한..)model의 데이터를 template에서 사용하는 과정에 가끔 상황에 따라 다르게 처리해야하는 경우가 발생한다. 이런 상황은 이전에 template에서 간단한 javascript를 통해서 해결할 수 있었다. 예를 들어 age가 18세 이상부터 투표가 가능하다고 했을 때 아래와 같이 작성할 수 있다.can vote? {{age >= 18?"yes":"no"}}하지만 좀 더 복잡한 표현에는 한계가 있기 때문에 computed를 사용한다. computed의 활용computed는 Vue가 가지는 함수형 속성이다. computed의 파라미터는 로직을 가지..

이번 포스트에서는 vue에서 DOM 요소에 직접 접근하기 위한 방법에 대해 살펴보자.  DOM 요소에 직접 접근 ref한때 javascript 라이브러리의 대명사였던 jquery의 가장 큰 장점 중 하나는 편리하게 DOM 요소를 관리한다는 점이었다. vue에서는 직접적으로 DOM 요소에 접근에서 사용하는 것을 지양한다.  model과 view가 viewmodel을 통해서 연결되기 때문에 사실 거의 필요가 없다.하지만 아주 가끔 DOM 요소를 지정해서 동작해야할 필요가 있는데 이를 위해서 template 영역에서 ref 속성을 이용해서 요소에 표시해준다. login 위 코드는 user.id와 연결된 첫 번째 에서 enter 키가 눌렸을 때 pass로 지정된 DOM 요소에 포커스를 주는 코드이다. ..

이번 포스트에서는 Vue에서 이벤트 처리에 사용되는 v-on 디렉티브에 대해 살펴보자.  Vue의 이벤트 처리 방식 v-onVue에서 이벤트를 처리하기 위해서는 v-on directive를 사용한는데 통상 v-on을 @로 대체해서 축약형으로 사용한다.v-on:이벤트명=”handler"@이벤트명="handler"즉 click이벤트를 처리하기 위해서는 v-on:click="handler" 또는 @click="handler"형태로 사용한다. handler 등록 방식이벤트 발생 시 동작할 handler를 등록하는 방식으로는 inline handler 방식과 method handler 방식 2가지가 제공된다.inline handler 방식은 한 줄의 간단한 실행문을 처리하거나 미리 작성된 함수를 직접 실행하는 ..