데브머리큐

모든 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..

아래와 같은 객체에서 "B" | "C" | "D" | "G" | "H" | "A" | "E" 와 같은 Union Type을 추출하려면 어떻게 해야 할까요? 원하는 값을 얻기 위해서 꽤 긴 시간을 삽질을 한 것 같아요. 저는 단순히 TypeScript에서 제공하는 keyof 라는 값과 ValueOf 라는 제네릭 타입을 만들어서 조합하면 원하는 결과가 나올 것이라 생각했습니다. "B" | "C" | "D" | "G" | "H" | "A" | "E" 타입을 추출하는 것은 쉽지 않더군요. 먼저 fisrt와 second 객체를 뽑아내기 위하여 아래와 같은 ValueOf 라는 제네릭 타입을 만들어 주었습니다. type ValueOf = T[keyof T]; 해당 타입을 활용하면 결과는 이렇습니다. 이제 Exampl..

작업을 하다 보면 commit 규칙이 있음에도 불구하고 의도치 않게 실수하여 commit을 되돌리거나 모르는 채로 push까지 하게 될 수 있다. 페어 프로그래밍을 진행하면서 페어와 commit이 다를 수 있다는 것을 인지하게 되었다. 어떻게 하면 서로가 규칙을 지키면서, 또 실수를 방지하며 commit 메시지를 작성할 수 있을지 고민하게 되었다. 알아보니 githooks 혹은 husky 그리고 commitlint를 사용하여 이러한 부분들을 해결할 수 있다는 것을 알게 되었고 레포지토리를 만들어 실습해보았다. 실습 레포는 하단 링크에서 볼 수 있다. GitHub - somedaycode/husky_commitlint_test: test git commit and push with lint test git..

오늘 TIL 3줄 요약 빠른 변화 속도를 따라가려면 가능한 한 느슨하고 유연한 코드를 작성해야 한다. 이를 위한 되돌릴 수 있는 의사결정 방법들을 설명한다. 결합도(coupling)를 낮추는 방법들 클래스 상속에 관한 문제와 이를 해결하기 위한 몇가지 방법들 TIL (Today I Learned) 날짜 2022.03.29 - 2022.03.29 오늘 읽은 범위 5장. 구부러지거나 부러지거나 책에서 기억하고 싶은 내용 우리가 어떤 것 하나만을 골라내려고 해도, 그것이 우주의 다른 모든 것과 얽혀 있음을 깨닫게 된다 - 존 유어(John Muir) 결합도가 높으면 이리저리 연결되어 있어서 여러 가지를 동시에 바꾸어야 한다. 소프트웨어의 구조는 유연해야 한다. 그리고 유연하려면 각각의 부품이 다른 부품에 가능..