11월 첫주차 기록

배워가기

nest.js에서 url query string으로 boolean 값을 받을 때

• true, false 값이 아닌 'true', 'false' 문자열로 들어오는 문제

• class-validator의 @IsBoolean 데코레이터와 class-transformer의 @Transform 데코레이터를 활용할 수 있다

  Copy

  import { IsBoolean, IsOptional } from 'class-validator';
  import { Transform } from 'class-transformer';
  
  export class QueryDto {
    @IsOptional()
    @IsBoolean()
    @Transform(({ value }) => value === 'true')
    isInternal?: boolean;
  }

react-router의 loader

React-Router의 loader를 이용하면 리액트 컴포넌트를 렌더링하기 전에 data fetching을 실행할 수 있다.

{
  path: '/post/:id',
  loader: async ({ params }) => {
    const result = await getPost({ id: params.id as string })
    return result.data
  },
  element: <BlogPost />,
}

👩‍🏫 컴포넌트에서는 useLoaderData 훅을 이용하면 된다.

열거형 문자열 값 자동완성 유지하면서 아무 문자열이나 받을 수 있게 하기

// 자동완성 X, 문자열 리터럴 타입이 다 잡아먹힘
'foo' | 'bar' | ... | string

// 자동완성 O, 문자열 리터럴 타입이 안 잡아먹힘
'foo' | 'bar' | ... | (string & {})

문자열 리터럴은 string의 서브셋이지만 string & {}의 서브셋은 아니기 때문!

이것저것 모음집

…

기타공유

npm 패키지 설치 시 유의사항

npm 공급망 공격이 매우 빈번하다고 한다.

패키지를 설치할 땐 패키지명과 대소문자까지 확인하기

Ref https://arstechnica.com/security/2024/11/javascript-developers-targeted-by-hundreds-of-malicious-code-libraries/

마무리

꼭 10월까진 한가하다가 11월부터 미친듯이 바쁘지!

꼭 일 때문이 아니더라도 꼭~ 모든 일들이 한꺼번에 몰아치는 시기

이럴 때일수록 중심을 잘 잡고 하나하나 해결해나가면

또 더 뿌듯하고 감동있을 연말이 기다리고 있겠지 🎄

어느덧 계절도 드디어 캐롤 들음직한 날씨가 되었다.