목표 Vue 앱에서 처리하지 않은 에러를 전역적으로 처리하는 방법을 이해한다. app.config.errorHandler app.config.errorHandler에 catch하지 않은 에러의 global handler를 할당할 수 있다. app.config.errorHandler = (err, instance, info) => { // handle error, e.g. report to a service } 핸들링해줄 수 있는 함수들은 다음과 같다. Component renders Event handler Lifecycle hooks setUp() 함수 Watchers Coustom directive hooks Transition hooks 참고 자료 https://vuejs.org/api/application.html#app-config-errorhandler
목표 vue-router에서 뒤로가기 구현 방법을 이해한다. vue-router의 2가지 모드 hash mode url에 ‘#‘을 사용해서 URL이 변경되어도 페이지가 리로딩되지 않도록 하는 모드 history mode history.pushState를 사용해서 URL이 변경되어도 페이지가 리로딩되지 않도록 하는 모드 참고: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState 서버 설정에 따라, 404 에러가 발생할 수 있으므로 웹 서버 설정을 확인해봐야된다. 뒤로가기 구현법 this.$router.push: 히스토리 스택에 새로운 경로로 이동할 수 있다. this.$router.go: 히스토리 스택을 이동할 수 있다. // go forward by one record, the same as router....
방법 <KeepAlive> 컴포넌트를 사용하면, 이전 컴포넌트의 상태를 캐싱했다가 뒤로돌아가도 유지된다. https://vuejs.org/guide/built-ins/keep-alive.html#basic-usage KeepAlive의 상태 유지 방법 KeepAlive 컴포넌트 레벨에서 캐싱이 이루어지고 있다. 만약 중간에 KeepAlive DOM이 사라지면 캐싱이 지워진다. https://github.com/vuejs/vue/blob/dev/src/core/components/keep-alive.js#L90 참고 자료 https://stackoverflow.com/questions/41764825/preserve-component-state-with-vue-router https://stackoverflow.com/questions/71145498/where-does-vuejs-store-the-cached-component-when-using-keep-alive
방법 $route.params를 통해 가져올 수 있다. pattern matched path $route.params /users/:username /users/eduardo { username: ’eduardo’ } /users/:username/posts/:postId /users/eduardo/posts/123 { username: ’eduardo’, postId: ‘123’ } 참고 자료 https://router.vuejs.org/guide/essentials/dynamic-matching.html
목표 커스텀 디렉티브를 등록하는 방법을 알아본다. 방법 커스텀 디렉티브는 컴포넌트와 유사하게 라이프사이클 훅(hook)을 포함하는 객체로 정의된다. 아래는 autofocus를 디렉티브로 구현한 예시다. const focus = { mounted: (el) => el.focus() } export default { directives: { // enables v-focus in template focus } } 컴포넌트와 마찬가지로 템플릿에서 사용할 수 있도록 등록을 해야된다. 아래는 app 수준에서 커스텀 디렉티브를 등록하는 예시다. const app = createApp({}) // make v-focus usable in all components app.directive('focus', { /* ....