본문 바로가기

vue25

[Vue advance Cropper] 올린 이미지에 따라서 크로퍼 크기가 맞춰짐

문제 긴 이미지를 크로퍼에 넣으면, 크로퍼가 이미지 크기만큼 되버림.. 길면, 아래 버튼들이 잘림. 수정한 코드 // ... 결과 2022. 12. 19.

[Vuejs] Vuex store 메서드 스타일 액세스

getters에 메서드에 파라미터를 주는 방법 getters: { // ... getTodoById: (state) => (id) => { return state.todos.find(todo => todo.id === id) } } 컴포넌트에서의 사용 store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false } 다만, 메서드를 통해 액세스되는 게터는 호출할 때마다 실행되며 결과는 캐시되지 않는다고 한다. 참고: https://vuex.vuejs.org/guide/getters.html#property-style-access 2022. 12. 13.

[Vue] test-utils TypeError: Cannot read property 'parentNode' of undefined

에러 TypeError: Cannot read property 'parentNode' of undefined 왜 뜰까? 채널톡 sdk 추가하고부터 에러가 발생함. 에러 코드도 위에는 안 적었지만, 채널톡 js파일에서 나고 있었다. 해결방법은 옵셔널 처리함. 2022. 11. 27.

[Vue] textarea 스크롤말고 높이가 늘어나게 처리하기

개요 textarea에서 높이는 그대로인채로 스크롤이 길어지게 경험을 제공했는데, 불친절한 경험을 줄 수 있다는 피드백을 받았다. 그래서, 글자가 길어져서 줄바꿈이 일어났을 때, 스크롤 높이를 감지해서 그만큼 높이가 길어지게 구현했다. vue 파일 사이즈를 조절하는 함수를 실행시키는 트리거는 @keydown이나 @keyup보다 @input이 더 자연스러웠다. @input을 쓰자 2022. 11. 26.

[Vue] input type=number 엘리먼트에서 스크롤로 값 변경 막기

개요 스크롤로 값이 변경되는 현상을 발견하였다. 해결방법 귀한거디.... scroll 휠 2022. 11. 21.

[Vue] 동일 라우터 중복 요청 에러 해결방법

consoleObservable.ts:34 NavigationDuplicated: Avoided redundant navigation to current location: "/login". 해결방법 로그인 2022. 10. 31.

[VTU] jest.spyOn의 뜻을 알았다.

vue2를 사용하고 있다. Vue test utils로 테스트를 짜고있다. 테스트할 컴포넌트의 데이터 프로퍼티를 변경하면, watch에 의해서 감지되서 특정 메서드를 실행하게 되어있다. 특정 메서드는 컴포넌트 내부에 무언가를 수정하지 않고, vuex의 mutations 메서드를 호출해서 값을 변경하는 역할만 한다. 그래서, 결과가 아닌 메서드 호출만을 테스트하려고 하고 있다. 다음처럼 테스트 코드를 작성했는데, 에러가 발생했다. expect(wrapper.vm.테스트하는컴포넌트에정의된메서드).toBeCalledTimes(1); toBeCalledTImes의 received는 mock 또는 spy 함수여야고 에러 메시지가 표시되었다. 해결방법 jest.spyOn은 실제 함수를 모의함수(mock)으로 변환하.. 2022. 10. 26.

[vue-test-utils] select html tag 테스트 방법

select 태그를 단위테스트할 경우, 참고: https://v1.test-utils.vuejs.org/api/wrapper/setselected.html setSelected | Vue Test Utils setSelected Selects an option element and updates v-model bound data. When you try to set the value to state via v-model by option.element.selected = true; parentSelect.trigger('input'), v-model is not triggered. v-model is triggered by change event. optio v1.test-utils.vuejs.org s.. 2022. 9. 16.

[Vue] 전역 폰트 설정

웹 애플리케이션 폴더에 폰트 저장하고 사용하기 web CDN으로 요청해서 사용하기 적당한 곳에 파일 생성 fonts.css @font-face { font-family: "Pretendard"; font-style: normal; font-weight: 100; src: url(https://폰트 주소) format("opentype"), url(https://폰트 주소) format("woff"), url(https://폰트 주소) format("woff2"); } // 똑같은 CDN으로 font-weight를 여러개로 설정할 수 있음. main.js에 import한다. import Vue from "vue"; import App from "./App.vue"; // ... import "@/src/a.. 2022. 9. 1.

[Tiptap + Nuxtjs] 에디터 구현하기

Tiptap https://tiptap.dev/ 에러 RangeError: Adding different instances of a keyed plugin (plugin$) 기능 만들기 Youtube 넣기 작업 결과 https://tiptap.dev/api/nodes/youtube YouTube – Tiptap Editor tiptap.dev 컴포넌트 코드 import { Editor, EditorContent } from '@tiptap/vue-2'; import StarterKit from '@tiptap/starter-kit'; import Youtube from '@tiptap/extension-youtube'; export defualt { name: "TiptapComponent", mount.. 2022. 7. 13.

티스토리툴바