[Part3] 비즈니스 로직과 디자인 패턴 알아보기

[brparkk]

8장_리액트 데이터 관리
9장_리액트 설계 원칙 적용
10징_합성 패턴

위 주제에 맞는 혹은 나누고 싶은 주제에 대해 자유롭게 남겨주세요~!

[brparkk]

+) 추가 안건 : 추석 연휴에 스터디 일정 (10/5, 12일)

[brparkk]

5일 vs 12일 ?

1. 5일만 쉰다.
2. 12일만 쉰다.
3. 5일 , 12일 둘 다 쉰다.

[brparkk]

10/5 쉬고, 10/12일 부터 리팩토링 시작합니다~!

[jinsupark4255]

8장 ACL 사용법 부분에서 백엔드에서 오는 nullish한 값이나 undefined 필드를 처리할 때, transfomer 파일에서 처리를 하고 UI 담당 컴포넌트에서는 단순히 이를 사용한다고 하는데, 다른 분들께서는 어떻게 하시는지 궁금합니다.

• 저는 UI 부분에서 fallback 텍스트를 출력해주거나, get~~ 함수를 태워서 값이 null이거나 undefined이면 특정 fallback 값을 출력해줍니다.
• 백엔드에서 오는 필드를 최대한 프론트에 맞출 수 있도록 가이드를 해서 DTO를 굳이 변환을 시키지 않아서 transformer 역할의 파일이 없는 상태입니다. (백엔드가 맞추도록 한다고 예전 스터디 때 들었던 것으로 기억)
• 만약 transformer 역할의 파일을 관리를 하신다면 어떻게 폴더 및 파일 관리를 하시는지 궁금합니다.

[brparkk]

리액트 쿼리를 사용하지 않아도 fetch 용 함수를 별도의 훅으로 관리하시나요??
+) 리액트 쿼리로 훅 관리하실때 네이밍은 어떻게 지으시나요?
+) 리액트 쿼리의 이점이 뭐라고 생각하시나요?

[brparkk]

const getData
const getDataQuery = () => {쿼리키, 쿼리 함수 getData() 호출}
const useGetData = () => useQuery(getDataQuery())

[brparkk]

장점

• 서버사이드 prefetch할 때 getDataQuery 를 호출해서 사용한다.
• 컴포넌트에서는 useGetData 를 사용해서 호출한다.

[brparkk]

useGetUserProfileQuery.ts 안에서 getData, getDataQuery를 export 해서 사용.

[brparkk]

• get 요청 이후에 mutate 를 통해 일부데이터 업데이트가 필요할 때 queryClient에서 제공하는 메소드를 사용해서 쉽게 처리할 수 있음.(데이터 갱신)
• 상태 제공 (isLoading, isFetching 등.. state로 따로 관리하지 않아도 됨)
• 에러 핸들링 (중앙에서 관리가 가능하다.) + 실패/성공 여부에 따라 콜백 호출하는 것도 편리했음.

[brparkk]

어플리케이션 단에서 sse, 웹 소켓을 사용하는 경우에 에러 처리를 어떻게 하고 관리하는지?

[dkmqflx]

의존성 역전 원칙의 예시 중 하나로 API 호출 인터페이스도 적용될 수 있다고 생각합니다.
많이들 이 부분을 추상화해서 사용할 것이라 예상되는데요, 아래 예시 코드는 제가 추상화해서 사용하는 방법 중 하나입니다.
다른 분들은 API 호출을 어떤 방식으로 추상화해서 작성하는지 궁금합니다.

import { ApiError } from "../types/apiError";

export class ApiClient {
  private baseUrl: string;

  constructor(url: string) {
    this.baseUrl = url;
  }

  private buildUrl(
    endpoint: string,
    queryParams?: Record<string, string | number | boolean>
  ): string {
    const url = new URL(endpoint, this.baseUrl);

    if (queryParams) {
      Object.entries(queryParams).forEach(([key, value]) => {
        url.searchParams.append(key, value.toString());
      });
    }

    return url.toString();
  }

  private async request(
    method: string,
    endpoint: string,
    options?: RequestInit,
    body?: Record<string, unknown>,
    queryParams?: Record<string, string | number | boolean>
  ) {
    const url = this.buildUrl(endpoint, queryParams);

    try {
      const response = await fetch(url, {
        method,
        headers: {
          "Content-Type": "application/json",
          ...options?.headers,
        },
        body: body ? JSON.stringify(body) : undefined,
        ...options,
      });

      const result = await response.json();

      if (!response.ok) {
        throw new ApiError({
          code: result?.code || "HTTP_ERROR",
          message:
            result?.message ||
            `HTTP ${response.status}: ${response.statusText}`,
          data: result?.data,
          isSuccess: result?.isSuccess || false,
        });
      }

      return result;
    } catch (error) {
      console.warn("Error parsing JSON response:", error);
      throw new Error("Error parsing JSON response");
    }
  }

  public get(
    endpoint: string,
    queryParams?: Record<string, string | number | boolean>,
    options?: RequestInit
  ) {
    return this.request("GET", endpoint, options, undefined, queryParams);
  }

  public post(
    endpoint: string,
    body?: Record<string, unknown> | undefined,
    options?: RequestInit
  ) {
    return this.request("POST", endpoint, options, body);
  }

  public put(
    endpoint: string,
    body?: Record<string, unknown>,
    options?: RequestInit
  ) {
    return this.request("PUT", endpoint, options, body);
  }

  public delete(endpoint: string, options?: RequestInit) {
    return this.request("DELETE", endpoint, options);
  }
}