전체 글

[ 목차 ] 사용자에게 최신 데이터를 보여주려는 노력 useQuery useMutation queryClient.invalidQueries 사용자에게 최신 데이터를 보여주려는 노력 React-Query는 사용자에게 새로운 정보를 보여줄 수 있는 옵션을 제공합니다. 1. Remount 컴포넌트 또는 페이지를 다시 mount 했을 때, 새로운 데이터를 갱신합니다. refetchOnMount 옵션을 통해 설정할 수 있으며, default 값은 true입니다. 2. Window refocus 윈도우 창을 다시 focus 할 때, 새로운 데이터를 갱신합니다. refetchOnWindowFocus 옵션을 통해 설정할 수 있으며, default 값은 true입니다. 3. Network reconnect 네트워크가 다..

[ 목차 ] Query 상태 (Status) StaleTime과 CacheTime 정리 Query 상태 (status) 아래 다섯 가지 상태로 정의되어 있습니다. 1. fetching 2. fresh 3. stale 4. paused 5. inactive 1. fetching QueryFn을 이용해서 데이터를 요청하는 상태입니다. 2. fresh 새로운 데이터를 받은 상태입니다. default로 staleTime이 0으로 정의되어 있는데요. default일 때는, 순간적으로 fresh 상태로 유지됩니다. 3. stale 데이터의 상태가 최신이 아님을 뜻하는 상태입니다. 이 상태일 때는 특정 조건 (windowFocus, remount 등...) 이나 백그라운드 상황에서 QueryFn을 통해 새로운 데이터..

[ 목차 ] Introduction Mapped Type 사용하기 Pick 유틸타입 살펴보기 Introduction 매핑된 타입(Mapped Type)은 제네릭을 사용해서 다른 타입을 바탕으로 새로운 타입을 만드는 것을 의미합니다. 특징으로는, 1. 중복을 방지할 수 있고, 2. 다른 타입을 참조해서 사용하며, 3. 제네릭과 인덱스 시그니처를 사용한다는 것입니다. Mapped Type 사용하기 /** 예제1 **/ type StudyRoom { name: string; cost: string; availablePeople: number; startTime: Date; endTime: Date; } // StudyRoom 타입을 바탕으로 새로운 타입을 생성 type NewStudyRoom = { [K in..

[ 목차 ] Introduction 먼저 간단한 클래스 작성 생성자의 타입 표현하기 Introduction 리액트를 사용하면서 클래스를 거의 사용하지 않고, 함수 위주로 사용했었는데요. 그래서인지, 생성자 함수를 타입으로 표현하는 방식이 너무 생소하게 다가왔습니다. 몇 가지 시행착오를 통해, 알아낸 바를 정리하고자 합니다. 먼저 간단한 클래스 작성 class Person { constructor(private name: string, private age: number) {} getName() { return this.name; } getAge() { return this.age; } } const person = new Person("Rabbit", 10); person.getName(); // "Ra..

[ 목차 ] TS에서의 keyof 연산자 TS에서의 keyof 연산자 자바스크립트에서는 keyof 연산자가 존재하지 않습니다. keyof 연산자는 타입의 키 값들을 유니온 타입으로 반환해줍니다. keyof 연산자는 객체 타입에 사용할 수 있습니다. interface Rabbit { name: string; age: number; place: string; move: () => void; } type KeyofRabbit = keyof Rabbit; // 테스트 const rabbit1: KeyofRabbit = "age"; // ok const rabbit2: KeyofRabbit = "food"; // error!

[ 목차 ] JS에서의 typeof 연산자 TS에서의 typeof 연산자 JS에서의 typeof 연산자 자바스크립트에서도 typeof 연산자가 존재합니다. 어떤 값의 type을 string 형태로 반환하는 연산자입니다. const a = typeof 1; // "number" const b = typeof "str"; // "string" const c = typeof false; // "boolean" const d = typeof {}; // "object" const e = typeof []; // "object" const f = typeof function () {}; // "function" const g = typeof null; // "object" -> 주의! const h = typeo..

[ 목차 ] Introduction 제네릭 맛보기 제네릭 종류 - 함수, 인터페이스, 클래스 제네릭 제약 조건 (constraints) 제네릭 디폴트 파라미터 Introduction 타입스크립트에서 제네릭은 빠질 수 없는 개념이 되었습니다. 유틸함수도 제네릭을 사용하고 있고, API 인터페이스를 작성하거나 함수를 사용할 때도 많이 사용하고 있습니다. 제네릭에 대해서 타입을 위한 함수와 같다는 표현을 사용하는 것도 보았는데요. 제네릭은 타입에 대한 중복을 제거해줄 수 있기 때문에 이런 표현을 사용한 것 같습니다. 제네릭 맛보기 타입스크립트에서 제네릭은 함수, 인터페이스, 클래스 등에 사용할 수 있습니다. 가장 일반적인 방법은 함수에 제네릭을 사용하는 것일 겁니다. function age(value: num..

React-Query는 useInfiniteQuery hook을 제공합니다. 문서에도 해당 hook에 대한 API 명세와 사용 방법이 소개되고 있는데요. 공식 문서의 설명이 조금 부족해서 그런지는 모르겠는데, 이해가 되지 않는 부분이 있었고 삽질도 하였습니다. 페이지네이션을 구현한 코드를 정리하였습니다. 비동기 통신 라이브러리로는 axios를 사용하였습니다. // 페이징을 구현한 컴포넌트 import axios from "axios"; import { useInfiniteQuery } from "react-query"; interface PostData { body: string; id: number; title: string; userId: number; } function Test1() { const..

( 23. 07. 04 추가 수정 ) Recoil 0.7.6 버전 이후로 환경변수를 추가하면, Duplicate atom key 이슈를 해결할 수 있습니다. .env* 파일에 아래 환경 변수를 추가해주시면 해결됩니다 ! RECOIL_DUPLICATE_ATOM_KEY_CHECKING_ENABLED=false (아래 부분으로도 해결가능하겠지만, Deprecated된 해결방법이라고 보시면 됩니다.) Next.js 개발환경에서 Recoil을 사용하다 보면 Next.js 서버에 다음과 같은 에러가 콘솔로 찍히는 것을 볼 수 있습니다. Duplicate atom key "KEY 이름". This is a FATAL ERROR in production. But it is safe to ignore this warni..

프로젝트를 만들고 개발을 진행하다 보면, 파일이 점진적으로 늘어나면서, 폴더 구조를 어떻게 잡아야 하는 지에 대한 고민이 생기곤 합니다. 작은 프로젝트면 폴더 구조를 바로바로 바꿀 수도 있지만, 규모가 어느 정도 커지면 폴더 구조를 변경하기 어렵게 됩니다. 여러 프로젝트를 진행하면서, 저는 나름대로 폴더 구조를 다음과 같이 구성해야 겠다고 결정을 했습니다. 아래는 VSCODE 에디터에 캡쳐한 사진입니다. - apis - components - constants - containers - fixtures - hooks - interfaces - pages - public - slices - styles - utils apis API 들을 모아 놓은 폴더입니다. 타입스크립트를 사용한다면, *.ts 형태의 ..