[TIL]DB,Prisma,ServerAction을 사용한 product 페이지 만들기

오늘 공부한것 & 기억할 내용

DB,Prisma,ServerAction을 가지고 db에 저장되어 있는 데이터를 뿌려주는 페이지를 만들었다.

products
├── [id]/
│   ├── page.tsx
├── action.tsx
├── loading.tsx
└── page.tsx

components
├── product-list.tsx
├── product.tsx

lib
└── utills.ts

products.page

• db에서 모든 데이터를 받아 뿌려준다.

const getProduct = async() => {
    const product = await db.product.findMany({
        select:{
            id:true,
            created_at:true,
        },
        take:1,
        orderBy:{
            created_at:'desc'
        }
    })
    return product
}

products.action

• db에서 모든 데이터를 받되 skip으로 앞에 받은 데이터가 있으면 그 데이터를 스킵하고,take옵션으로 한개의 데이터만 받도록 작업한다.

 skip:page * 1,
 take:1,

products.[id].page

• session에 저장되어 있는 id값과 db안에 들어 있는 userId의 값이 값은지 확인 후 같으면 해당 게시물을 삭제 할 수 있는 delete버튼을 노출
• db에 저장되어 있는 값을 가져오되 include를 사용하여 추가적인 정보를 더 가져온다 (schema에 @relation 으로 되어 있는 정보)
• 컴포넌트의 파라미터를 숫자로 바꿔준 후 숫자가 아니라면 notFound페이지로 이동
• session에 있는값과 userId가 똑같을때 delete버튼 생성 후 삭제하는 함수 생성

components.product-list

• 페이지 네비게이션을 사용하기 위해 product를 useState안에 담아준다
• 버튼을 생성해 새로운 product가 있을때 page의 숫자를 늘려주고 product에 새로운 product를 넣어준다

components.product

• product item 개별 링크 이동하는 컴포넌트

utills

//시간을 x일전으로 만들어주는 함수
export function formatToTimeAgo(date:string):string{
    const dayInMs = 1000 * 60 * 60 *24
    const time = new Date(date).getTime()
    const now = new Date().getTime()
    const diff = Math.round((time - now) / dayInMs)
    const formatter = new Intl.RelativeTimeFormat('ko')
    return formatter.format(diff,"days")
}

배운점 & 느낀점

product를 뿌리는것까진 할만했는데 페이지 네비게이션을 만드는순간 뭐가 뭔지 너무 어려워졌다
infinite scrolling구현도 배웠는데 위의 코드와 동일하지만 조금 다르다 UI적으론 infinite scrolling이 나을듯

배운거 토대로 만들어본 트윗 코드