[Node.js] 상세페이지 만들기 2 (링크 만들기)

<%= JSON.stringify(변수)%> 를 하면 html 에서 데이터를 띄워볼 때 array 나 object 값이어도 내용을 깨지지 않고 봐볼 수 있다.

 

server.js

  try {

    let result = await db.collection('post').findOne({ _id: new ObjectId(요청.params.id) })

    console.log(result)

    if (result == null) {

      응답.status(404).send('이상한 url 입력함')

    }

    응답.render('detail.ejs', { 글: result })

  } catch (e) {

    console.log(e)

    응답.status(404).send('이상한 url 입력함')

  }

})

 

list.ejs

<div class="white-bg">

        <% for (let i =0; i<글목록.length; i++){ %>

        <div class="list-box">

          <h4><a style="text-decoration : none" href="/detail/<%= 글목록[i]._id%>"><%= 글목록[i].title%></a></h4>

          <p><%= 글목록[i].content%></p>

        </div>

    <% } %>

      </div>

 

 

우선 list.ejs 파일에서 다음과 같이 a태그를 넣어서 자동으로 url 페이지로 해당 데이터의 id 값을 넣어 이동시킬 수 있도록 하였다.

 

a:hover {

  color: pink;

}

a {

  color: black;

}

 

a태그의 색상과 밑줄을 변경할 수 있는 코드이다.

 

밑줄을 제거한 건

 

a style="text-decoration : none" 

 

다이렉트로 style 을 넣어줬다.

 

코드의 안정성을 위해서 예외상황을 처리해줬다.

 

맨 위의 코드를 보면 유저의 입력값이 id 보다 짧으면 catch , 길이는 같지만 다른 값은 null 값이 뜨기 때문에

 

catch 로 예외를 못 잡는 상황이 나와서 if 문으로 null 일 시에 다르게 처리되도록 코드를 짜줬다.