데브머리큐

크롬에서는 아래와 같은 코드가 잘 작동한다. new Date('2022-09-27 09:00:00') // Tue Sep 27 2022 09:00:00 GMT+0900 (한국 표준시) new Date('2022/09/27 09:00:00') // Tue Sep 27 2022 09:00:00 GMT+0900 (한국 표준시) 사파리에서는?? ( - ) 붙임표가 문제다 new Date('2022-09-27 09:00:00') // Invalid Date 이렇게 바꿔주자. new Date('2022/09/27 09:00:00')

운영 중인 서비스의 웹 바이탈(Web Vitals)과 전반적인 개선점을 주기적으로 체크하며 웹 성능을 모니터링을 해보자. 간단한 웹 성능 측정 방법 2가지 먼저 간단한 방법 2가지를 알아보고 Lighthouse CI를 적용해보자. 개발자 도구 - Performance 개발자 도구를 열고 Performance 탭에 들어가 녹화를 시작하고 여러 가지 동작을 수행한 후 녹화 정지 버튼을 누르면 전반적인 지표들을 아래와 같이 볼 수 있다. 이를 통해 웹 페이지 로드(load) 시점에서 일어나는 블로킹(Blocking)을 해결하고 시각적으로 LCP, CLS 지점들을 확인해 볼 수 있다. 개발자 도구 - Lighthouse Lighthouse는 별도로 어떤 동작을 수행하지 않아도 Analyze Page Load 버..

MSW(Mock Service Worker) MSW는 서비스 워커(Service Worker)를 사용하여 실제 요청(Requests)을 중간에서 가로채 API를 Mocking 해주는 라이브러리이다. 기존의 라이브러리들과는 다르게 네트워크 단에서 실제로 요청을 주고받으며 테스트를 진행할 수 있는 장점이 있으며, REST API 및 GraphQL 모두 지원하고 있다. 프런트엔드 개발에서 Mock API는 떼려야 뗄 수 없는 부분인 것 같다. 개발을 위한 목업 데이터 만들고 관련 로직과 컴포넌트를 만든다. API 개발을 기다리며 타입을 작성하고, 여러 가지 테스트를 진행한다. 여러 이슈들은 대부분이 잘못된 API를 호출하거나 에러 처리를 잘못하였을 때 발생하기 때문에 Mock API를 사용하여 디버깅을 해보는..

Nuxt를 사용하면서 발생한 에러. 에러가 불친절해서 Nuxt github에 feature issue를 올렸다. 답변이 굉장히 빨랐는데, 관련 이슈를 훑어보니 비슷하게 생각하는 사람들이 몇몇 있었던 모양이다. Warn needs to be much more specific when there's no root element in · Issue #6476 · nuxt/framework Describe the feature these are vue components in my pages directory // pages/index.vue Home page 1... github.com Nuxt에서도 이를 인지하고 있는 것인지 관련 PR이 올라와있다. feat(nuxt): add warning in dev m..

차트 라이브러리 개발 도중 마주친 에러 - vue2.x 사용 vue-cli-service build --target lib --name index [entry] 뷰 컴포넌트를 라이브러리로 만든 후, 해당 라이브러리를 다른 서비스에서 사용하려했지만 다음과 같은 에러가 발생했다. Module build failed (from ./node_modules/sass-loader/dist/cjs.js): SassError: expected selector. & /deep/ .class-name {} 비슷한 문제를 스택오버플로우에서 발견 The `/deep/` selector is not working using sass-loader in my VueJS application In my Vue 2.6.10 webpa..

모든 router-view 컴포넌트에 동적 키를 삽입하여 페이지 내부에서 param의 값만 바뀌더라도 해당 페이지가 재렌더링이 될 수 있게끔 한다.

최근 토스에서 SLASH 22 두 번째 개발자 콘퍼런스를 홍보하는 것을 보고 SLASH 21에 있던 영상들을 다시 한번 빠르게 훑어봤다. 이전에는 잘 알지 못해서 북마크만 해두고 '나중에 봐야지' 하고 남겨두었던 이한 님의 JavaScript Bundle Diet 영상을 보는 순간 현재 회사에서 맡고 있는 프로젝트의 번들 사이즈를 줄이고 싶다는 열망이 솟아났다. 중복 패키지를 제거하자 맡고 있는 프로젝트는 Vue로 되어 있다. Vue Cli를 통해 프로젝트를 구성하게 되면 Webpack Bundle Analayzer가 이미 포함되어 있기 때문에 빌드 시 --report 명령어를 추가해준다면 report.html을 통해서 다음과 같은 차트를 확인할 수 있다. React에서는 라이브러리 설치 후, 웹팩..

타입스크립트의 데코레이터는 도대체 뭘까? class-validator를 프로젝트에서 사용해보았다면, 아래와 같이 데코레이터를 사용해 간단히 유효성 검사를 위한 Class를 만들 수 있다. import { IsEmail, MinLength, MaxLength, } from 'class-validator'; export class UserDto { @MaxLength(15) name: string; @IsEmail() email:string; @MinLength(8) password: string; } DTO를 위해 class-validator를 사용한 예시 이외에도 Nest.js를 사용해보았다면, Module, Provider, Controller를 만들 때도 데코레이터를 활용한다. 그래서, 데코레이터는 ..

테스트를 진행하기에 앞서 Jest에서 window에 접근하기 위한 설정을 해야 한다. 아래 글을 통하여 window 객체에 접근할 수 있는 환경을 만들어 주었다면 이제는 테스트 환경을 커스터마이징 해줄 수 있다. 이러한 커스텀이 필요한 이유는 window.location.href에 접근하기 위하여 테스트 파일 내부에 일일이 window 객체를 mocking 해야 하는 번거로움을 제거하며, 변하지 않는 상수 값들을 환경 내부에 설정할 수 있기 때문이다. 필요하다면 크로스 브라우징과 관련한 테스트를 진행할 때도 사용할 수 있다. Jest에서 window 객체 접근하기 Notification, 또 브라우저의 URL에 관한 Unit Test를 작성하던 중 다음과 같은 에러를 마주했다. The error belo..

Notification, 또 브라우저의 URL에 관한 Unit Test를 작성하던 중 다음과 같은 에러를 마주했다. The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string. Consider using the "jsdom" test environment. jest.config.js /** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */ module.exports = { preset: 'ts-jest', testEnvironment: 'node', transform: { ..