본문 바로가기

전체 글370

[redux] redux는 비동기 처리를 어떻게 하고 있을까?

redux는 순수함수가 컨셉이다. 순수함수란, 똑같은 입력이면 반드시 똑같은 응답이 나와야 한다는 것이다. 서버로부터 데이터를 받는 처리는 순수하지 않은 함수이다. 네트워크가 끊길 수 있고, 서버의 상황에 따라서 똑같은 입력에 모두 동일한 응답을 넘겨준다는 보장이 없기 때문이다. 그래서, redux는 내부적인 로직으로 이런 비동기 처리를 하는 함수를 제공하지 않는다. 별도의 미들웨어로 비동기를 동기적으로 처리하고 있다. 이런 비동기적인 처리방식이 순수함수가 컨셉인 redux와는 맞지 않는데, 이를 어떻게 사용할 수 있을까? 2022. 8. 13.

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

티스토리툴바