본문 바로가기

분류 전체보기369

[jest] scrollTo()가있는 컴포넌트 테스트 에러 해결 방법

console.error Error: Not implemented: window.scrollTo mounted() { > 53 | window.scrollTo(0, localStorage.getItem('offsetTop') || 0); | ^ 해결방법 테스트하는 파일 위에 추가 window.scrollTo = jest.fn(); 2022. 8. 11.

[Nuxtjs]Lottie json 적용하기

1. 설치 yarn add vue-lottie@0.2.1 2. 컴포넌트 작성 import Lottie from 'vue-lottie/src/lottie.vue'; import * as tearChildsLottie from 'assets/img/tear-child-lottie.json'; import * as noTearChildsLottie from 'assets/img/no-tear-child-lottie.json'; export default { name: '오예~', components: { Lottie, }, data() { return { tearlottieOptions: { animationData: tearChildsLottie.default, loop: false, }, noTearlot.. 2022. 8. 9.

[vue test] nuxt에서 단위 테스트 발생한 오류

$ jest console.error [Vue warn]: Error in render: "SyntaxError: Invalid or unexpected token" found in ---> 테스트를 하려는 컴포넌트에서 발생한 오류임. 2022. 8. 6.

[css] 텍스트 블럭 방지

.banselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* 인터넷익스플로러 */ user-select: none; } 2022. 8. 2.

[vue/test-utils] $route를 사용하는 컴포넌트 테스트 방법

다음처럼 설정을 해준다. https://v1.test-utils.vuejs.org/guides/using-with-vue-router.html Using with Vue Router | Vue Test Utils Using with Vue Router Installing Vue Router in tests You should never install Vue Router on the Vue base constructor in tests. Installing Vue Router adds $route and $router as read-only properties on Vue prototype. To avoid this, we can create a localVue, v1.test-utils.vuejs.org.. 2022. 7. 31.

[Javascript] new Date()에서 48시간 전 날짜 계산하기

2022. 7. 25.

[AWS]api gateWAY -> EC2 CORS 에러 문제

mvp를 진행하면서, 기존 dev 환경 서버에서 mvp 기능을 위한 서버 환경이 새로 만들어 졌다. 그런데, 어떤때는 데이터가 잘 넘어오고, 어떤 때는 데이터가 잘 넘어오지 않았다. 이상했다. 원인을 서버 개발자와 함께 찾기 시작했다. cors 에러가 브라우저에서 발생했다. 504로 응답이 넘어왔다. EC2와 gateway의 설정을 막 뒤졌다. 원인을 찾을 수 없었다. 그런데, cloudwatch로 로그를 찍어보니, 통신이 안 되는 에러 로그가 계속 찍혔다. nuxt.js에서 proxy 설정으로 request headers의 orgin을 바꾸려는 시도도 해보았지만, 잘 되지 않았다. 원인을 찾지 못한 채... 다른 일을 보았다.. 다음 날 아침. 서버 개발자분이 문제가 해결되었다고 나에게 기쁜 소식을 전.. 2022. 7. 20.

[Nuxtjs] @vue/unit-tests 환경 만들기

간신히 해냈다. nuxt 프레임워크를 사용해서, @nuxt/unit-tests를 사용해야 할 것 같지만, 공식 문서에 내용이 부족하고, 레퍼런스가 부족하여, @vue/test-utils를 사용하였다. (nuxt.js의 공식 문서는 빠진 부분이 정말 많은 것을 매번 기능을 추가하면서 느끼는 부분이다. 정말 짜증나게 시간을 잡아먹게 된다.) 테스트 코드 실행 성공 방법 참고: https://test-utils.nuxtjs.org/setup 참고: https://heropy.blog/2020/05/20/vue-test-with-jest/ 1. 설치 @vue/test-utils로 작업했다. @babel-core: 7 버전 이상을 사용하라. yarn add --dev @vue/test-utils@1.2.1 추가 .. 2022. 7. 13.

[firebase storage] javascript 사용법(최신버전)

storage에 파일 업로드방법 업로드 컴포넌트 export default function MakeTweet() { const [preview, setPreview] = useState(null); const [file, setFile] = useState(null); function uploadFile({target: {files}}) { if(!file) return; const [file] = files; const reader = new FileReader(); reader.readAsDataURL(file); reader.onloadend = ({ target: {result}}) => { // result : '' setPreview(result); } } return ( ) } 업로드 fir.. 2022. 7. 13.

[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.

티스토리툴바