detail페이지에서 /detail/글번호로 들어가면 해당 글 번호를 가진 글의 상세페이지를 보여줄 수 있도록 만들어보는 것이 목표!
✨상세페이지 기능
- 유저가
/detail/어쩌구로 접속하면- {_id:어쩌구} 글을 DB에서 찾아내어
- ejs파일에 데이터를 넣어 보여준다.
✨URL 파라미터 사용
글 번호에 따라 레이아웃은 같으나 데이터만 다른 데이터를 출력하기 위해 URL 파라미터 문법을 사용해보자면,
우선 URL 파라미터 문법을 사용하면 비슷한 URL을 가진 API를 여러 개 만들지 않아도 되기 때문에 엄청난 이점이 존재한다.
server.js에
app.get('/detail/:id', (요청, 응답) => {
응답.render('detail.ejs', {보낼데이터})
})이렇게 '/detail/:id'를 작성해주어 detail 뒤에 어떤 문자가 와도 detail페이지로 연결할 수 있도록 만들어준다.
이 때, id는 필자가 편하자고 id라고 이름을 넣어준 것..
detail.ejs파일에
<div class="detail-bg">
<h4>글제목</h4>
<p>글내용</p>
</div>해당 코드를 추가하고
detail.css를 추가해주었다.
.detail-bg {
background: white;
padding: 15px;
margin-top: 10px;
}2. id에 해당하는 글 DB에서 가져오기
게시글 리스트에서 글 클릭 시 해당 id값을 가진 글의 detail페이지로 이동하는 링크를 걸어주면 되는데,
앞전에는 .find().toArray()를 사용하여 모든 document를 가져왔다면,
해당하는 데이터를 찾기 위해서는.findOne()을 사용할 수 있다.
db.collection('post').findOne({데이터});
잘 가져와지는지 테스트를 해보기 위하여
mongoDB에 자동으로 들어갔던 형식 그대로 가져와서 코드에도 넣어보자(ObjectId를 사용하기 위해 new도 꼭 적어주자!)
- 참고로 ObjectId를 사용하려면
서버파일 상단에도 잘 들어가져있나 확인해보고 쓰자.....
이후 result 변수에 담아 콘솔창에 출력하여 테스트해보면,
일단 콘솔창에는 잘 나온다.
그럼 이제 유저가 URL 파라미터 자리에 입력한 데이터를 가져와보자!!
+) 유저가 /detail/글_id를 입력해서 GET요청을 날렸을 때, detail.ejs페이지를 보여주되 해당 글 제목과 내용이 보이도록
요청.params로 사용자가 url파라미터에 적은 값을 가져올 수 있으니
let id = 요청.params.id;유저가 적은 값을 id 변수에 담은 뒤,
let result = await db.collection("post").findOne({ _id: new ObjectId(id) });해당 id를 ObjectId()안에 넣어주고,
해당 데이터를 다시 result 변수에 넣은 뒤
응답.render("detail.ejs", { detail: result });detail이라는 이름으로 result 값을 detail.ejs페이지로 넘겨주었고
이후 detail.ejs페이지에
가져온 값의 title과 content값을 넣어주면
잘 나타난다!!
