6월 첫주차 기록

배워가기

nest.js @UsePipes

• Pipe는 @Injectable 데코레이터와 함께 사용되며, PipeTransform 인터페이스를 구현한다.
• Pipe의 두 가지 유스케이스:
  • 변환: input data를 원하는 form으로 변환한다
  • 유효성 검사: input data를 평가, 유효하다면 그대로 넘겨주고, 그렇지 않다면 예외를 던진다
• controller에 @UsePipes 데코레이터를 사용하면 유효성 검증 pipe를 context 간에 재사용 가능하도록 만든다.
• 즉 다음과 같이 ValidationPipe를 갖다 쓸 수 있다
  Copy

  @UsePipes(new JoiValidationPipe(syncRepositorySchema))

Ref https://docs.nestjs.com/pipes

타입 추론 에러

The inferred type of "X" cannot be named without a reference to "Y". This is likely not portable. A type annotation is necessary

-> X의 타입을 추론하려고 할 때, 그 타입이 Y와 관련되어 있어서, Y가 어떤 타입인지 명시적으로 알려주지 않으면 X의 타입을 추론할 수 없다는 의미

CSS transform 불편한 점 ☹️

translate, scale 등 여러 속성을 같이 사용하는 경우, 하나의 속성만 값을 변경하고 싶더라도 전부 다 작성해줘야 한다

.target {
  transform: translateX(50%) rotate(30deg) scale(1.2);
}

.target:hover {
  transform: translateX(50%) rotate(30deg) scale(2); /* Only the value of scale() changed */
}

Ref https://web.dev/articles/css-individual-transform-properties?hl=ko

타입스크립트의 strict mode

프로그램에 더 정확하고 엄격한 타이핑을 요구한다. 다음 타입 체크를 포함한다.

• noImplicitAny - 함수의 매개변수와 값에 타입이 지정되지 않았을 때 에러 발생
• strictNullChecks - 잠재적으로 null이 될 수 있는 값들에 접근에 대해 엄격하게 확인
• strictFunctionTypes - 함수의 매개변수 타입을 더 명확하게 검사
• strictBindCallApply - call, bind, 그리고 apply가 정확한 매개변수와 함께 호출되었는지 검사
• strictPropertyInitialization - 클래스 프로퍼티가 생성자에 사용되지 않았을 때 에러를 발생
• noImplicitThis - this 키워드가 무엇을 가리키는지 명확하지 않을 때 에러 발생
• alwaysStrict - 컴파일 후 생성된 자바스크립트 파일이 strict mode를 사용하도록 하는 옵션

Ref

• https://velog.io/@hailieejkim/TypeScript-tsconfig.json-의-엄격한-타입-체킹-옵션-Strict-Type-Checking-Options
• https://www.typescriptlang.org/tsconfig/

React-Testing-Library의 fireEvent vs userEvent

• fireEvent

  • userEvent보다 빠르지만 사용자의 실제 동작을 정확히 재현하지는 않는다.

• userEvent

  • 사용자의 상호작용을 더 잘 반영한다. ex) 클릭 시 focus이벤트 발생
  • RTL에서 제공하는 더 높은 수준의 API로 docs에서도 더 권장한다.

크롬에서 tab 옮기기

크롬 브라우저에서 tab이나 tabGroup의 위치를 변경할 때는 chrome.tabs.move()와 chrome.tabGroups.move()를 사용할 수 있다.

이때 어떤 위치로 이동할지 index를 지정할 수 있다.

하지만 해당 위치에 pinned(탭 고정) 되어 있는 탭이 존재하는 경우 에러가 발생한다. (알아서 다음 인덱스에 넣어주지 않는다.)

pinned 된 탭은 항상 0번 index부터 시작하므로 tabs를 순회하면서 pinned를 filter 하는 것 만으로도 이동 가능한 index를 가져올 수 있다.

Regex의 g 플래그

g 플래그를 포함한 regex.test는 실행 될 때마다 lastIndex를 갱신하기 때문에, 반복 실행할 경우 같은 결과값을 보장하지 않는다.

const regex = /a/g 

regex.lastIndex // 0
regex.test('a') // true
regex.lastIndex // 1
regex.test('a') // false
regex.lastIndex // 0
regex.test('a') // true 
regex.lastIndex // 1

리액트 컴포넌트 내에서 regex.test를 사용하면, 컴포넌트 리렌더 횟수에 따라 전혀 다른 동작을 하기 때문에 주의해야 한다.

이를 예방하기 위해 RegExp.test 대신 String.match, String.search를 사용할 수 있다.

이것저것 모음집

• typeorm upsert()의 반환값 identifiers - insert된 entity의 id 목록을 반환한다
• 타입스크립트 InstanceType<T> - T 의 생성자 타입(Ref)
• webview_url에 사용하는 url은 encodeURIComponent로 한번 변환해줘야 한다. 그런데 만약 query params에 한글을 사용하게 된다면, 한번 더 encodeURIComponent를 수행해야 한다.

기타공유

Speculation Rules API

Chrome에서, 향후 탐색을 미리 가져오거나 사전 렌더링하여 탐색 성능을 개선하는 데 사용한다

문서 규칙을 사용하여 자동 링크 찾기 기능을 사용할 수 있는 새로운 옵션을 제공한다. where 조건에 따라 문서 자체에서 URL을 가져오는 방식으로 작동한다. 이는 링크 자체를 기반으로 할 수 있다.

Ref Speculation Rules API

CLI에서 github copilot 사용하기

git copilot explain "..."

😲👍

GraphQL 사용 실패담(?)

• 인증, 인가 구현 시 모든 필드가 필요한 문제
• 무거운 쿼리
• 쿼리 parsing 문제
• 성능 관련 N+1 문제
• 비즈니스 로직과 변환 레이어의 커플링

Ref https://bessey.dev/blog/2024/05/24/why-im-over-graphql/

Apple의 메모앱으로 블로그 만들기

메모앱에 있는 마크다운 내용들을 그대로 정적 웹 호스팅이 가능한 형태로 옮겨주나보다 🙃

역시 세상은 아이디어 대결

대시보드에서 analytics도 제공해줘서 좋아보인다.

Ref https://quotion.co/

마무리

이번주도 드라이브 🚗 알차게 즐기고, 짝꿍이 생일쇼핑도 다녀오고, 이것저것 공부도 하고 알찬 한 주 😋