[수정 내역] 1. 이 게시글은 2021.06.09 23:44에 수정되었습니다. 이 게시글은 삽질보다 카테고리 선정에 가장 많은 시간을 할애한 것 같습니다. Django니깐 python에 작성해야 하나..? 그래도 Quasar는 Vue.js 기반인데 Frontend니 JS 카테고리에 넣어야 하나...? 이 글을 읽기 전에 웹에서의 Render 방식에 대해서 이해할 필요성이 있습니다. Modern Web의 4가지 렌더링 방식에 대한 고찰 Modern Web Modern Web 은 현대적인 웹 또는 최신 웹앱 혹은 멀티플랫폼 반응형 웹이라는 의미로 사용되는데, 정확한 사전 의미는 없고 직역하면 그냥 현대적인 웹입니다. 2021년 오늘날에는 아마도 Rea gmyankee.tistory.com 어쨌든 Djang..

Vue3 또는 Vue2, Nuxt.js에서는 Composition API 패턴을 사용할 것을 권장하고 있습니다. 이는 기존 Options API 대비 유지보수가 용이해진다는 장점이 있습니다. 단일 컴포넌트내에서 너무 많은 기능을 수행한다면, 특정 기능을 수행하는 methods, computed 등의 life cycle을 찾기가 힘들어집니다. 기존 Vue에서의 단점으로 부각되는 것이 큰 규모의 프로젝트를 수행하기 어렵다라고들 하는데 설계에 문제가 있을수도 있겠지만, 기본적으로 단일 컴포넌트에 수행되는 행위들이 많아지면서 유지보수와 추가 수정이 어려워지는 현상이 나타났었습니다. 기존 다른언어들에서의 Class를 살펴보면 사실 Composition이라는 방식은 객체를 생성하고 콜 하여 상속이나 믹스인을 통해 ..

JEST에서 vue 또는 nuxt를 사용하는 도중 setup binding property "" is already declared as a prop Test Case 자체는 성공으로 Passed가 나타나지만 console에서는 오류가 나는 것을 확인할 수 있습니다. 위 오류는 Composition API를 사용한 JEST Test 결과에서 주로 등장을 하게 되는데, 가장 기본적인 해결 방법은 테스트 케이스 내에서 로컬 뷰에 VueCompositionAPI를 사용한다고 선언을 해주어야 합니다. import Vue from 'vue' import VueCompositionAPI from '@vue/composition-api' const localVue = createLocalVue() localVue.u..

Nuxt.js에서 JEST를 사용하다 보면 마주치는 오류중 하나로 template tag를 JEST에서 해석할 수 없어서 나타나는 증상 중 하나입니다. 대표적으로 nuxt-link 등의 nuxt만의 고유한 태그들에서 이러한 현상이 발생할 수 있습니다. Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. 이것을 해결하기 위해서는 JEST setup에서 mocking된 component.vue를 하나 생성해주어야 합니다. // test/__mocks__/clientOnlyMock.vue setup.js를 통해 생성한 컴포넌..