분류 전체보기369 [vue2]jest 단위테스트 css 파일 문법 오류 에러 해결 Jest encountered an unexpected token Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax. Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration. By default "node_modules" folder is ignored by transformers... 2022. 9. 8. [CSS] p또는 div 태그 안에 img가 들어있으면, 밑에 공백이 생김 해결 개요 어드민에 상품 소개 에디터를 개발하는 중,, p태그 안에 img 태그가 들어가는 요소가 있는데, p에 계속 css로 설정하지 않은 아래 공백이 발생하였다. 이부분을 꼭 제거해달라는 md분의 요구사항으로 2시간동안 파악해보았다. 원인 image태그가 인라인 요소라서 그렇다고 한다. 인라인 요소는 블록 요소랑 다르게 보이지 않는 가상의 기준선이 존재한다. 기본값으로 vertical-align baseline을 가진다고 한다. 이건, p나 y처럼 아래 삐져나오는 글자를 위해 마련한 공간이다. 이 공간때문에 발생한 것이었다. 해결방법 참고 https://ux.stories.pe.kr/45 2022. 9. 2. [Vue] axios 요청 함수를 호출하는 컴포넌트 테스트 해결 방법 /** * @jest-environment jsdom */ import { shallowMount } from "@vue/test-utils"; import ClassDetailModal from "./ClassDetailModal.vue"; jest.mock("@/src/axios/api/class"); 👈 api 요청 함수 파일 자체를 목킹함. test('', async () => { 데이터 변경 await wrapper.vm.$nextTick(); 👈 비동기 변경된 데이터가 반영된 UI 확인 }) 참고 https://www.daleseo.com/jest-mock-modules/ 2022. 9. 2. [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. API 응답 AXIOS 에러를 컴포넌트로 전달하기 async cancel() { try { 에이피아이 호출 return result; // true } catch (error) { console.error(error.response); throw error; } }, 컴포넌트에서 에러 처리 try { 아시오스 요청 무언가 } catch(error) { console.error(error); this.errorAlert(error.response.data.error); 👈 } 2022. 8. 29. [Vue]vue2 + eslint 세팅 module.exports = { root: true, env: { node: true, }, extends: ["plugin:vue/essential", "eslint:recommended"], parserOptions: { parser: "@babel/eslint-parser", }, rules: {}, }; 2022. 8. 29. [Vue] 단위테스트 환경 만들기 패키지 설치 @vue/test-utils vue-jest @vue/compiler-dom jest babel-core@7 yarn add --dev @vue/test-utils@1.2.1 yarn add --dev vue-jest @vue/compiler-dom jest babel-core@^7.0.0-bridge.0 babel-jest jest.config.js module.exports = { "transformIgnorePatterns": [ "node_modules/(?!@ngrx|(?!deck.gl)|ng-dynamic)" ], transform: { // process `*.vue` files with `vue-jest` ".*\\.(vue)$": "/node_modules/vue-jest",.. 2022. 8. 29. [Javascript] new Date 런타임에 따른 타임존 브라우저에서의 Date 객체 parse() 함수, getHour(), setHour() 등의 메소드들은 모두 클라이언트의 로컬 타임존 (정확히는 브라우저가 실행되는 운영체제에 설정된 타임존)에 영향을 받는다. 예를 들어 2015-10-12 12:00:00 같은 문자열은 사파리나 IE의 경우 NaN 을 반환하고, 크롬이나 파이어폭스의 경우 로컬 타임존의 값을 반환하며, 경우에 따라 다른 환경에서는 UTC 기준의 값을 반환하기도 한다. .000Z의 의미 크롬 브라우저 브라우저 런타임에서는 .000Z를 붙이지 않고 new Date()를 만들어야, 타임존 계산 없이 Date 객체를 만들 수 있다. 맥OS 한국 타임존 new Date('2022-08-04T04:00:33.000Z') =>Thu Aug 04 202.. 2022. 8. 19. 웹 애플리케이션 브라우저에서 한국 시간으로만 표시하기 개요 사용자 브라우저 로컬타임에 상관없이, 한국 시간으로 계산되서 동작하는 웹 애플리케이션을 개발해야 합니다. DB에는 UTC로 저장되는 것이 맞음. 로컬타임으로 할꺼면, 타임존 정보까지 포함된 값이 저장되어야 한다. 오프셋 UTC와 로컬 타임간의 시간차를 오프셋이라고 한다. 브라우저에서 UTC Date 객체 만들기 getTimezoneOffset() 현재 호스트 설정을 기반으로하는 날짜에 대한 시간대 오프셋 (UTC) (분)을 나타내는 숫자입니다. 현재 호스트 설정을 기반으로하는 날짜에 대한 시간대 오프셋 (UTC) (분)을 나타내는 숫자입니다. var offset = new Date().getTimezoneOffset(); console.log(offset); // -540 브라우저에서 한국 시간 D.. 2022. 8. 16. [redux] redux는 비동기 처리를 어떻게 하고 있을까? redux는 순수함수가 컨셉이다. 순수함수란, 똑같은 입력이면 반드시 똑같은 응답이 나와야 한다는 것이다. 서버로부터 데이터를 받는 처리는 순수하지 않은 함수이다. 네트워크가 끊길 수 있고, 서버의 상황에 따라서 똑같은 입력에 모두 동일한 응답을 넘겨준다는 보장이 없기 때문이다. 그래서, redux는 내부적인 로직으로 이런 비동기 처리를 하는 함수를 제공하지 않는다. 별도의 미들웨어로 비동기를 동기적으로 처리하고 있다. 이런 비동기적인 처리방식이 순수함수가 컨셉인 redux와는 맞지 않는데, 이를 어떻게 사용할 수 있을까? 2022. 8. 13. 이전 1 ··· 7 8 9 10 11 12 13 ··· 37 다음
