11월 4주차 기록

November 30, 2024 • ☕️ 4 min read

weekly

배워가기

react-query의 queryKey 배열에

dependency로 배열이 들어간다면?!

React Query는 queryKey 배열의 값 비교를 통해 쿼리를 다시 호출할지 여부를 판단한다. 기본적으로, React Query는 queryKey 배열의 각 요소를 얕은 비교(===)를 사용하여 변경 여부를 감지한다. 이 때문에 배열의 참조값은 바뀌지만 배열의 내용이 동일하다면 React Query는 쿼리를 재호출하지 않는다.

진짜 열받는다!

vite 프로젝트의 tsconfig references

Copy

"references": [
  { "path": "./tsconfig.app.json" },
  { "path": "./tsconfig.node.json" }
]

Vite는 클라이언트(app)와 서버(node) 설정을 별도로 관리하기 위해 tsconfig.json에서 두 개의 참조를 추가하는 구조를 기본으로 채택한다.

tsconfig.app.json: 클라이언트 측 코드에 특화된 설정
tsconfig.node.json: 서버 측 코드(또는 Node.js 환경)에서 동작하는 설정

typescript-eslint

eslint의 기본 자바스크립트 파서는 타입스크립트 문법을 네이티브로 읽지 못하기 때문에, 타입스크립트의 타입 정보에 접근할 수 없다.

typescript-eslint 는 eslint가 타입스크립트 코드에서 동작할 수 있게 해준다.

Ref https://typescript-eslint.io/

eslint ver.9 올리지 마세요

eslint v.9부터는 갑자기 flat config를 사용하는데, 이 방식의 주요 특징은 다음과 같다.

extends 제거
- extends 대신, 플러그인이나 규칙을 명시적으로 가져와야 한다.
- 이는 설정을 더 명확하고 유연하게 관리할 수 있도록 설계되었다.
ES Modules 지원
- eslint.config.js는 ES Modules 형식으로 작성된다 (import/export).

근데 여러모로 진짜 짜증난다! 다음과 같은 이슈들 파헤치다가 그냥 v.8로 낮췄다.

plugins 명시 방법이 배열에서 객체로 바뀜
root: true 못 씀(flat한 구조)
eslint.config.js 가 기본 파일 형식이 됨
extends 못 씀
eslint 돌릴 때 --ext 방식 못 씀

Ref

CSS `rgb()` 함수형 표기: RGB 색 구문

Copy

/* 절대 값 */
rgb(255 255 255)
rgb(255 255 255 / 50%)

/* 상대 값 */
rgb(from green r g b / 0.5)
rgb(from #0000FF calc(r + 40) calc(g + 40) b)
rgb(from hwb(120deg 10% 20%) r g calc(b + 200))

/* 구형 'rgba()' 별칭 */
rgba(255 255 255 / 50%)

/* 구형 구문 */
rgb(255, 255, 255)
rgb(255, 255, 255, 50%)