Pandaman Blog

1. Default Query Function https://codesandbox.io/s/default-query-function-yeje-wyfbxm?file=/src/index.js Default Query Function 예제 - CodeSandbox Default Query Function 예제 by oyg0420 using axios, react, react-dom, react-query, react-scripts, stop-runaway-react-effects, styled-components codesandbox.io 동일한 쿼리 기능을 공유하고 쿼리 키를 사용하여 가져와야 할 항목을 식별할 수 있기를 원하는 경우 default query function 기능을 사용할 수 있다. 만약 리..

1. Pagination https://codesandbox.io/s/pagination-yeje-zcs5yh Pagination 예제 - CodeSandbox Pagination 예제 by oyg0420 using axios, isomorphic-unfetch, next, react, react-dom, react-query codesandbox.io React Query를 사용하면서 Pagination 구현을 어떻게 할 수 있을까? 사실 매우 간단하다. useQuery(["projects", page]) 단지 query key에 page 정보를 포함시킨다. page에 대한 데이터가 변경할 때마다 적용된 API를 fetch 할 것이다. 1.1. keepPreviousData 옵션 keepPrevious..

1. Query 상태 흐름 이해하기 https://codesandbox.io/s/react-query-sangtae-heureum-oyig4o react-query(상태 흐름) - CodeSandbox react-query(상태 흐름) by oyg0420 using axios, react, react-dom, react-query, react-scripts, styled-components, typescript codesandbox.io 해당 예제는 쿼리 상태 흐름을 이해하기 위한 예제이다. function usePosts() { return useQuery("posts", async () => { const { data } = await axios.get( "https://jsonplaceholder...

6. Exclude Exclude은 UnionType중에서 ExcludedMembers를 제외한 타입을 반환한다. 링크 즉 아래와 같다. type Person = { name: string; age: number; } type PersonExcludeName = Exclude; type PersonExcludeAge = Exclude; 한번 확인해보자. type Exclude = U extends E ? never : U; U extends E ? never : U 표현은 타입스크립트에서 Conditional Type 이라고 한다. U가 E를 extends 하고 있다면 never를 반환(생략)하고 아닐 겨우 타입 U를 반환한다. 7. Extract type Extract = T extends U ? T ..

Conditional Types Conditional Types은 조건에 따라서 타입 변수에 할당할 수 있는 타입을 결정할 수 있다. T extends U ? X : Y Conditional Type은 3항 연산자 구문을 사용하고 있다. T extends U 조건이 충족되면 타입 X가 되고, 그렇지 않으면 타입 Y가 된다. 한번 예제를 살펴보자. interface Animal { live(): void; } interface Dog extends Animal { woof(): void; } type Example1 = Dog extends Animal ? number : string; Dog 인터페이스는 Animal를 확장해서 생성한 타입이다. Example1를 확인해보면 Dog extends Anima..

Utility 타입에 대한 궁금증에 내부 코드를 보았고, 내부 코드를 보는 순간 아 잘 모르겠다. 라는 생각으로 Mapped types 이란 것을 공부하기로 했다. Mapped Types 자바스크립트에서 map 메서드는 배열 내의 모든 요소 각각에 대해 순회하며 새로운 배열을 반환한다. ['1', '2', '3'].map(value => Number(value)); // [1, 2, 3] map 메서드를 통해서 각 문자열을 숫자로 맵핑하여 새로운 배열을 반환했다. 타입스크립트의 mapped type도 위와 마찬가지로 타입을 순회하며 새로운 타입으로 변환하는것을 의미한다. index signature 인덱스 시그니처는 타입의 속성 이름을 잘 모르지만 값의 타입을 알 경우 사용된다. 링크 type Perso..

타입스크립트에서는 여러 유틸리티 타입을 제공한다. 이 유틸리티 타입은 Global 하게 사용가능하다. 이번 시간에는 유틸리티 타입의 종류와 왜 사용하는지? 어떻게 구현할 수 있는지 확인해 보려고 한다. 1. Partial 제네릭을 통해 넘겨받은 타입의 모든 속성을 optional로 변형해 반환하는 타입이다. 매우 간단하다. 링크 interface Person { name: string; age: number; } function introduce(person: Partial) { return `my name is ${person.name} and ${person.age} years old.` } introduce({ name: 'coo' }); introduce({ age: 33 }); i..

함수 목표 함수를 설명하는 타입을 작성하는 방법에 대해 알아보고, 실제로 어떻게 적용하면 효과적인지 알아보자. 호출 시그니쳐 타입스크립트의 함수 타입 문법을 호출 시그니처라고 부른다. 그렇다면 함수 타입 문법은 무엇일까? 우리가 흔히 사용하고 있다. 예를 들어 아래와 같이 sum이라는 함수가 있다고 가정하자. function sum(a: number, b: number) { return a + b; } 이걸 타입 문법으로 변경하면? 아래와 같이 표현할 수 있다. (a: number, b: number) => number; (a: number, b: number): number; 매우 쉽다. 화살표 함수와 매우 유사하다. 함수에 함수를 인수로 전달하거나, React에서는 컴포넌트의 props로 함수를 전달..