데브머리큐

크롬에서는 아래와 같은 코드가 잘 작동한다. 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')

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: { ..

css :hover를 사용해서 간단히 구현할 수 있다고 생각했던 기능이 있습니다. pacakges: React, styled-component 아래의 gif 같이 마우스를 올렸을 때, 마우스가 올라간 컴포넌트만 배경의 색이 바뀌어야 했는데요. css의 :hover를 사용하니 원하는 대로 동작하지 않았습니다. css만 사용해서 원하는 hover 동작을 만드려고 하니 부모 컴포넌트만 배경색이 바뀐다거나, 자식 컴포넌트의 색깔만 바뀌었습니다. 혹은 모든 컴포넌트에 적용이 되었습니다. 자식 컴포넌트에 마우스를 올리면 부모에도 css로 적용한 :hover가 적용이 되었습니다. 이렇게요. css 부모 선택자를 활용해보거나, nth-child를 활용해보려 했지만 원하는 동작을 구현할 수 없었습니다. 더불어, 이후에 ..

젠킨스에 로그인 -> 배포하고자 하는 프로젝트를 찾기 -> 빌드 하기. 이러한 일련의 과정이 너무나 귀찮았다. 푸시하고 인터넷을 켜야 하는 게 말이 되는가? IDE에서 작업을 마무리하고 어떻게 명령어하나로 위의 과정을 스킵할 수 있을까 하고 보니, 두 가지 방법을 찾을 수 있었다. GitLab에 Push가 되면 webhook을 통해 빌드를 유발 원격 스크립트를 활용하여 잦은 Push를 통한 빌드를 피하고자 명령어를 통해 원할 때 빌드하는 것 두 가지의 방법 모두 간단히 설정할 수 있다. 1. GitLab Push시 Jenkins 빌드 젠킨스 접속 -> 프로젝트 -> 구성에 들어간다. 고급 버튼 클릭 후, 시크릿 토큰을 발급 받는다. 토큰을 받으면 GitLab 프로젝트 Settings의 Integratio..