Vue.js
-
[Nuxt.js] Vuetify Custom Icon 적용하기 :: 마이구미Vue.js 2021. 8. 28. 22:50
이 글은 Nuxt.js 에서 Vuetify 에 Custom Icon 을 적용하는 것을 다룬다. Vue 환경에서는 간단하겠지만, Nuxt 환경에서는 조금 손이 가는 작업이 필요할 수 있다. 혹시 Nuxt.js 에서 커스텀 아이콘이 잘 적용되지 않았다면 도움이 될 것이다. 참고 링크 - https://stackoverflow.com/questions/59035257/nuxt-vuetify-module-custom-component-icons-doest-work vuetify 를 사용하면 기본적으로 제공하고 있는 아이콘을 쉽게 사용할 수 있다. 하지만 원하는 모든 걸 제공해주지는 않기에, 커스텀 아이콘에 대한 니즈는 나오기 마련이다. Nuxt.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 Mixins: 믹스인은 왜 필요한가? :: 마이구미Vue.js 2017. 12. 9. 16:24
이 글은 Vue.js 기능 중 하나인 믹스인(Mixin) 을 다룬다.뷰를 사용하고 있더라도 생소할 수 있지만 유용한 기능이고, 알게 된다면 사용할 수 밖에 없을 것이다.공식 문서 - https://kr.vuejs.org/v2/guide/mixins.html참고 링크 - https://css-tricks.com/using-mixins-vue-js/ 뷰는 독립적인 단위인 컴포넌트를 통해 구현된다.하나의 상황으로 비슷한 2개의 컴포넌트를 가지고 있다고 가정해본다.같은 기능을 가지고 있지만, 확실히 서로 다른 컴포넌트이다. 이러한 경우 2가지 방법을 생각해볼 수 있다. 1개의 컴포넌트로 만들고 props 를 이용해 구분한다.기존대로 2개의 컴포넌트로 분리한다. 2가지 방법 모두 퍼펙트 하지않다.1개의 컴포넌트 ..
-
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 뷰를 접했다면 아마 슬롯에 대한 문서를 이미 읽었을 것이다.본인은 문서를 통해 슬롯을 이해했을 때, 어렵지 않게 이해할 수 있다.하지만 왜 쓰는거지? 확 와닿지 않았다. 다음 의미를 이해한..
-
비 부모-자식 통신 eventBus :: 마이구미Vue.js 2017. 10. 26. 20:58
이 글은 Vue 사용에 있어, 컴포넌트 간의 통신을 다뤄본다.크게는 Vue 내부의 컴포넌트 간의 통신의 흐름을 이해하는데 도움이 될 것이다.공식 문서 - https://kr.vuejs.org/v2/guide/components.htmlVue를 접해봤다면, 부모-자식 관계의 다음과 같은 그림과 설명을 알고 있을 것이다. 부모-자식 컴포넌트 관계는 props는 아래로, events 위로 라고 요약 할 수 있습니다. 부모는 props를 통해 자식에게 데이터를 전달하고 자식은 events를 통해 부모에게 메시지를 보냅니다. 위와 같은 흐름에서 자식은 메시지를 통해 부모의 함수를 호출할 수 있다. // 부모this.$on('add-cart', this.addCart) // 자식this.$parent.$emit('..
-
Vue.js 사용하는 이유 :: 마이구미Vue.js 2017. 9. 2. 00:43
이 글은 Vue, Angular, React 를 비교하는 글이 아닌 단순히 Vue.js의 장점을 다룬다.Vue 이외에는 눈으로만 보았기에, Vue에 편중되어 보여질 수도 있다는 점을 미리 언급한다.세가지 비교는 참고 링크를 읽어보길 바란다.읽기 전 참고할 링크 - Virtual DOM && Top 7 reasons Vue.js && Vue, Angluar, React 비교 Vue는 요즘 핫한 자바스크립트 프레임워크로 사용되고 있다.React와 Angular가 항상 비교 대상이였지만, Vue의 등장으로 크게 3가지로 비교되고 있다.Vue의 등장은 신선했다.왜냐하면 Vue.js는 혈통 없이 React와 Angular의 성공과 실패로부터 만들어졌다.크게 React(Virtual DOM)와 Angular(양방향..
-
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인스턴스가 작성된 후 동기적으로 호출됩니다. 이 단계에서 인스턴스는 데이터 처리, 계산된 속성, 메서드, 감시/이벤트 콜백 등..