[Vue] Vue Router - chunk load fail 로 인한 삽질기
TL;DR 솔루션 🧙🏽♀️: router.onError 콜백으로 chunk load 에러 핸들링 let nextPath: string; router.onError((error) => { console.error(error); if (error.name === 'ChunkLoadError') { window.location.href = nextPath || '/'; } }); 현재 Vue로 개발하고 있는 멀티 클라우드 플랫폼, SpaceONE(스페이스원)을 개발하면서 vue router chunk load fail 이슈를 만났다. 이 문제는 생각보다 간단히 해결되지만, 헛다리를 제대로 짚으면 매우매우 고생한다... 이 글은 그렇게 매우매우 고생한 이야기를 공유함으로써, 1. 나와 같은 문제를 겪고 있는 ..
[Vue.js] 뷰 트랜지션(transition)의 사용 방법과 치명적인 문제점
뷰 최신 버전인 2.5.17 버전에서 트랜지션을 사용해보았다. 참고로 그 사용 방법은 Vue.js 공식 페이지에 기가막히게 잘 나와있다. 뷰 트랜지션을 써보다가 마주친 문제를 설명하기에 앞서, 그놈을 어떤식으로 사용하는지 알아보자아~. 뷰(Vue) 트랜지션 사용하기 뷰 트랜지션을 이용하여, 로고 3개를 차례로 뿅뿅뿅 나타나게하는 효과를 적용해보려고 한다. 뷰 템플릿(template) 작성 먼저 template 부분인데, 아주아주 간단하다. 그냥 "transition-group" 이라는 태그를 사용해주면 되고, 효과 이름을 정해서 name="내가 정한 트랜지션 이름" 의 형태로 속성을 넣어주고, 자식 엘리먼트들에다가 'key'를 부여해주자. 그리고, 이 효과가 나타나게 해주는 switch 역할을 하는 v-..