바위 뚫는중

[Node.js] Express와 MongoDB를 이용한 CRUD 프로젝트 - (4) MongoDB 연동하여 READ 본문

Nodejs

[Node.js] Express와 MongoDB를 이용한 CRUD 프로젝트 - (4) MongoDB 연동하여 READ

devran 2022. 11. 8. 13:37
반응형

https://dev-raeun.tistory.com/28

 

[Node.js] Express와 MongoDB를 이용한 CRUD 프로젝트 - (3) Express, MongoDB 연동, CREATE

https://dev-raeun.tistory.com/27 [Node.js] Express와 MongoDB를 이용한 CRUD 프로젝트 - (2) https://dev-raeun.tistory.com/26 저번시간이어서 진행! [Server] Express와 MongoDB를 이용한 CRUD 프로젝트 - (1) Express와 MongoDB를 이용

dev-raeun.tistory.com

지난 시간 이어서 진행, 내 모든글들이 구글 서치콘솔에 대부분 연동이 안되어있어서,, 이 글을 누군가 볼지 모르겠지만 😂😂😂

기록겸 꾸준히 남겨 보겠다,, 구글 서치콘솔 정말 너무하다,,,,,,흑

CRUD- READ 사용자에게 DATA 보여주기

입력한 data를 MongoDB Atlas에서 사용자에게 보여주는 것에는 두가지가 필요하다!

  • MongoDB Atlas로 부터 data를 가져오기
  • 템플릿 엔진으로 HTML의 data를 랜더링하기

차례로 해보자.

MongoDB에서 data 가져오기

우리가 MongoDB에 저장한 data를 가져오려면 ‘find’ 메소드를 사용하면 된다.

이 메소드는 collection 메소드에서 사용할 수 있음! 이렇게!

app.get('/', (req, res) => {
  const cursor = db.collection('quotes').find()
  console.log(cursor)
  // ...
})

위의 cursur 객체는 우리의 database의 모든 data를 포함하고 있다.

toArray를 이용해서 data를 배열로 변환할 수 있다. 보기쉽게!

app.get('/', (req, res) => {
   const cursor = db.collection('quotes').find().toArray()
    .then(results => {
      console.log(results)
    })
    .catch(error => console.error(error))
  // ...
})

HTML 랜더링

템플릿 엔진을 이용하여 HTML을 생성하자.

가장 쉬운 EJS(Embedded JavaScript) 템플릿이용

EJS 설치 및 사용

npm install ejs --save

아래 코드는 우리가 EJS를 템플릿 엔진으로 사용하고 있다는 것을 알려준다

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

해당 app.set 메소드는 app.use , app.get, app.post 메소드 앞에 배치해준다!

이제 따옴표가 포함된 HTML을 생성하자! 이 프로세스를 HTML 랜더링이라고 한다.

render Express에 내장된 response를 사용해주면된다.

res.render(view, locals)
  • view: 랜더링할 파일의 이름 (이 파일은 views 라는 폴더 안에 있어야 함)
  • locals: 파일에 전달된 데이터

그렇다면 view를 만들어보자. index.ejs 파일을 views 폴더 안에 만들어 준다.

리눅스로 해도 좋지만, 다소 헷갈려서 vscode로 넘어왔다. 디렉토리 구조는 아래와 같다.

index.html의 모든 내용을 그대로 index.ejs로 붙여넣기를 해준다.

index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>MY APP</title>
</head>
<body>
  <h1> CRUD를 연습중이란다 </h1>
<form action="/quotes" method="POST">
  <input type="text" placeholder="name" name="name">
  <input type="text" placeholder="quote" name="quote">
  <button type="submit">Submit</button>
</form>
</body>
</html>

server.js의 get도 방금 만든 index.ejs를 랜더링 하도록 수정해준다

server.js

app.get('/', (req, res) => {
    const cursor = db.collection('quotes').find().toArray()
    .then(results => {
      res.render('index.ejs', { })
    })
    .catch(error => console.error(error))
 })

중간점검 겸 node 서버를 실행해준다.

서버 실행시 모든게 전과 다를게 없어야 하고, input값을 form에 입력시에도 잘 나타나야 한다.

자 그렇다면, 이제 입력한 data를 화면에 나타내 보자.

quotes 를 index.ejs에 넣자. app.get 메소드만 수정해주면 됨

index.ejs

app.get('/', (req, res) => {
    const cursor = db.collection('quotes').find().toArray()
    .then(results => {
      res.render('index.ejs', { quotes: results })
    })
    .catch(error => console.error(error))
 })

그리고 html에 나타날수 있도록 index.ejs을 수정한다

index.ejs

<!-- <form> 태그안에 -->

<form action="/quotes" method="POST">
  <input type="text" placeholder="name" name="name">
  <input type="text" placeholder="quote" name="quote">
  <button type="submit">Submit</button>
  <%= quotes %>
</form>

<%= quotes %> 를 추가해준다

다시 node 실행 후 값을 입력해보자.

다음과 같이 [Object Object] 들이 나타난다.

이유는, 우리가 작성한 각각의 quote 결과가 자바스크립트 오브젝트이기 떄문이다.

ejs는 HTML로 자동적으로 변환되지 않아서 저렇게 나타난다.

그래서 우리는 for loop를 이용하여, 이를 해결해주어야 한다.

<% %> 태그 안에서 해주면 된다.

<h2> Quotes </h2>

<ul class="quotes">
  <!-- Loop through quotes -->
  <% for(var i = 0; i < quotes.length; i++) {%>
    <li class="quote">
      <!-- Output name from the iterated quote object -->
      <span><%= quotes[i].name %></span>:
      <!-- Output quote from the iterated quote object -->
      <span><%= quotes[i].quote %></span>
    </li>
  <% } %>
</ul>

이렇게!

다시 시작을 해주면,,

이렇게 내가 그동안 쓴 망측한 글들이 나오게 된다. 쉬운데 어려운 것이었다!

다음은 UPDATE를 해보겠다.

반응형

'Nodejs' 카테고리의 다른 글

[Node.js] MVC 패턴이란?  (0) 2023.01.22
Azure, Nginx를 이용하여 Node.js의 리버스 프록시 서버 설정, pm2 사용법 서버 무중단 배포, vscode 원격접속  (0) 2022.11.22
[Node.js] Express와 MongoDB를 이용한 CRUD 프로젝트 - (3) Express, MongoDB 연동, CREATE  (0) 2022.10.25
[Node.js] Express와 MongoDB를 이용한 CRUD 프로젝트 - (2)  (0) 2022.10.24
[Node.js] Express와 MongoDB를 이용한 CRUD 프로젝트 - (1)  (0) 2022.10.21
'Nodejs' Related Articles more