[Node.js + MongoDB]상세페이지 만들기 1 (URL parameter)

누가 /detail/??? 으로 접속하면 그 글번호를 가진 글의 상세페이지를 보여줍시다.

 

app.get('/post/:id', async (요청, 응답) => {
  let result1 = await db.collection('js').findOne( {_id: new ObjectId(요청.params.id) })
  응답.render('post.ejs', { data : result1 })
})

해석

app.get('/post/:id', async (요청, 응답) => {   let 변수명 = await db.collection('DB의 컬렉션명').findOne( {_id: new ObjectId(요청.params.id) })   응답.render('파일명', { 이름 : 변수명 }) })

'/post/:id'	[ /: ]을 사용하면 주소 뒤에 어떤 글이가 들어와도 응답을 실행시켜 준다
await	실행될때까지 잠시대기하라는뜻 async와 세트임 만든사람이 세트로 쓰래
db.collection('DB의 컬렉션명')	DB의 컬렉션에 가서 라는뜻
findOne( { ?? : ?? }) ( {_id: new ObjectId(데이터의id값) })	한가지를 찾는다는뜻 ( {_id: new ObjectId(데이터의id값) })
요청.params.id	유저가 주소창에 입력한 파라미터를 가져옴( params 파람스)
render	ejs파일을 불러 오고 싶을 때 쓰는 거 html파일 풀러오고싶으면 render대신 sendFile(__dirname + '/html이름')
'파일명'	응답으로 보여줄 파일명
{ 이름 : 변수명 }	이름부분은 데이터를 가져다 쓸때 사용할 이름 작명하고, 변수명은 위에서 정한 변수명 붙혀넣기

 

여기까지 하면 데이터를 id값으로 가져다가 파일에 보내주기까지는 완료

이제 보내준 데이터를 가져다가 쓸려면

<div class="white-bg">
      <% for ( let i = 0; i < data.length; i++ ) { %>
      <div class="list-box">
        <a href="/post<%= data[i]._id %>">
          <h4><%= data[i].title %></h4>
        </a>
      </div>
      <% } %>
    </div>

 

<div class="white-bg">
      <% for ( let i = 0; i < data.length; i++ ) { %>
      <div class="list-box">
        <a href="/post/<%= data[i]._id %>">
          <h4><%= data[i].title %></h4>
        </a>
      </div>
      <% } %>
    </div>

해석

<% %> : ejs문법으로 자바스크립트 문법을 ejs파일 에서 바로 쓸수있게 해주는거

for : 자바스크립트의 반복문

data.length : 서버에서 data라고 이름 붙혀서 가져온거의 갯수만큼

 <a></a> : a테그를 쓰면 href="" 를 사용해서 링크를 걸수있음

post : 서버파일에서 주소 정한한거 이름임 post라고 대충 정한거임

data[i]._id : for문을 활용해 data의 갯수만큼 id를 저자리에 반복하라는뜻

data[i].title : h4태그안에 데이터 타이틀이라는 이름 가지 데이터 갯수만큼 만들라는거임