요청된 데이터의 URL에서 쿼리 파라미터를 가져온다. supabase에서 range라는 범위 속성을 제공해준다.
(page - 1) * limit, page * limit - 1) 는 만약 페이지가 2, 리밋이 10일 경우 (2-1) * 10 = 시작 인덱스, 2 * 10 - 1 = 끝 인덱스 이렇게 한다면 시작 인덱스는 10, 끝 인덱스는 19가 된다. 하나의 페이지마다 10개의 데이터를 보여주는 것!
`/api/review?product_id=${productId}&page=${page}&limit=${limit}` //요청 url
const { searchParams } = new URL(request.url); //상대 경로는 URL 객체에서 직접 설정
const productId = searchParams.get('product_id'); // 쿼리 파라미터에서 product_id 가져오기
const page = Number(searchParams.get('page')) || 1; // 페이지 번호
const limit = Number(searchParams.get('product_id')) || 10; // 리뷰 10개씩
페이지네이션을 구현할 때 총 리뷰 개수를 알아야 전체 페이지 수를 계산할 수 있다. 사용자 경험으로 보았을 땐 사용자가 특정 페이지를 선택했을 때, 그 페이지가 유효한지 확인할 수 있다. 만약 총 데이터 수가 25개이고 페이지당 리밋이 10개라면 2.5페이지가 나와야하는데 이때 Math.ceil() 사용해 정수로 바꿔주면서 3페이지로 올림처리한다.
const { count: totalReviews, error: countError } = await supabase
.from('reviews')
.select('*', { count: 'exact' }) // 총 행 수 계산 => 반환, count 속성에 총 리뷰 수
.eq('product_id', productId);
if (countError) {
return NextResponse.json({ error: countError.message }, { status: 400 });
}
const totalPages = Math.ceil((totalReviews || 0) / limit); // 총 페이지 수 계산
응답 값
데이터 패칭
쿼리키에 데이터를 저장해줬다. fetch를 사용해서 API엔드포인트에 GET요청을 보내고, 응답을 JSON으로 변환해서 반환해준다. 여기서 productId는 리뷰를 가져올 특정 상품의 id이다.
페이지네이션 ui는 shadcn을 사용했다. shadcn은 쓰면 쓸수록 좋은 것 같다. 간단하고 예쁘고..~
PaginationPrevious는 현재 페이지가 1보다 클때 이전 페이지로 이동할 수 있다.
PaginationNext는 리뷰 총 페이지보다 작을 때 다음 페이지로 이동할 수 있다.
Array.from은 reviewData.totalPages 만큼 배열을 생성한다. 현재 총 페이지는 2페이지이다. onClick={() => handlePageChange(index + 1)} 클릭한 페이지 번호를 인자로 받아서 현재 페이지를 변경한다. isActive={currentPage === index + 1} 현재 페이지와 클릭한 페이지 번호가 일치하면 active한 상태를 보여준다.
프로젝트를 하면 할수록 내가 맡은 기능에 빈틈이 보여 계속 수정하게된다. 에러로직이나 선택한 상품이 없는 하단에 상품 개수가 보인다던가. 특정 상품만 체크하고 수량을 올렸더니 체크가 모두 활성화된다던가 이런 빈틈들이 잘보이고 유저테스트 이후로 기능 구현을 섬세하게 해야한다는게 얼마나 중요한지 뼈저리게 느꼈다ㅎ 오늘은 체크한 상품들을 선택 삭제하는 기능 구현을 해보려고한다!!
DeleteButton.tsx
선택 삭제 버튼을 따로 만들어주었다. 선택 삭제를 염두해두고 상품 삭제하는 로직이 있는 커스텀 훅을 만들어놓아서 코드를 간단하게 짤 수 있었다. 여기서 마주친 문제.. 처음 코드를 쓸 때 map을 사용했었다.
그런데 생각해보니까 map은 새로운 배열을 반환하는데 상품을 삭제하는데 굳이? 새 배열을 반환할 필요가 있을까 생각이 들었다. 괜한 메모리 낭비같았다 그래서 다른 메서드를 구글링하다가 forEach 가 적합하겠다고 생각했다 분명 배운건데 코드짤 땐 생각이 안날까,,
forEach와 map의 차이점 → 새로운 배열 생성 반환여부
forEach()
함수는 배열의 각 요소를 순회하며 주어진 함수를 호출합니다. 각 요소에 대해 함수를 호출할 때, 해당 요소의 값, 인덱스, 그리고 원본 배열을 인수로 넘겨줍니다. 주어진 함수는 배열의 크기만큼 반복 실행되며, 배열 요소의 개수에 따라 콜백 함수가 호출되는 횟수가 결정됩니다.
forEach() 함수는 반환 값이 항상 undefined 입니다. 새로운 배열을 생성하지 않습니다.
map()
map() 함수는 배열을 순회해서 각 요소를 콜백 함수로 적용해서 처리해 모은 새로운 배열을 반환하기 위한 함수입니다.
map() 함수에 전달되는 콜백 함수는 "각 요소를 변환하여 새로운 배열로 매핑(mapping)하는 역할을 한다"라고 말합니다. 이렇게 매핑된 결과를 새로운 배열로 반환하기 때문에 이 함수의 이름이 "map"으로 정해졌습니다.
아래 코드는 디테일 페이지에서 특정 상품의 데이터를 가져오는 부분이다. 원래는 상세 정보와 리뷰 탭이 없었는데 UT를 진행하면서 리뷰가 있었으면 좋을 것 같다는 피드백이 많아서 구현하게 되었다. UT를 해볼 기회는 없었는데 이번에 해보게 되어서 너무 좋았다(?) 피드백을 받고 수정하는데 테스트 전보다 완성도 높은 작업물이 나올 것 같다.
그런데 여기서 문제. 저 리뷰 탭에 리뷰의 개수가 보여야하는데 저 개수만 보여주려고 리뷰 데이터를 패치해야하는 상황이 생겼다. 라우터 핸들러로 만들어놓긴 했지만 저 개수를 띄우려고 코드를 몇줄 이상 써야하는게 비효율적이라고 생각이 들었다. 구글링하다가 supabase join 기능이 있다고해서 참고했다. supabase 초반에 사용할 때 들었던 기능 같은데, 프로젝트에서 써먹어본건 최종까지와서다.. 막상 기억이 잘 안나서 사용하지 못했다,, 이제라도 알아서 다행이다^.~
삭제까지 모두 완료해서 체크 상품만 결제 되도록 해보려고한다. 처음엔 체크 전에도 장바구니에 담긴 상품의 결제금액이 바로 브라우저에 보였는데 체크 전까진 0원으로 보이도록 하려고한다.
처음 구조는 아래와 같다. CartList는 장바구니 테이블을 보여주는 페이지이다. 그 아래 DataTable과 CartFixedButtons를 임포트하고 있는데 여기서 내가 사용한 shadcn의 데이터 테이블 컴포넌트는 컬럼과 데이터 테이블 파일구조를 분리해서 쓰는 것을 추천해서 그렇게 사용했다.
shadcn의 데이터 테이블 컴포넌트를 처음에 쓸 때 생소했던게 컬럼 컴포넌트는 함수형 컴포넌트가 아니라 배열만 덜렁 들어있었다. 컬럼을 추가하면 테이블에 데이터를 추가할 수 있었지만 함수형 컴포넌트가 아니라 따로 상태로 관리해주거나 하기 힘들었다. 그래서 수량 변경이나 삭제 같은 경우에도 새로고침을 해야 브라우저에 반영됐다. 그래서 아래와 같이 구조를 변경했다.
📌 shadcn 제공 코드
DataColumns.tsx
"use client"
import { ColumnDef } from "@tanstack/react-table"
// This type is used to define the shape of our data.
// You can use a Zod schema here if you want.
export type Payment = {
id: string
amount: number
status: "pending" | "processing" | "success" | "failed"
email: string
}
export const columns: ColumnDef<Payment>[] = [
{
accessorKey: "status",
header: "Status",
},
{
accessorKey: "email",
header: "Email",
},
{
accessorKey: "amount",
header: "Amount",
},
]
<PayButton product={product} orderNameArr={orderNameArr} /> product에서 아래와 같은 오류가 났다. 타입 오류인데 null 값이 포함된 배열이 '{ name: string | null; amount: number; quantity: number; id?: string | undefined; }' 이런 특정 타입에 할당될 수 없다는 것 같다. 오늘도 난 구글링을 한다..,,
export const CartFixedButtons = ({ data, selectedItems }: CartButtonProps) => {
const totalPrice =
data?.reduce((acc, item) => {
if (selectedItems.includes(item.product_id ?? '')) {
const price = item.product_price ?? 0;
const quantity = item.count ?? 0;
return acc + price * quantity;
}
return acc;
}, 0) || 0;
const totalAmount = totalPrice + DELIVERY - COUPON;
const orderNameArr = data
.map((item) => {
if (selectedItems.includes(item.product_id as string)) {
return item.product_name;
}
return null;
})
.filter((name): name is string => name !== null);
// 전달 데이터 형식
// {
// name: "청송 사과",
// amount: 8000,
// quantity: 3,
// }
const product = data
.map((item) => {
if (selectedItems.includes(item.product_id as string)) {
return {
name: item.product_name,
amount: (item.product_price ?? 0) * (item.count ?? 0),
quantity: item.count ?? 0
};
}
return null; //장바구니 선택 상품 외 null 처리
})
타입가드로 is를 사용했는데 사용한 이유는특정 타입을 체크하는 함수에서 반환되는 값이 true 이면 해당 함수를 사용하는 블록 안에서도 인자로 받은 값의 타입을 특정 타입으로 확정시켜 줄 수 있도록 하는 기능을 한다고한다. 원래 특정 변수를 함수로 넘겨서 타입을 체크하게 되면 그 함수를 사용하고 있는 스코프에서는 타입 축소가 안되어 불편했었는데, 이 키워드를 활용하면 그 부분을 해결 할 수 있다고해서 사용했다 ㅎ is 는 typescript 에서 지원하고 있는 키워드라고 한다.
spaceBetween : 슬라이드 사이 간격(margin) slidesPerView : 보여질 슬라이드 수 centeredSlides: 센터 모드 pagination={{ clickable: true }} : 페이지네이션 버튼을 눌렀을 때 이동 가능 navigation : Prev, Next 버튼 autoplay={{ delay: 2000, disableOnInteraction: false }} : 자동 재생 / 지연시간 / 사용자 상호작용시 슬라이더 일시 정지 비활성 loop={true} : 반복여부
프로젝트 적용
스타일은 tailwind css를 사용하고 있어서 global.css에 최소한의 스와이퍼 슬라이드 스타일을 적용해줬다. 페이지네이션(인디케이터)에 스타일을 적용해줘야했기때문도 있다 ㅎ 의문점은 페이지네이션 스타일을 페이지마다 다르게 할 순 없을까..? 모듈로 들어가 있어서 스타일을 어떻게 먹여줘야할지 잘모르겠다.
이전에 카운트 버튼을 참고해서 구현했다. useDeleteProduct 훅을 생성하고 아래 쿼리문을 썼다. 원래는 함수로 만들었는데 빌드 테스트할때 에러가 났다. useQueryClient 훅이 deleteProduct 함수 안에서 호출되는 것은 React 훅 규칙에 위배된다는 에러였고, 훅은 반드시 React 함수 컴포넌트 또는 사용자 정의 훅 내에서만 호출해야한다는 오류였다.
Error: React Hook "useQueryClient" is called in function "deleteProduct" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use". react-hooks/rules-of-hooks
여기서 또 나타난 빌드에러..☠️ columns가 배열로 되어있어서 const mutation = useDeleteProduct(); 을 컬럼 배열 안에 넣는 것은 훅 규칙에 위배된다는 말이었다. 훅은 반드시리액트 컴포넌트 안에 호출해야한다고 한다.
Error: React Hook "useDeleteProduct" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function. react-hooks/rules-of-hooks
말 그대로 낙관적이다. 서버에 요청을 보내고 됐겠지~~~하고 화면에 적용해버리는 것. 서버 요청이 정상임을 가정하고 더 나은 UX를 제공할 수 있다. 예시로 좋아요 버튼을 구현할 때 많이 사용한다. 시간이 걸린다는 단점을 해결하기 위해 고려된 방법인 만큼 네트워크가 느린 환경에서 유용하다는 장점이 있으나, 서버와의 데이터가 다를 수 있다는 단점이 있으므로 이를 해결하기 위해 서버와 클라이언트 간에 상태가 같은지 최종 확인 과정을 거쳐야만 한다.
원래 코드는 아래와 같다. useMutation으로 데이터 업데이트를 해주었고 업데이트에 성공할 경우 invalidateQueries를 사용해 무효화해서 화면해 새로운 데이터를 가져와서 보여주었다. 서버에 요청을 보내고 받아와서 화면에 반영하는데까지 오래걸려서 낙관적 업데이트 기술을 사용해 바로바로 수량이 올라가고 결제 금액이 반영될 수 있도록 코드를 수정해보았다.
낙관적 업데이트 코드는 아래와 같다. 기존에 썼던 onSuccess는 더이상 사용하지 않고, onMutate / onError / onSettled 이 조합이 필요하다. 실행순서는 다음과 같다. onMutate ➡️ mutationFn➡️ onError➡️ onSettled 순이다.
1. onMutate
이때 cart 쿼리 키로 데이터를 가지고 오는 중이라면, 기존 쿼리를 일단 취소해야한다. 왜냐하면 사이드 이펙트를 일으킬 수 있기 때문.
getQueryData로 가져온 데이터를 백업 해두고 setQueryData로 변경될 것으로 예측한 데이터를 넣어주면 된다.
onMutate: async () => {
await queryClient.cancelQueries({
queryKey: ['cart']
}); // 기존 쿼리 취소
const previousCart = queryClient.getQueryData(['cart']); // 기존 데이터 저장
// optimistic update
queryClient.setQueryData(['cart'], (oldData: any) => {
return oldData.map((item: any) =>
item.product_id === product_id ? { ...item, count: counts + 1 } : item
);
});
return { previousCart }; // 롤백을 위한 이전 데이터 반환
},
