Products

Product

Tab Bar

(auth), (tabs)폴더

• 괄호(parenthess)를 사용한 네이밍은 URL에 영향이 없다.
• route를 URL변경없이 grouping할 수 있음
• 아이콘 사이트 : heroicons
• layout을 다른 그룹의 영향을 받지 않고 적용할 수 있다.

변경파일

• app/(auth)/create-account/actions.ts 외 다수 (auth)로 그룹화
• app/(tabs)/chat/page.tsx 외 layout, page, life, live, products
• app/layout.tsx
• components/tab-bar.tsx

Skeletons

변경파일

• app/(tabs)/products/loading.tsx
• app/(tabs)/products/page.tsx

Product Component

변경파일

• app/(tabs)/products/page.tsx
• components/list-product.tsx
• public/goguma.jpg

Detail Skeleton

변경파일

• app/products/[id]/loading.tsx
• app/products/[id]/page.tsx
• components/list-product.tsx

• lib/utils.ts

• [id] : Next.js가 알아서 id라는 parameter를 router를 통해 제공해줌

Product Detail

변경파일

• app/products/[id]/page.tsx

Image Hostnames

변경파일

• app/products/[id]/page.tsx
• next.config.mjs

Pagination Actions

변경파일

• app/(tabs)/products/actions.ts
• app/(tabs)/products/page.tsx
• app/products/[id]/page.tsx
• components/list-product.tsx
• components/product-list.tsx
• public/gimbap.jpg
• public/odeng.jpg

Infinite Scrolling

• components/product-list.tsx
• components/tab-bar.tsx

  
//app/layout.tsx  
export const metadata: Metadata = { title: { template: "%s | Karrot Market", default: "Karrot Market", }, description: "Sell and buy all the things!", };  
  

%s : 페이지별 제목으로 대체
description : 검색 엔진 결과나 소셜 미디어 공유 미리보기에서 페이지를 설명하는 데 사용

//components/tab-bar.tsx
usePathname: 현재 경로를 가져오는 Next.js 훅

스켈레톤

  
app/   
├── (tabs)/   
 │ ├── products/   
 │  │ ├── page.tsx  // 실제 페이지 컴포넌트   
 │  │ ├── loading.tsx  // 로딩 상태 컴포넌트  
  

//app/(tabs)/products/loading.tsx
Next.js 13 이상에서는 특정 폴더 구조와 파일 이름을 통해 특정 동작을 자동으로 설정할 수 있다.
app/(tabs)/products/loading.tsx 파일은 Next.js가 해당 경로의 페이지를 로드할 때 자동으로 로딩 상태를 처리하는 컴포넌트로 사용된다.

//app/(tabs)/products/page.tsx  
export type InitialProducts = Prisma.PromiseReturnType<  
  typeof getInitialProducts  
>;  
  
export default async function Products() {  
  const initialProducts = await getInitialProducts();  
  return (  
    <div>  
      <ProductList initialProducts={initialProducts} />  
    </div>  
  );  
}  

InitialProducts 타입 정의: getInitialProducts 함수의 반환 타입을 추론하여 InitialProducts 타입으로 정의한다.
Prisma.PromiseReturnType<typeof getInitialProducts> : Prisma의 유틸리티 타입을 사용하여 getInitialProducts 함수가 반환하는 Promise의 타입을 추론한다.

타입을 추론하고 다시 정의하는 이유

1. 타입 안전성
   타입스크립트에서는 타입 안전성을 보장하기 위해 각 변수와 함수의 타입을 명시적으로 정의하는 것이 중요하다. 이는 코드 작성 시와 유지보수 시에 타입 오류를 방지하는 데 도움이 된다. Prisma.PromiseReturnType를 사용하면, getInitialProducts 함수가 반환하는 Promise의 타입을 정확하게 추론할 수 있다.
2. 가독성과 재사용성
   명시적으로 타입을 정의하면 코드의 가독성과 재사용성이 높아진다.
   InitialProducts 타입을 정의함으로써, 해당 타입을 여러 곳에서 재사용할 수 있다. 이는 코드의 중복을 줄이고, 변경이 필요할 때 일관되게 유지할 수 있게 한다.

isNaN : JavaScript 내장 함수로, 전달된 값이 NaN(Not-a-Number)인지 여부를 확인