[Node.js / MongoDB] 상세 페이지 만들기

💡 실습 포인트!

• 상세 페이지 경로에 id 라는 파라미터를 활용하여 게시물 _id 와 일치하는 상세페이지로 넘어갈 수 있게 코드를 작성했다.

---

💜 파라미터 문법으로 게시물 상세 페이지 경로 만들기

app.get('/detail/:id', function(req, res){
    req.params.id = parseInt(req.params.id);
    db.collection('post').findOne({_id : req.params.id}, function(err, result){
        res.render('detail.ejs', {detail : result});
    })
});

• 파라미터는 쉽게 말해서 URL 뒤에 무작위의 문자를 붙일 수 있도록 만들어주는 URL 작명 방식이다.
• 콜론(:) 기호를 붙여주면 /detail/ 뒤에 어떤 문자열을 붙여줘도 GET 요청을 인식하고 콜백함수를 실행한다.
• 콜론(:) 기호 뒤에는 자유롭게 이름을 붙이면 되는데, 나의 경우 게시물의 _id 가 들어갈 부분이므로 id 라고 파라미터를 붙여주었다. (파라미터는 여러 개를 이어붙일 수도 있다.)
• 이제 해당하는 게시물을 DB 에서 찾아와야하는데, 이는 db.collection 중 post 에서 해당하는 게시글 하나를 찾아오라는 의미의 db.collection('post').findOne() 함수를 사용하면 가능하다.
• .findOne() 함수의 첫번째 파라미터로는 { _id : req.params.id } 를 사용했는데, URL 파라미터인 id 값을 받아 이를 통해서 특정 게시물의 _id 에 적용하여 해당하는 게시글을 받아올 수 있다.
• 그리고 중요한 게 req.params.id 를 문자열로 바뀌어 전달되는 경우가 생길 수 있으므로 req.params.id = parseInt(req.params.id) 라는 코드를 작성하여 숫자로 변환을 해줘야 한다.
• 그렇게 DB 에서 받아온 게시물 데이터는 result 에 담겨오는데 이를 detail.ejs 파일에 넘겨줄 때 detail 이라는 변수에 담아서 넘겨주었다.

---

💜 상세 페이지 EJS 파일 디자인하기

<h4 class="container mt-5"><strong>상세 페이지</strong></h4>
<div class="container mt-4">
    <p class="mb-2">할일 : <%= detail.할일 %></p>
    <p class="mb-2">마감일 : <%= detail.마감일 %></p>
</div>

• 이제 views 폴더 하위에 상세 페이지 EJS 파일을 만들어준다.
• JavaScript 으로부터 해당하는 게시물을 detail 이라는 변수에 담아서 받아왔으니 이를 활용하면 된다.
• EJS 문법 안에 detail.할일, detail.마감일 과 같이 작성해주면 DB 에서 받아온 데이터가 HTML 내용으로 렌더링되어 브라우저에 보여진다.

---

💜 브라우저에서 확인하기