컴퓨터 프로그래밍/Node.js

[Node.js] 웹페이지에 DB데이터 꽂기 (EJS, 서버사이드 렌더링)

한33 2023. 11. 6. 22:49

ejs 셋팅하려면 

 

npm instas 입력

 

서버파일 상단에 app.set('view engine', 'ejs'

 

view 폴더 만들고 list.ejs 이름으로 파일을 하나 만듦

( html 과 동일하나 이 파일로 데이터를 보낼 수 있음 )

 

app.get('/list', async (요청, 응답) => {
  let result = await db.collection('post').find().toArray() // DB 에서 어떤 콜렉션에 있는 모든 DB 를 불러오는 코드

  응답.render('list.ejs', { 글목록 : result })
}

 

위처럼 ejs 로 연결을 하기 위해서는 render 을 이용해주어 ejs 파일로 데이터 전송.

 

(응답 은 2번 들어가면 안됨)

 

<body class="grey-bg">
    <%= 글목록%>
    <div class="white-bg">
        <div class="list-box">
          <h4><%= 글목록[0].title%></h4>
          <p><%= 글목록[0].content%></p>
        </div>
        <div class="list-box">
          <h4><%= 글목록[1].title%></h4>
          <p><%= 글목록[1].content%></p>
        </div>
      </div>

   
</body>

 

ejs 파일에서 데이터를 받을 때에는 위처럼 <%= 데이터변수명 %> 을 이용한다.

 

 


 

현재 시간을 표시하는 예제를 풀어봤다.

 

app.get('/time', async (요청, 응답) => {
  let time = new Date()

  응답.render('time.ejs', { 시간 : time })
})

 

time 이라는 변수를 생성해서 new Date()  값을 넣었는데,

 

애초에 아래에 time.ejs 로 보낼 때 시간 : new Date() 꼴로 바로 보내도 됐을 거 같다.