오늘은 글 조회 및 상세 페이지를 만들어 봤다.
항상 가장 개발의 기초는 CRUD부터 시작되는 것 같다.
이번시간에는 CRUD 중 R을 배웠다.
그리고 가장 크게 와닿은 부분은 프로그램을 처음 사용하거나 어려운 부분이 발생 했을 땐
글로 먼저 적어놓고 그걸 해석하는 것
"배운적 없는데 어떻게 만들어요" 가 나오는게 아닌
배우지 않았고 해보지 않았더라도 그걸 해나아가는게 개발자
해본것만 할 줄 알면 그건 기술자라는 데
반박불가!
게시글 조회
DB에 있는 저장된 글들을 보여주려면
1. DB에서 가져온 걸 보여주려는 html 페이지가 필요
2. 페이지에 들어가면 DB에서 가져온 데이터를 꺼내서
3. html 페이지에 넣어서
4. 넣은 데이터를 보여준다.
이렇게 말로 적고
코드로 해석하면 끝~
일단 Routing 할 폴더를 먼저 만들고 그 안에 page.js를 만들어 새로운 url을 만들어서 html 페이지를 만들어줬다.
export default async function List() {
<div></div>
}
이 후 간단한 css로 데이터가 어떻게 보여지는지 표시해주고
.list-bg {
background: rgb(249, 250, 255);
padding: 10px;
}
.list-item {
background: white;
border-radius: 10px;
padding: 20px;
margin-bottom: 5px;
box-shadow: rgb(224, 224, 224) 0px 2px 4px 0px;
}
.list-item h4 {
font-size: 20px;
font-weight: 800;
margin: 0;
}
.list-item p {
color: grey;
margin : 5px 0px;
}
저번처럼 데이터를 가져온다.
let db = (await connectDB).db('forum');
let result = await db.collection('post').find().toArray();
result에 가져온 data를 저장했으니 저장한 걸 map을 통해 보여준다.
return (
<div className="list-bg">
{result.map((el,idx)=>{
return(
<div className="list-item" key={idx}>
<h4>{el.title}</h4>
<p>{el.content}</p>
</div>
)
})}
</div>
상세페이지 만들기
이번에도 글로 먼저 어떻게 할지 정하고 그걸 해석하면
1. 글 제목을 누르면
2. 상세페이지로 이동하게 한다.
3. 그 페이지는 DB에서 그 게시물을 가져와 보여준다.
그런데 URL을 어떻게 할 지 모르겠으니 다른 곳에서 하고 있는 걸 참고하면 보통 글의 ID 값을 많이 가져와 사용한다.
이때 React에선 useParams를 사용하여 랜덤으로 아이디를 부여하고 그걸 사용해서 라우팅을 했는데
Next.js에선 /detal/{id} 하기 위해서 dynamic Route를 사용한다.
이런식으로 만들면 뒤에오는 id값은 아무 문자나 와도 상관이 없이 잘 들어가진다.
이후 한가지 자료만 보여주기 위해서 DB에서 글에 맞는 내용을 불러오기 위해 findOne()이라는 메소드를 사용해준다.
let result = await db.collection('post').findOne({ _id: new ObjectId(props.params.id)})
그리고 DB에서 불러온 걸 리턴해주면 끝
return(
<div>
<h4>상세페이지임</h4>
<h4>{result.title}</h4>
<p>{result.content}</p>
</div>
)
이 때 글 제목을 클릭해서 상세페이지로 넘어가야 하므로 list.js에서 LInk를 써준다.
<Link href={`/detail/${el._id}`}>
<h4>{el.title}</h4>
</Link>
이렇게 서버컴포넌트로 만드는 방법이 있고
클라이언트컴포넌트는 방법이 따로 있다.
Link를 쓰는게 더 편하지만 알고 있어야 할 것 같다.
'use client'
import { useParams, usePathname, useRouter } from "next/navigation"
export default function DetailLink(){
let router = useRouter()
return (
<button onClick={()=>{ router.push('/list')}}>버튼</button>
)
}
function ex(){
return(
<>
<button onClick={()=>{ router.back() }}>버튼</button>
// router.back() 실행하면 뒤로가기
<button onClick={()=>{ router.forward() }}>버튼</button>
// router.forward() 실행하면 앞으로가기
<button onClick={()=>{ router.refresh() }}>버튼</button>
router.refresh() 실행하면 새로고침
prefetch 기능
<button onClick={()=>{ router.prefetch('/어쩌구') }}>버튼</button>
router.prefetch('/어쩌구') 실행하면 '/어쩌구'의 내용을 미리 로드해줍니다.
그럼 그 페이지 방문할 때 매우 빠르게 방문할 수 있습니다.
빠른 사이트를 만들고 싶을 때 쓸 수 있는 유용한 기능
<Link href={'/어쩌구'} prefetch={false}>링크</Link>
자동으로 미리 로드하는게 싫으면 prefetch 속성을 false로 바꿔줍시다.
링크가 많은 게시판의 경우 모든 링크를 다 읽을게 아닌데 굳이 모든걸 미리 로드하는건 자원낭비
let a = usePathname()
let b = useSearchParams()
let c = useParams()
usePathname() 쓰면 현재 URL 출력
useSearchParams() 쓰면 search parameter (query string) 출력
useParams() 쓰면 [dynamic route]에 입력한내용 (URL 파라미터) 을 출력
</>
)
}
