Portfolio

typescript “possibly undefined”을 해결하기 위해 여러 방법을 이용하고 있는데요 (예. &&, ?, !, as Type, 등) 근데 이렇게 계속 뒤죽박죽 섞여 사용하는게 맞는지?.. 모르겠습니다. 멘토님은 이거에 대한 어프로치가 어떤지 궁금합니다ㅠ

답변

상황에 맞게 다르게 처리해주는 것 같다.

예를 들어 0이나 공백 값이 의미가 있는 경우에는 그에 맞는 || 연산자를 사용한다.

멘토님께서 작성하신 글도 참고해보자. 다른 접근 법을 고민해보자.


function test(arg: unknown) {
  const argIsString = typeof arg === 'string';
  if (argIsString) {
		arg.substring(); // -> ts 버전 올라가면서 string으로 타입을 찾아줌
  }
}

type Animal = Dog | Bird;

type Dog = {
	name: string;
}

type Bird = {
  name: string;
	wingNum: number;
}

const animal: Animal = xx;

if ('wingNum' in animal) {
  animal // Bird
}

TypeScript 4.4에 추가된 기능

정말 좋은 기능들이 추가되어서 정리해본다. 위의 케이스는 기존 타입스크립트에서도 정상적으로 인식했다. 그런데 이렇게 typeof arg === "string"을 alias 하는 경우 인식을 못했었다. 그런데 타입스크립트 4.4에서는 자동으로 인식한다. 원래 아래와 같은 케이스를 해결하려면 타입가드 함수를 따로 선언해야했는데 이제는 자동으로 인식한다! 인덱스 서명이 뭐냐면 이런것이다. Array의 index는 number만 될 수 있다.

https://yrnana.dev/post/2021-08-28-typescript-4.4

타입스크립트 관련 추천 레포

GitHub - sindresorhus/type-fest: A collection of essential TypeScript types

A collection of essential TypeScript types. Contribute to sindresorhus/type-fest development by creating an account on GitHub.

https://github.com/sindresorhus/type-fest


Pick, Omit, Extract, Exclude, Required, ...

불필요한 내용이나 원하는 것만 거를 수 있는 방법

다크모드 설정 방법

Vercel + Action (배포 자동화) 추천한다.

React Query를 쓰면 비동기 처리를 더 쉽게할 수 있다.

Quick Start | TanStack Query Docs

This code snippet very briefly illustrates the 3 core concepts of React Query: If you're looking for a fully functioning example, please have a look at our simple codesandbox example These three concepts make up most of the core functionality of React Query.

https://tanstack.com/query/latest/docs/react/quick-start


const { data, isLoading, error } = useQuery({ 
  queryKey: ['todos'], 
  queryFn: getTodos 
})

const queryClient = new QueryClient({
  // queries와 mutation의 networkMode를 반드시 always로 변경
  // refetchOnFocus는 default를 false로 두는 것을 권장
  // retry: 0으로 두는 것을 권장
  defaultOptions: {
    queries: {
      networkMode: 'always',
    },
		// ....
  },
})

// suspense 옵션: https://tanstack.com/query/latest/docs/react/guides/suspense
// mutation: https://tanstack.com/query/latest/docs/react/guides/invalidations-from-mutations
// optimistic update: https://tanstack.com/query/latest/docs/react/guides/optimistic-updates
// infinite: https://tanstack.com/query/latest/docs/react/guides/infinite-queries

React Query에서 staleTime과 cacheTime의 차이

React Query의 lifecycle과 staleTime / cacheTime의 차이에 대해 이해하기

https://yrnana.dev/post/2021-04-10-react-query-staletime-cachetime

[커피챗] 7