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. 나와 같은 문제를 겪고 있는 ..
전역 수준 컴포넌트의 문제점 빌드 단계가 없음 ECMAScript 2015 이상, Typescript와 같은 최신 문법을 사용할 수 없음 CSS 빌드 & 모듈화 기능이 없음 template이 모두 고유한 id를 가지도록 개발자가 관리해야 함 그래서 생겨난게... ↓ ↓ ↓ 단일 파일 컴포넌트(Single File Component) 단일파일 컴포넌트: , 위 코드는 아래의 HTML로 생성된다. CSS Module을 적용한 버튼 Hello World hand, box, border과 같이 코드에 주어진 스타일명이 아닌, 충돌하지 않도록 생성된 다른 이름이 클래스명으로 사용된다. 슬롯 부모 컴포넌트에서 자식 컴포넌트로 전달할 정보가 HTML 태그를 포함하고 있다면, props를 사용해 전달하기 쉽지 않다. ..
Vue 컴포넌트? 작고 독립적이며 재사용할 수 있는 -> 뷰 세계에서 가장 기본적인 구성 요소 컴포넌트 시스템 = 컴포넌트의 조합 컴포넌트 여러개가 모여서 컴포넌트 시스템을 이루어 대규모 애플리케이션 구축이 가능하다. 각각의 컴포넌트들은 트리구조로 이루어져 있으며, 서로 상호작용을 하여 애플리케이션 서비스를 이룬다. 컴포넌트 작성과 사용 파라미터 태그명: 컴포넌트를 사용할 태그 태그명은 대소문자를 구별하지 않으므로, 가능한 케밥 표기법을 따르는 것이 좋다! 옵션: 기타 정보(template, props 등) 템플릿 작성 방식 1. 인라인 템플릿 위처럼, template 옵션에 템플릿 문자열을 사용하는 방식을 인라인 템플릿(inline template)이라고 한다. 그리 권장되는 방법은 아니다. 2. te..
뷰 최신 버전인 2.5.17 버전에서 트랜지션을 사용해보았다. 참고로 그 사용 방법은 Vue.js 공식 페이지에 기가막히게 잘 나와있다. 뷰 트랜지션을 써보다가 마주친 문제를 설명하기에 앞서, 그놈을 어떤식으로 사용하는지 알아보자아~. 뷰(Vue) 트랜지션 사용하기 뷰 트랜지션을 이용하여, 로고 3개를 차례로 뿅뿅뿅 나타나게하는 효과를 적용해보려고 한다. 뷰 템플릿(template) 작성 먼저 template 부분인데, 아주아주 간단하다. 그냥 "transition-group" 이라는 태그를 사용해주면 되고, 효과 이름을 정해서 name="내가 정한 트랜지션 이름" 의 형태로 속성을 넣어주고, 자식 엘리먼트들에다가 'key'를 부여해주자. 그리고, 이 효과가 나타나게 해주는 switch 역할을 하는 v-..