[MongoDB] DB 데이터 읽기 - ejs

✅ 1. ejs 파일 생성

• html을 만들어 데이터를 불러올 수 있게 도와주는 라이브러리

  // 설치
  터미널> npm install ejs

• 파일 생성은, 먼저 'views' 폴더를 생성한 뒤 그 안에 ejs 확장자로 파일 생성
• ejs 파일 server.js 파일에서 렌더링 해주려면?
  => get / post 등 콜백함수에서 응답변수.render로 렌더링

  app.get('/path', (req, res) => {
     res.render( '파일명.ejs' );
  }

✅ 2. node.js에서 DB 데이터 ejs로 넘겨주기

• 기본적으로 사용하는 server.js파일에서

• 기본 셋팅

  app.set('view engine', 'ejs');

• DB에서 데이터 읽어오기

  // 🔸 모든 데이터(메타데이터 포함) 불러오기
  db.collection('collection이름').find()

  // 🔸 모든 데이터 배열로 불러오기
  db.collection('collection이름').find().toArray()

  // 🔸 특정'속성'이 특정'값'인 데이터 하나 불러오기
  db.collection('collection이름').findOne({속성 : 값})

• 활용예) DB에서 데이터 읽어와서 결과 ejs파일로 넘겨주고, ejs 파일 렌더링

  app.get('/경로', (req, res) => {
     db.collection('collection이름').find().toArray((error, result) =>{
         // 🔸 ejs 파일에 임의의 변수명으로 데이터 넘겨주고, 그 결과 렌더링
         response.render('파일.ejs', {임의의_변수명 : result});
     }
  }

✅ 3. ejs파일에서 DB데이터 사용하기

• ejs 파일은 html과 같은 형식으로 입력 가능
• but 특징이 있다면 node.js에서 넘겨받은 데이터를 일반 html태그 사이사이에서 사용할 수 있다는것

🟪 <% %>

• ejs에서 사용되는 이 기호는, 그 사이에서 JavaScript 문법을 사용할 수 있게 해줌
• 만약 특정 데이터를 넣어주고 싶으면, '='기호를 추가해 '<%= 변수%>' 형식으로 사용
• node.js에서 넘겨준 DB데이터가 담긴 변수를 바로 여기서 사용할 수 있음!!

  // 만약 node.js에서 DB를 읽어 그 result를 data라는 변수에 줬다면
  < div>이름 : <%= data[0].name %>< /div>

• 근데 <% %>를 사용해 JavaScript 문법을 사용하고 싶은데 중간에 html태그가 들어가야한다면?

  // html이 사이에 들어가면 위,아래의 JavaScript 코드를 각각 감싸줌
  <% data.map((info)=>{%>
     < div>이름 : <%= info.name %>< /div>
     < div>나이 : <%= info.age %>< /div>
  <% } %>

• 이처럼 DB에서 읽어온 값을 백엔드와 프론트엔드 사이를 오고가기 유용한 ejs 라이브러리인데, 다양한 대체제도 존재
• ex) react, vue, angular