vue.js
-
Vue.js: 트랜지션(transition) 어떻게 사용하는가? :: 마이구미Vue.js 2018. 8. 3. 00:41
이 글은 Vue.js 의 트랜지션(transition) 을 통해 애니메이션을 조작하는 법을 다룬다.Vue.js 는 공식 문서가 정말 이해하기 쉽게 설명하고 있다.그렇기에, 기본적인 내용은 자세히 다루지 않는다.기본적인 지식을 문서를 통해 확인한 후, 이 글을 실제 응용하는 방법을 목적으로 참고하길 바란다.글은 예제를 통해 진행된다.관련 예제 - https://kxk7j2vwr.codesandbox.io/공식 문서 - https://kr.vuejs.org/v2/guide/transitions.html 트랜지션의 일반적인 정의는 DOM 의 삽입, 삭제, 갱신 등에 관련된 효과라고 볼 수 있다.이러한 효과는 페이지 단위에서는 싱글페이지(SPA) 활성화로 인해 페이지 전환에 따른 애니메이션을 많이 경험하거나 구..
-
Vue.js: computed 는 어떻게 동작하는가? :: 마이구미Vue.js 2018. 4. 21. 15:11
이 글은 Vue.js 의 computed 속성이 어떻게 동작하는지에 대해 다뤄본다.computed 속성의 동작 원리를 알기 위해서는 Vue 의 반응형 시스템에 대한 사전 지식이 필요하다.큰 범위에서는 Vue 의 반응형 시스템의 관한 주제가 된다.참고한 링크의 번역이 아닌 본인이 재구성한 점을 참고바란다.참고 링크 - https://skyronic.com/blog/vuejs-internals-computed-properties See the Pen computed in vue.js by leejunghyun (@mygumi) on CodePen. 위 코드는 버튼을 클릭할때마다 count 변수가 1씩 증가한다. (네트워크 환경에 따라 로딩이 지연될 수 있으니 조금만 기다려주길..)결과적으로 각각 다른 3가지..
-
Vue.js Slot: 슬롯은 왜 필요한가? :: 마이구미Vue.js 2017. 12. 2. 22:45
이 글은 Vue.js 에서 제공하는 요소에 대해 다룬다.크게 Slots, Named Slots, Scoped Slot 기능을 위한 예제를 통해 진행한다.관련 문서 - https://kr.vuejs.org/v2/guide/components.html#슬롯을-사용한-컨텐츠-배포참고 링크 - https://skyronic.com/blog/vue-slots-example최종 예제 - https://codesandbox.io/s/y0z5ql69112019/4/22 업데이트 수정 SlotsNamed SlotsScoped Slot 뷰를 접했다면 아마 슬롯에 대한 문서를 이미 읽었을 것이다.본인은 문서를 통해 슬롯을 이해했을 때, 어렵지 않게 이해할 수 있다.하지만 왜 쓰는거지? 확 와닿지 않았다. 다음 의미를 이해한..
-
created vs mounted in Vue.js :: 마이구미Vue.js 2017. 8. 18. 20:16
이 글은 Vue.js의 라이프사이클 훅(Lifecycle Hooks)을 이해하기를 돕는다.그 중 created와 mounted을 이해하지 않으면 발생하는 문제에 대해 작성된다.https://kr.vuejs.org/v2/api/#created Vue.js를 사용한다면, 라이프사이클 훅을 알고 있다고 생각한다. (라이프사이클 다이어그램)그 중에서 created, mounted을 대부분 사용한다.Vue 인스턴스 생성에 있어, 가장 먼저 호출되는 함수들로써, 스크립트로 보자면, window.onload 와 비슷한 느낌이 될 것이다. 공식 문서에서는 다음과 같이 설명되어있다. created인스턴스가 작성된 후 동기적으로 호출됩니다. 이 단계에서 인스턴스는 데이터 처리, 계산된 속성, 메서드, 감시/이벤트 콜백 등..
-
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을 무시한다.=>..
-
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..