NextJS로 CRUD 마스터하기

웹 개발에서 CRUD 작업은 기본 구성 요소이자 데이터 관리에 중요합니다. 단순한 웹사이트부터 복잡한 기업 솔루션까지 거의 모든 애플리케이션에 어디에나 존재합니다.

NestJS Boilerplate 사용자는 이미 리소스와 해당 속성을 자동으로 생성할 수 있는 강력한 새 도구인 CLI를 평가하고 사용할 수 있었습니다. 이 도구를 사용하면 코드 한 줄도 수동으로 작성하지 않고도 모든 CRUD 작업을 수행하고 필요한 필드를 추가할 수 있습니다. 한편, 우리가 반복해서 발표한 것처럼 BC Boilerplates 생태계에는 완전한 기능을 제공하기 위해 완벽하게 호환되는 Extensive-React-Boilerplate가 포함되어 있습니다(원칙적으로는 완전히 독립적인 솔루션이 될 수 있음). 이제 프런트엔드 관점에서 CRUD 작업을 살펴보겠습니다.

서버 측 렌더링 기능을 갖춘 React 프레임워크인 Next.js에서는 성능, SEO 및 개발자 경험을 향상시키는 기능을 통해 이러한 작업을 효율적으로 관리할 수 있습니다. 이전에 우리는 NextJS 프로젝트를 시작하는 효과적인 방법에 대한 기사를 게시했으며 이제 더 나아가 Next.js에서 API 작업의 세부 사항과 뉘앙스를 분석하고 싶습니다.

아시다시피 CRUD는 생성(Create), 읽기(Read), 업데이트(Update), 삭제(Delete)를 의미합니다. 이 개념은 모든 데이터에 대해 수행할 수 있는 기본 작업을 나타냅니다. 사용자에 대한 정보 검색과 함께 사용자 추가, 편집, 삭제와 같은 기능이 구현되는 관리 패널 사용자의 예를 사용하여 CRUD 작업 작업을 고려해 보겠습니다. 아래에서 설명하는 사용자 정의 React 후크는 React 쿼리에서 데이터 처리, 페이지 매김, 오류 관리 등을 처리하며 이미 Extensive-React-Boilerplate에 통합되어 있습니다. 당연히 이 상용구를 직접 활용할 수 있습니다. 다음 섹션에서는 이러한 기능 구현에 대한 통찰력을 공유하겠습니다.

작업 생성

사용 사례: 데이터를 제출하여 새 리소스를 생성합니다(예: 사용자 등록, 새 제품 추가).
구현: 양식에서 데이터를 수집하고, 서버에 POST 요청을 보내고, 응답을 처리하고, 이에 따라 UI를 업데이트합니다.

예를 살펴보겠습니다. API에 대한 POST 요청이 새 사용자 생성에 통합되었습니다. 아래 코드 조각에서는 usePostUserService 후크가 이 논리를 캡슐화하는 데 사용됩니다. 요청 및 응답 유형을 정의하여 새 사용자를 생성하기 위한 데이터 구조를 지정했지만 여기서는 집중할 수 있도록 이 부분을 생략합니다. Extensive-React-Boilerplate 저장소에서 더 자세한 정보나 더 완전한 그림을 볼 수 있습니다. 왜냐하면 이 코드와 다음의 모든 코드 스니펫이 거기에 있기 때문입니다.
따라서 useFetch 후크를 사용하여 POST 요청을 보내는 사용자 정의 후크 usePostUserService를 생성하겠습니다. 사용자 데이터를 입력으로 받아 API로 보냅니다.

function usePostUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserPostRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users`, {
        method: "POST",
        body: JSON.stringify(data),
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UserPostResponse>);
    },
    [fetch]
  );
}

wrapperFetchJsonResponse 함수는 이 문서의 뒷부분에서 "오류 처리"에 대해 살펴보겠습니다.

읽기 작업

사용 사례: 리소스 목록 또는 단일 리소스를 가져오고 표시합니다(예: 사용자 프로필 및 제품 목록 가져오기).
구현: GET 요청을 보내 데이터를 가져오고, 로드 및 오류 상태를 처리하고, UI에서 데이터를 렌더링합니다.

이 예에서 데이터를 읽는 작업에는 사용자 데이터를 가져오기 위해 API에 GET 요청을 하는 작업이 포함됩니다. 요청(UsersRequest)과 응답 유형(UsersResponse)을 정의한 후 페이지 매기기, 필터를 사용하여 모든 사용자를 가져오고 ID별로 단일 사용자를 정렬하거나 가져오는 작업이 포함될 수 있습니다.
사용자 정의 useGetUsersService 후크에서 모든 사용자를 가져오기하기 위해 페이지 매김, 필터 및 정렬을 위한 쿼리 매개변수와 함께 GET 요청을 보냅니다.

function useGetUsersService() {
  const fetch = useFetch();

  return useCallback(
    (data: UsersRequest, requestConfig?: RequestConfigType) => {
      const requestUrl = new URL(`${API_URL}/v1/users`);
      requestUrl.searchParams.append("page", data.page.toString());
      requestUrl.searchParams.append("limit", data.limit.toString());
      if (data.filters) {
        requestUrl.searchParams.append("filters", JSON.stringify(data.filters));
      }
      if (data.sort) {
        requestUrl.searchParams.append("sort", JSON.stringify(data.sort));
      }

      return fetch(requestUrl, {
        method: "GET",
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UsersResponse>);
    },
    [fetch]
  );
}

단일 사용자를 가져오는 경우 useGetUserService 후크는 GET 요청을 보내 ID별로 사용자를 가져옵니다.

function useGetUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users/${data.id}`, {
        method: "GET",
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UserResponse>);
    },
    [fetch]
  );
}

업데이트 작업

사용 사례: 기존 리소스 편집(예: 사용자 정보 업데이트, 블로그 게시물 편집)
구현: 업데이트된 데이터를 수집하고, 서버에 PUT 또는 PATCH 요청을 보내고, 응답을 처리하고, UI를 업데이트합니다.

업데이트된 사용자 데이터로 API에 PATCH 요청을 보내는 기존 사용자 업데이트를 수행해 보겠습니다. 이를 위해 사용자 정의 usePatchUserService 후크에서 요청 UserPatchRequest 및 응답 유형 UserPatchResponse:
를 정의한 후 사용자 ID와 업데이트된 데이터가 포함된 PATCH 요청을 보냅니다.

function usePatchUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserPatchRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users/${data.id}`, {
        method: "PATCH",
        body: JSON.stringify(data.data),
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UserPatchResponse>);
    },
    [fetch]
  );
}

참고: 부분 데이터 업데이트에는 PUT 대신 PATCH를 사용하는 것이 더 고급인 반면, PUT는 일반적으로 전체 리소스 업데이트에 사용됩니다.

삭제 작업

사용 사례: 리소스 제거(예: 사용자 삭제 또는 목록에서 항목 제거)
구현: 서버에 DELETE 요청을 보내고, 응답을 처리하고, 제거를 반영하도록 UI를 업데이트합니다.

다음 예에서 사용자 삭제에는 사용자 ID와 함께 API에 DELETE 요청을 보내는 작업이 포함됩니다. useDeleteUsersService 후크에 요청(UsersDeleteRequest)과 응답 유형(UsersDeleteResponse)을 정의한 후 ID별로 사용자를 삭제하기 위한 DELETE 요청이 전송됩니다.

function usePostUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserPostRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users`, {
        method: "POST",
        body: JSON.stringify(data),
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UserPostResponse>);
    },
    [fetch]
  );
}

이러한 후크는 HTTP 요청 생성 및 응답 처리의 복잡성을 추상화합니다. 이러한 접근 방식을 사용하면 데이터 가져오기 논리가 캡슐화되어 구성 요소 전체에서 재사용 가능하므로 깔끔하고 유지 관리 가능한 코드베이스가 보장됩니다.

Next.js에서 데이터 검색

자, 우리는 CRUD 작업을 처리하는 예를 다루었고 Next.js가 제공하는 데이터를 얻는 방법을 자세히 살펴보겠습니다. Next.js는 프레임워크로서 React에 기능과 최적화를 추가하기 때문입니다. Next.js는 CSR(클라이언트 측 렌더링)을 넘어 SSR(서버 측 렌더링), SSG(정적 사이트 생성), 내장 API 경로 및 하이브리드 렌더링이 가능합니다. 그럼 Next.js와 React에서 데이터를 검색할 때의 공통점과 차이점에 대해 논의해 보겠습니다.

React 앱이 순전히 클라이언트측이므로 초기 페이지 로드 후 클라이언트에서 데이터 가져오기가 발생합니다. 페이지가 로드될 때마다 데이터를 가져와야 하는 동적 페이지의 경우

SSR을 사용하는 것이 더 적합합니다. 이 경우 요청 시 서버에서 데이터를 가져옵니다. 데이터가 자주 변경되지 않는 정적 페이지에 적합한 SSG의 경우 빌드 타임에 데이터를 가져옵니다. 따라서 getStaticProps 메소드는
빌드 시 데이터를 가져오는 데 도움이 됩니다(SSG). 동적 경로와 빌드 시 가져온 데이터를 기반으로 페이지를 사전 렌더링해야 하는 경우 getStaticPaths 메서드를 사용하면 이를 수행할 수 있습니다. 빌드 시 동적 경로를 생성하기 위해 getStaticProps와 함께 사용됩니다. Next 14부터는 이러한 메서드 없이 구성 요소에서 직접 요청할 수 있어 더욱 "React 경험"이 제공된다는 점에 유의해야 합니다.

useQuery를 사용한 클라이언트 측 데이터 가져오기는 클라이언트 측에서 데이터를 가져와야 하는 대화형 구성 요소에 사용할 수 있으며, 초기 상태는 서버 측에서 가져온 데이터에서 수화됩니다. 자주 변경되는 데이터를 가져오거나 클라이언트 측 상호 작용을 추가하는 경우 useSWR 전략이 유용합니다. 캐싱 및 재검증을 통해 클라이언트 측 데이터를 가져오기 위한 React 후크입니다. 일반적으로 초기 페이지 로드 후에 클라이언트 측에서 데이터를 가져올 수 있습니다. 그럼에도 불구하고 빌드 시 또는 SSR용 서버에서 데이터를 가져오지 않지만 필요할 때 유효성을 다시 검사하고 새 데이터를 가져올 수 있습니다.

위 방법에 대한 정보를 요약하기 위해 Next.js의 다양한 데이터 가져오기 방법에 대한 포괄적인 개요를 제공하는 표를 살펴보고 각각의 타이밍과 사용 사례를 강조할 수 있습니다.

Method	Data Fetching	Timing	Use Case
getStaticPaths	Static Site Generation (SSG)	At build time	Pre-render pages for dynamic routes based on data available at build time.
getStaticProps	Static Site Generation (SSG)	At build time	Pre-render pages with static content at build time. Ideal for content that doesn't change frequently.
getServerSideProps	Server-Side Rendering (SSR)	On each request	Fetch data on the server for each request, providing up-to-date content. Ideal for dynamic content that changes frequently.
useQuery	Client-Side Rendering (CSR)	After the initial page load	Fetch initial data server-side, hydrate, reduce redundant network requests, Background Refetching.
useSWR	Client-Side Rendering (CSR)	After the initial page load	Fetch and revalidate data on the client-side, suitable for frequently changing data.

Next.js와 함께 React 쿼리 사용

React 쿼리는 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 위한 후크를 제공하므로 React 및 Next.js 애플리케이션 모두에서 데이터를 처리하기 위한 훌륭한 도구입니다. 사용의 주요 이점은 다음과 같습니다.

• 효율적인 데이터 가져오기: 캐싱 및 백그라운드 데이터 동기화를 처리하여 중복 네트워크 요청을 줄입니다.
• 자동 다시 가져오기: 데이터가 오래되면 백그라운드에서 자동으로 다시 가져오므로 UI에 항상 최신 정보가 표시됩니다.
• 통합 오류 처리: 오류 처리 및 재시도 지원 기능이 내장되어 있어 네트워크 장애 및 서버 오류를 더 쉽게 관리할 수 있습니다.
• 낙관적 업데이트: useMutation 후크는 서버 요청이 실패할 경우 낙관적 UI 변경 사항과 롤백 논리를 모두 처리할 수 있는 쉬운 방법을 제공하여 낙관적 업데이트를 제공합니다.
• Next.js와의 통합 용이성: getStaticProps 또는 getServerSideProps(필요한 경우)와 같은 다른 Next.js 데이터 가져오기 메소드와 원활하게 통합될 수 있습니다.
• 쿼리 및 변형 검사: ReactQueryDevtools 도구는 모든 활성 쿼리 및 변형의 상태, 데이터, 오류 및 기타 세부 정보를 볼 수 있는 가능성을 제공하고 애플리케이션이 실행될 때 쿼리 상태 업데이트를 실시간으로 관찰할 수 있습니다. .

쿼리클라이언트 제공자

QueryClientProvider는 React 구성 요소 트리에 QueryClient 인스턴스를 제공하는 컨텍스트 공급자 구성 요소입니다. 이 인스턴스는 useQuery와 같은 후크를 사용하는 데 필요합니다. 이를 설정하려면 구성 요소 트리의 루트에 배치하고 재시도 동작, 캐시 시간 등과 같은 쿼리 및 변형에 대한 전역 설정을 구성해야 합니다. 그런 다음 React Query 클라이언트를 초기화하고 애플리케이션 전체에서 사용할 수 있도록 합니다.

function usePostUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserPostRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users`, {
        method: "POST",
        body: JSON.stringify(data),
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UserPostResponse>);
    },
    [fetch]
  );
}

그렇다면 왜 프로젝트에 추가해야 할까요? 다음과 같은 경우에 유익합니다.

• 모든 쿼리와 변형에 대한 중앙 집중식 구성.
• 기존 React 애플리케이션에 쉽게 설정하고 통합할 수 있습니다.
• 캐싱, 백그라운드 다시 가져오기, 쿼리 무효화 등의 기능을 활성화합니다.

React 쿼리 개발 도구

React Query가 제공하는 또 다른 중요한 기능은 React Query 상태를 검사하고 디버깅하기 위한 개발 도구인 React Query Devtools입니다. 애플리케이션에 쉽게 추가하고 브라우저 확장을 통해 액세스하거나 이전 예와 같은 구성 요소로 액세스할 수 있습니다.
개발 중에 React Query Devtools를 사용하여 개별 쿼리 및 변형을 검사하고, 특정 쿼리가 프리패치되는 이유를 이해하고 쿼리 캐시 상태를 모니터링하며, 시간이 지남에 따라 어떻게 발전하는지 확인할 수 있습니다.

페이지 매김 및 무한 스크롤

라이브러리 기능을 사용하여 페이지 매김 제어나 무한 스크롤을 구현하려면 useInfiniteQuery가 가장 적합합니다. 먼저, React Query에서 쿼리를 캐싱하고 검색하기 위한 고유 키를 생성합니다. 여기서 by 메소드는 정렬 및 필터링 옵션을 기반으로 고유한 키를 생성합니다.

function usePostUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserPostRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users`, {
        method: "POST",
        body: JSON.stringify(data),
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UserPostResponse>);
    },
    [fetch]
  );
}

이를 위해 React Query의 useInfiniteQuery 함수를 사용하고 위의 읽기 작업 섹션에서 설명한 useGetUsersService 후크를 사용합니다.

function useGetUsersService() {
  const fetch = useFetch();

  return useCallback(
    (data: UsersRequest, requestConfig?: RequestConfigType) => {
      const requestUrl = new URL(`${API_URL}/v1/users`);
      requestUrl.searchParams.append("page", data.page.toString());
      requestUrl.searchParams.append("limit", data.limit.toString());
      if (data.filters) {
        requestUrl.searchParams.append("filters", JSON.stringify(data.filters));
      }
      if (data.sort) {
        requestUrl.searchParams.append("sort", JSON.stringify(data.sort));
      }

      return fetch(requestUrl, {
        method: "GET",
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UsersResponse>);
    },
    [fetch]
  );
}

여기서 QueryFn은 현재 페이지, 필터 및 정렬 매개변수를 기반으로 사용자 데이터를 검색하고, getNextPageParam 함수는 마지막 페이지의 응답을 기반으로 가져올 다음 페이지를 결정합니다. 사용자가 스크롤하거나 추가 데이터를 요청하면 useInfiniteQuery는 nextPage 매개변수를 기반으로 다음 데이터 세트를 자동으로 검색합니다. 이것이 무한 스크롤이 발생하는 방식입니다. 쿼리의 캐시 시간은 gcTime 매개변수에 의해 설정됩니다.

전반적으로 React Query는 React 애플리케이션의 서버 상태를 관리하고 디버깅하기 위한 포괄적인 솔루션을 제공합니다. QueryClientProvider는 모든 쿼리와 변형에 대해 중앙 집중적이고 일관된 구성을 보장하는 반면, ReactQueryDevtools는 개발 중에 쿼리 동작을 검사하고 이해하기 위한 강력한 도구를 제공합니다.

오류 처리

CRUD 작업을 구현하려면 사용자 친화성과 애플리케이션 안정성을 보장하기 위해 항상 적절한 오류 처리가 필요합니다. 서버 오류는 일반적으로 클라이언트 요청 처리 실패, 서버 코드 오류, 리소스 과부하, 인프라 구성 오류 또는 외부 서비스 오류와 관련이 있습니다. 오류 처리를 위해 Extensive-react-boilerplate는 WrapperFetchJsonResponse 함수 사용을 제안합니다.

function useGetUserService() {
  const fetch = useFetch();
  return useCallback(
    (data: UserRequest, requestConfig?: RequestConfigType) => {
      return fetch(`${API_URL}/v1/users/${data.id}`, {
        method: "GET",
        ...requestConfig,
      }).then(wrapperFetchJsonResponse<UserResponse>);
    },
    [fetch]
  );
}

결론

이 기사에서는 기본적인 CRUD 작업을 다루고 NextJS의 데이터 검색 기술을 살펴보았습니다. 우리는 React Query를 사용하여 상태를 관리하는 방법을 조사했으며, 데이터 검색 디버깅 및 최적화를 위한 QueryClientProvider 및 ReactQueryDevtools의 기능을 간략하게 설명했습니다. 또한 대규모 데이터 세트를 처리하기 위한 페이지 매김 및 무한 스크롤 구현에 대해 논의하고 오류 처리를 해결하여 애플리케이션의 탄력성을 높이고 원활한 사용자 경험을 보장했습니다.

이 기사에 설명된 예제와 기술을 따르면 이제 NextJS 프로젝트에서 CRUD 작업을 처리할 수 있는 준비를 갖추게 됩니다. 또는 프로젝트에 Extensive-react-boilerplate 템플릿을 사용할 수 있습니다. CLI를 사용하는 코드 한 줄 없이 몇 분 만에 CRUD 작업을 수행할 수 있는 기능을 구현하는 완벽하게 호환되는 Nestjs-boilerplate 백엔드가 있습니다. 엔터티 관계에 대해서는 여기와 여기에서 자세히 다루었습니다. 계속해서 실험하고, 모범 사례에 대한 최신 정보를 받아보고, 유용하다고 생각되면 이 상용구를 사용해 보세요.

BC Boilerplates 팀은 항상 개발을 향상할 수 있는 방법을 모색하고 있습니다. GitHub 토론이나 아래 댓글을 통해 여러분의 생각을 듣고 싶습니다.

이 기사의 모든 출처는 Olena Vlasenko와 Vlad Shchepotin??

위 내용은 NextJS로 CRUD 마스터하기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!