January 2, 2024

240102(화)

🌱 성장일지 8.0

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?
성장하고 있는 것이 살아 있는 것이다.
생명의 유일한 증거는 성장이다!

⚛ (8.0)<완전 개편> 그 날의 키워드 중심으로 간단하게 정리하되 매일 꾸준히 작성할 수 있는 공간을 만들어보자.

Storybook Addon

스토리북은 다양한 애드온을 제공함으로써 개발자가 더욱 편리하게 스토리북을 사용할 수 있도록 도와준다.

./storybook/main.ts

이 파일은 스토리북의 설정 파일로 스토리 파일 경로, 애드온 등을 설정할 수 있다.

import type { StorybookConfig } from '@storybook/react-vite';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-onboarding',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
};

export default config;

./storybook/preview.ts

이 파일은 스토리북의 렌더링 설정 파일로 스토리북의 렌더링을 설정할 수 있다.

import type { Preview } from '@storybook/react';

const preview: Preview = {
  parameters: {
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;

React Query의 낙관적 업데이트

유저에게 보여줄 데이터를 서버에게 받아오는 동안 취할 수 있는 방법은 크게 2가지가 있다.

서버에게 데이터를 요청하고 응답을 받아온 후에 UI를 업데이트한다.(비관적 업데이트)

서버에게 데이터를 요청하는 동안 유저는 데이터를 받아올 때까지 기다려야 한다.
그 사이에 로딩 스피너 혹은 스켈레톤, 메시지 등을 보여줄 수 있다.

서버에게 데이터를 요청하기 전에 UI를 업데이트한다.(낙관적 업데이트)

서버에게 데이터를 요청하는 동안 유저는 데이터를 받아오기 전에도 UI를 보여줄 수 있다.
클라이언트 단에서 보여줘야할 데이터를 미리 업데이트하고 서버에게 데이터를 요청한다.
대표적으로 어떤 글의 좋아요 버튼을 눌렀을 때, 좋아요 버튼의 색상을 미리 변경하고 서버에게 좋아요 요청을 보내는 예시가 있다.

React Query는 어떤 데이터를 서버에 반영하기 전에 UI를 낙관적으로 업데이트할 수 있는 기능을 제공한다. 아래는 그 예시 코드이다.

const queryClient = useQueryClient();

const { mutate } = useMutation({
  mutationFn: updateTodo,
  // mutate 함수가 호출되면 다음과 같이 실행된다.
  onMutate: async newTodo => {
    // 진행 중인 쿼리를 취소한다.
    // (그래서 낙관적 업데이트를 덮어쓰지 않도록 한다.)
    await queryClient.cancelQueries({ queryKey: ['todos'] });

    // 이전값을 스냅샷으로 저장한다.
    const previousTodos = queryClient.getQueryData(['todos']);

    // 새로운 값을 낙관적으로 업데이트한다.
    queryClient.setQueryData(['todos'], old => [...old, newTodo]);

    // 스냅샷된 값을 포함하는 컨텍스트 객체를 반환한다.
    return { previousTodos };
  },
  // 만약 mutation이 실패하면,
  // onMutate에서 반환된 컨텍스트를 사용하여 롤백한다.
  onError: (err, newTodo, context) => {
    queryClient.setQueryData(['todos'], context.previousTodos);
    // 에러 toast를 띄우는 등의 작업을 할 수 있다.
  },
  // 에러나 성공 후에는 항상 쿼리를 다시 불러온다.
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ['todos'] });
  },
});

📝 회고

흐... 회사에서 적용한 것들을 빠르게 키워드 위주로 가져와서 정리하는데 이것도 쉽지 않네... 점점 이 패턴도 익숙해지겠지!!!

Jayden { do: smite }