Vue.js
-
Vue.js와 jQuery 공존하기 :: 마이구미Vue.js 2017. 8. 4. 20:22
이번 글은 Vue.js와 jQuery를 같이 사용할 때 숙지해야할 것들을 다뤄본다.Vue.js를 쓰기 전에 Virtual DOM은 반드시 숙지해야한다. (Virtual DOM 관련 글)글을 이해하기 위해서도 필요하다. jQuery는 DOM 조작에 있어서, 정말 편리하고 이용해왔고, 계속해서 쓰고 있다.그렇기에 Vue를 쓰면서 jQuery를 통해 DOM 조작을 할 수도 있다.이러한 경우, 단순히 Vue와 jQuery를 같이 사용하면 안된다.고려해야할 것들이 존재한다. 이유는 Virtual DOM이다.Vue는 Virtual DOM에 접근하고, jQuery는 실제 DOM에 접근한다.이것이 뜻하는 의미는 아래와 같다. 만약 jQuery를 통해 DOM을 추가할 때, Vue는 실제로 추가되는 DOM을 무시한다.=>..
-
Virtual DOM이란 무엇인가? :: 마이구미Vue.js 2017. 7. 29. 14:02
이번 글은 Virtual DOM에 대해 다뤄본다.Virtual DOM은 React를 통해 이미 많이 알려져있다.최근 핫한 Vue.js 2.0에서부터도 사용되고 있다.Virtual DOM 무엇인지? 왜 나왔는지? 왜 쓰는지? 에 대해서는 다를 게 없기 때문이다. Virtual DOM 기술은 DOM 조작에 있어 비효율적인 이유에서 나오게 되었다.DOM 조작에 있어, 비효율적인 이유를 살펴보자.기존에는 아래와 같이, Javascript 또는 Jquery를 통해 원하는 dom 노드를 찾은 후 변경하는 행위를 했다. document.getElementById('myId').appendChild(myNewNode) // javascript$('#myId').append(myNewNode) // jquery 하지만 ..
-
Vue.js에서 줄바꿈 적용하기 :: 마이구미Vue.js 2017. 7. 25. 20:42
이번 글은 Vue.js에서 텍스트 줄바꿈에 대해 다뤄본다.이해를 위해 유튜브의 API를 통해 받아오는 데이터를 활용하는 예로 들어본다.단순히, 유튜브 API를 통해 받아온 데이터를 출력해보자. {{ description }} 그 결과, 아래와 같이 출력되는 모습을 볼 수 있다. 오른쪽 html 소스에서 보는 텍스트 구조와 실제로 출력되는 텍스트가 다른 모습을 확인할 수 있다.즉, 줄바꿈이 적용되지 않은 모습을 볼 수 있다.(사실 상 받아오는 텍스트는 아래와 같다.) 너 먹구름 비\n\n\n1. 널 너무 모르고\n작사: 헤이즈(Heize)\n작곡: 헤이즈(Heize), GroovyRoom.............. \n은 줄바꿈으로 많이 사용되지만, HTML에서 렌더링되지 않는다.HTML에서는 Line Br..
-
store.watch in Vuex :: 마이구미Vue.js 2017. 7. 13. 00:15
이 글은 Vuex 저장소의 상태(state)에 대해 watch 사용법을 다뤄본다.vuex를 이용할 때 watch 구현 방법을 알아본 후, watch가 작동이 안되는 경우도 원인을 파악할 수 있는 방법을 알아본다. 기본적으로 watch는 상태의 동적 변화를 감지하기 위해 사용한다.일반적으로 Vue.js는 watch 또는 computed를 활용한다. Vuex 저장소의 상태 변화를 감지해야할 필요가 있을 수 있다.크게 2가지로 방법으로 볼 수 있다. 1. store.watch 활용 const store = new Vuex.Store({ state: { n: 10 }, getters: { getN() {return state.n} } }) new Vue({ el: '#app', store, mounted () ..
-
strict mode in Vuex :: 마이구미Vue.js 2017. 6. 6. 23:15
이번 글은 상태 관리 패턴 모듈 Vuex의 엄격 모드에 대해 다뤄본다.충분한 정보를 가지고 있다면, 엄격 모드로 인한 에러 발생 시 당황하지 않고 해결할 수 있다. "Error: [vuex] Do not mutate vuex store state outside mutation handlers." 혹시 위와 같은 에러가 발생했다면, 엄격 모드로 인해 에러가 발생한 것이다.외부 변이 핸들러에서는 vuex 저장소 상태를 변이할 수 없다는 메시지가 된다.대부분 콜백 함수에서 변이하려고 했을 경우 발생한다. Vuex의 엄격 모드에 대해 처음부터 살펴보자.Vuex를 사용해봤다면, strict 모드를 설정했을 것이다. export default { modules: { channel, lock, player, }, s..