[React] TanStack Query 캐시 레벨과 옵저버 레벨

동일한 쿼리 키를 사용하는 useQuery 를 여러 컴포넌트에서 사용할 수 있습니다. 이런 경우 보통 커스텀 훅으로 구현하여 여러 컴포넌트에서 사용합니다. 캐시 레벨 (Cache level)각각의 쿼리 키에 대해서, 캐시 엔트리는 오직 한 개만 존재합니다. 즉, 동일한 쿼리 키를 가진 useQuery 를 여러 곳에서 사용해도 캐시 엔트리는 하나입니다. 이 캐시 엔트리에 대응하는 레벨을 캐시 레벨이라고 합니다. 캐시 레벨에서 작동하는 useQuery 의 옵션으로는 staleTime 과 gcTime 이 있습니다. 캐시 엔트리는 하나만 있기 때문에, 해당 옵션들은 엔트리가 오래되는 시점 또는 가비지 컬렉션이 될 수 있는 시점을 특정합니다.  옵저버 레벨 (On observer level)React Query의..

• format_list_bulleted React
• · 2025. 3. 2.
• textsms

[React] TanStack Query v5 마이그레이션 준비

React Query를 v3에서 v5로 마이그레이션하기 위해 React Query의 전반적인 개념들을 깊이 있게 학습했고 기존 버전과 호환되지 않는 변경점들을 파악했습니다. Installv3에서는 React Query, v5에서는 TanStack Query라고 표현하지만 편의상 React Query라고 통일합니다.yarn remove react-queryyarn add @tanstack/react-query Important DefaultsReact Query를 사용하여 개발할 때 알아둘 필요가 있는 주요 기본값들이 있습니다. 이 값들은 React Query의 기본적인 동작 원리와 관련이 있습니다.staleTimegcTimeretrystructuralSharingstaleTimestale 상태란 쿼리가 ..

• format_list_bulleted React
• · 2025. 2. 26.
• textsms

[TS] 리액트 이벤트, 제네릭 컴포넌트, HTMLAttributes

리액트 이벤트리액트는 가상 DOM을 다루면서 이벤트도 별도로 관리한다. onclick , onchange 같이 DOM 엘리먼트에 등록되는 이벤트 리스너와 달리, 리액트 컴포넌트(노드)에 등록되는 이벤트 리스너는 onClick , onChange 처럼 카멜 케이스로 표기한다.리액트 이벤트는 브라우저의 고유한 이벤트와 완전히 동일하게 동작하지 않는다. 리액트 이벤트 핸들러는 이벤트 버블링 단계에서 호출된다.리액트는 브라우저 이벤트를 합성한 합성 이벤트(SyntheticEvent)를 제공한다.type EventHandler = ( e: Event) => void | null;type ChangeEventHandler = EventHandler>;const eventHandler1: GlobalEventHan..

• format_list_bulleted TypeScript
• · 2025. 2. 12.
• textsms

[TS] DetailedHTMLProps, ComponentPropsWithoutRef

리액트에서 HTML 태그의 속성 타입을 활용하는 대표적인 2가지 방법은 DetailedHTMLProps 와 ComponentWithoutRef 타입을 활용하는 것이다.DetailedHTMLPropsDetailedHTMLProps 타입을 활용하면 쉽게 HTML 태그 속성과 호환되는 타입을 선언할 수 있다. ButtonProps 의 onClick 타입은 실제 HTML button 태그의 onClick 이벤트 핸들러 타입과 동일하다.type NativeButtonProps = React.DetailedHTMLProps, HTMLButtonElement>;interface ButtonProps { onClick?: NativeButtonProps['onClick'];};ComponentPropsWithout..

• format_list_bulleted TypeScript
• · 2025. 2. 11.
• textsms

[TS] Superstruct

API 응답 값의 타입이 string 이어야 하는데 number 가 들어오는 것과 같이 잘못된 타입이 전달될 수 있다. 그러나 타입스크립트는 정적 검사 도구로 런타임에서 발생하는 오류는 찾아낼 수 없다. 런타임에 API 응답의 타입 오류를 방지하려면 Superstruct 같은 라이브러리를 사용하면 된다.Superstruct은 런타임에서의 데이터 유효성 검사를 통해 개발자와 사용자에게 자세한 런타임 에러를 보여주기 위해 고안되었다. 이를 사용하면 인터페이스 정의와 자바스크립트 데이터의 유효성 검사를 쉽게 할 수 있다.사용법assert : 유효하지 않을 경우 에러를 던진다.is : 유효성 검사 결과에 따른 boolean 값을 반환한다.validate : [error, data] 형식의 타입을 반환한다. 유효..

• format_list_bulleted TypeScript
• · 2025. 2. 4.
• textsms

[TS] 컴파일러 구조

컴파일러는 하나의 프로그램으로 이를 구현한 소스 파일이 존재한다. 타입스크립트 공식 깃허브에는 compiler라는 별도의 폴더로 구성된 타입스크립트 컴파일가 있다.해당 폴더는 타입스크립트 컴파일러가 동작하는 데 중요한 몇 가지 구성 요소를 가지고 있다. 주요 구성 요소로는 스캐너, 파서, 바인더, 체커, 이미터가 있다.타입스크립트 컴파일러는 다섯 단계를 거쳐 타입 검사와 자바스크립트 소스 변환을 수행한다.Program타입스크립트 컴파일러는 tsc 명령어로 실행된다. 컴파일러는 tsconfig.json에 명시된 컴파일 옵션을 기반으로 컴파일을 수행한다.가장 먼저 전체적인 컴파일 과정을 관리하는 프로그램 객체(인스턴스)가 생성된다. 이 객체는 컴파일할 소스 파일과 소스 파일 내에서 임포트된 파일을 불러온다...

• format_list_bulleted TypeScript
• · 2025. 2. 1.
• textsms