상세페이지 만들기 1 (Dynamic route)

만들 페이지가 너무 많습니다.

글마다 상세페이지가 있어야하는데, 상세페이지는 어떤 URL 로 만드는 것이 좋을까요?

예를 들어 네이버 블로그 같은 경우, /id/글 번호 이렇게 URL 을 만들어놓았으니 비슷하게 하면 될겁니다.

• /detail/1 로 접속시 1번글 내용
• /detail/2 로 접속시 2번글 내용
• /detail/3 로 접속시 3번글 내용

와 같이요. 그래서 각각 저런 이름으로 폴더를 생성하면 되겠죠? 될까요?

글이 865,489개가 되면 어떻게 하죠? 폴더도 865,489개 만들어두면 되겠지만, 될까요?

안될 겁니다. 그래서 dynamic route 라는 것을 사용할 겁니다.

이것을 사용하면, 폴더 하나로 865,489개의 URL 을 만들어 낼 수 있습니다.

 

 

dynamic route 만드는 법

폴더를 만들 때 폴더이름을 [폴더이름] 이렇게 만들면 '이 부분에 아무거나 입력했을 때' 라는 뜻이 됩니다.

예를 들어 /photo/[어쩌구]/page.js 이렇게 만들어 놓으면, 누가 /photo/아무문자 로 접속했을 때 photp 폴더의 page.js 를 보여줍니다.

그래서 이렇게 구성해놓으면 아까처럼 수많은 폴더를 직접 만들 필요가 없습니다.

그럼 이제 detail/1, detail/865489 로 접속해도 해당 page.js 가 잘 뜰 겁니다.

 

 

상세페이지 만들기

그래서 /detail/어쩌구 로 접속하면 게시물 하나의 상세내용을 보여줄 페이지도 만들어보겠습니다.

detail/[어쩌구]/page.js

export default async function Detail() {
  return (
    <div>
      <h4>상세페이지임</h4>
      <h4>글제목</h4>
      <p>글내용</p>
    </div>
  )
}}

간단하게 html 은 위와 같이 작성하고, 게시물을 하나 채워보겠습니다.

게시물 하나만 MongoDB에서 찾아서 가져오고 싶다면, 아래 코드처럼 작성하시면 됩니다.

db.collection(컬렉션명).findOne(찾을document내용)

findOne() 안에는 object{ } 자료를 넣으면 그 내용이 포함된 document 하나를 가져다줍니다.

예를 들어 findOne({ name: 'yang' }) 을 적으면 name : "yang" 이 저장된 document 를 가져옵니다.

근데 게시물 하나를 정확히 찾아오고 싶을 땐

.findOne({_id: ObjectId('5454asdf4846as4e')}) 이렇게 _id 로 가져와서 보여주는 것이 좋습니다.

 

import { ObjectId } from "mongodb";
import { connectDB } from "@/util/database.js"

export default async function Detail() {
  let db = (await connectDB).db('forum')
  let result = await db.collection('post').findOne({_id : new ObjectId('63ce8d2b10e3e9fd2d7e0c0b')});
  console.log(result)

  return (
    <div>
      <h4>상세페이지임</h4>
      <h4>{result.title}</h4>
      <p>{result.content}</p>
    </div>
  )
}}

그래서 /detail/[어쩌구]/page.js 파일에 이렇게 작성했습니다. 이러면 /detail/어쩌구 접속시 DB에서 게시물을 하나 가져와서 html 로 보여줍니다. 

참고로 ObjectId 로 document 를 찾고 싶다면, 상단에서 ObjectId 를 import 를 해서 new ObjectId() 를 사용하면 됩니다.