Je개발 일지

문제 발생Vue.js로 관리자 대시보드를 개발하던 중, 탭 전환 기능에서 예상치 못한 에러가 발생했습니다.TypeError: parentComponent.ctx.deactivate is not a function at unmount (chunk-PIYQV7LF.js?v=6c215612:7924:27) at patch (chunk-PIYQV7LF.js?v=6c215612:6747:7) at sharedContext.activate (chunk-PIYQV7LF.js?v=6c215612:4649:7)처음에는 단순한 라이브러리 버전 호환성 문제로 생각했으나, 조사 결과 Vue의 KeepAlive 컴포넌트와 OverlayScrollbars 라이브러리 간의 라이프사이클 충돌 문제였습니다.코드 구조문..

[ Reference ] https://vuejs.org/guide/essentials/computed.html Computed Properties | Vue.js vuejs.org 1. Basic Example Template 표현 방식은 매우 편리하지만 그만큼 간단한 작동을 위한 것이라는 의미도 내포한다. 너무 많은 로직을 Template 안에 넣게 되면 무거워지면서 유지하기가 어려워진다. 반응형 데이터를 포함하는 복잡한 논리의 경우 계산된 속성을 사용하는 것이 권장된다. Has published books: {{ publishedBooksMessage }} 여기에서 계산된 속성을 ** publishedBooksMessage ** 로 선언했다. ** computed( ) ** 함수는 getter 함수..

[ Reference ] https://vuejs.org/guide/essentials/reactivity-fundamentals.html Reactivity Fundamentals | Vue.js vuejs.org 공식 문서에서는 예시 코드를 Options API, Composition API 둘 다 지원하고 있다. 나는 개인적으로 Composition API 를 더 선호하고 있기 때문에 Composition API 로 예시 코드를 가져오도록 하겠다. 1. Declaring Reactive State ** reactive( ) ** 함수를 사용하게 되면 반응성이 있는 객체나 배열을 만들 수 있다. import { reactive } from 'vue' const state = reactive({ cou..

[ Reference ] https://vuejs.org/guide/essentials/template-syntax.html Template Syntax | Vue.js vuejs.org Vue 는 선언적 바인딩을 가능하게 하는 HTML 기반의 Template 구문을 사용한다. 모든 Vue template 은 HTML Parser 나 규격 호환 브라우저에서 파싱할 수 있는 유효한 HTML이다. Vue 는 template 을 높은 정도로 최적화된 자바스크립트 코드로 컴파일한다. 여기에 반응성 시스템까지 겹쳐서 Vue 는 리렌더링 해야 하는 최소한의 Element 를 파악해 앱 상태가 변경될 때 최소한의 DOM 을 조작할 수 있도록 만든다. (* 의미하는 바를 잘 생각해보자. HTML 을 이용해서 DOM T..

[ Reference ] https://vuejs.org/guide/essentials/application.html Creating a Vue Application | Vue.js vuejs.org [ 2-1 ] Creating a Vue Application The application instance 모든 Vue 어플리케이션은 createApp 함수를 이용해서 application instance 를 만들어내야 한다. The Root Component createApp 함수로 넘기는 객체들은 사실상 컴포넌트들이다. 각 app 은 Root Component 를 필요로 한다. 그리고 이 Root Component 는 다른 컴포넌트들을 Children 으로 갖는다. (*첨언. 이 Root Componen..