diff --git a/_posts/2017-01-19-vuejs-nexttick-example.markdown b/_posts/2017-01-19-vuejs-nexttick-example.markdown new file mode 100644 index 0000000..68da37d --- /dev/null +++ b/_posts/2017-01-19-vuejs-nexttick-example.markdown @@ -0,0 +1,74 @@ +--- +layout: post +title: "Vue.js에서 nextTick 사용하기" +date: 2017-01-19 21:36:00 +0900 +categories: jekyll update +author: "developerjin" +excerpt: "Vue.js에서 데이터 갱신 후 UI조작시 생기는 문제와 해결방법을 알아봅시다." +--- + +### Vue.$nextTick + +`Vue.js`를 어느정도 사용하고 있다가 데이터와 UI를 건드리는 상황에서 간헐적으로 DOM을 못찾는 상황을 겪어보셨을지 모르겠습니다. 겪지 않으셨더라도 언제가는 겪게 될 일이죠. (저는 이미 이 일을 겪게 되었습니다.) + +네트워크 요청을 하던가, 어떤 데이터를 `vue._data`에 삽입하자마자 삽입 후에 갱신될 UI의 대해서 DOM을 탐색하여 처리할려고 하면 해당 DOM을 못찾아서 콘솔화면에 빨간색의 글자로 오류들을 내뿜게 됩니다. +이는 `vue._data`에 값들을 대입하게 되면 `Vue.js`에서 데이터갱신을 감지하고 UI를 갱신하게 되는데, 모든 데이터처리가 비동기로 처리되는 JavaScript의 특성때문에 UI가 갱신도 되기전에 DOM들을 탐색하는 상황이 나오게 됩니다. + + +```html + +