Vue 이것저것..
1.slot(슬롯)을 빠르게 알아보자..
우선 모달 창 컴포넌트(ModalWindow.vue)의 템플릿 코드가 아래의 코드와 같다고 가정해보자.코드를 살펴보면, slot이라는 태그로 되어있는 내용들이 보일 것이다.slot 태그안에 내용은 언제든지 부모 컴포넌트에서 재정의 할 수 있다는 말인데, 이게 도대체 무
2.Vue 이벤트 버스를 활용해 로딩 컴포넌트 구현
boolean값의 로딩 데이터를 선언하고 props로 로딩데이터를 로딩 애니메이션이 있는 컴포넌트에 넘겨주어 표현하는 방법도 있지만,React와 다르게 Vue에서는 emit으로 이벤트를 전달해 함수를 동작시키는 방법도 존재한다. 하지만 여러 곳에서 로딩 컴포넌트가 사용
3.Vue HOC(하이 오더 컴포넌트)로 공통 컴포넌트 구현
공통으로 실행 될 로직이 담긴 컴포넌트를 대상 컴포넌트 위에 한번 더 감싸서(?) 보내는 방법이다.
4.Vue Mixin을 사용하여 컴포넌트 재활용하기 feat. HOC의 단점
결론부터 말하자면 HOC의 단점은 사용하면 사용 할 수록 컴포넌트의 레벨이 깊어지기 때문에 데이터간 통신이 까다로워 진다.HOC의 단점...그 부분에 있어서 Mixin이라는 방법을 사용하여 재사용성을 개선해보려고 한다.Mixinx의 HOC와 다르게 구조가 약간 다른데
5.Vue vue-router Navigation Guards을 이용한 데이터 호출 시점
Vue의 라이프 사이클과 같이 beforeEnter()를 사용하게 되면, 라이프 사이클이 붙기 전, 라우팅을 할때의 시점에서 무언가(?)를 할 수 있게 된다.따라서 HOC와 Mixin의 연장선으로 이번엔 라우터 가이드를 활용해 created()로직을 사용해보려고 한다.
6.Vue에서 DOM을 접근하는 방법인 ref 속성
Chart.js 사용하는 부분에서 자바스크립트 문법으로 직접 DOM에 접근하는 코드를 Vue의 ref 속성을 이용하여 바꿔 보려고 한다.
7.Vue 플러그인을 만들어서 반복되는 import를 막아보자..
아래와 같이 Chart.js를 활용한 차트 컴포넌트가 있는데, 각 차트의 형태별로 여러개의 컴포넌트가 존재한다고 하면,여러개의 차트 컴포넌트들이 동일한 레벨 내에서 화면이 보여야 할 땐, import Chart를 비효율적으로 불러오게 된다.이러한 단점을 해결 할 수 있