엘리스 SW 엔지니어 트랙 6주차(2)

HTML에 DB 데이터 넣는 법을 알아보자.

app.post('/add', function(req, res){
	res.send('전송완료');
    db.collection('post').insertOne( { name : req.body.title, date : req.body.date }, function() {
    	console.log('저장완료')
   	});
});

/add로 POST 요청시 DB에 저장하려고 한다면 위 처럼 코드를 짜면 된다.
저번에 작성했던 예제코드에서 내용만 조금 바꿨다. 이렇게 하면 폼에서 전송시키는 데이터를 DB에 저장한다.
res.send() 는 항상 작성해서 서버에서 보내주도록 해야한다. 안그럼 브라우저가 멈춘다.

/list 방문시 ejs 파일 보내기

그냥 HTML 파일만 보내면 Static 페이지가 된다.
HTML에 실제 DB 데이터를 넣어서 보내줄 수 없기 때문이다.
때문에 EJS, Pug 같은 템플릿 엔진을 사용한다. Pug에 대해선 나중에 사용법을 다시 알아보기로 하고 EJS에 대해 좀 더 알아보자. EJS는 서버 데이터를 HTML에 쉽게 넣을 수 있도록 도와주는 HTML 렌더링 엔진이다.

설치는 npm install ejs 하면 된다.

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

이걸 server.js 상단에 작성한다.

EJS 파일 만들기

EJS 파일은 html과 동일하게 쓰되 중간중간 EJS 문법을 사용하면 된다.
작업 폴더 내 views라는 이름의 폴더를 만든 후 list.ejs 파일을 만들자.(필수)

EJS 파일 기본 문법

<h1><%= user.name %></h1>

HTML 중간에 서버 데이터를 넣고 싶을 때 이렇게 사용한다.

<% if (user) {%>
	<h1><%= user.name %></h1>
<% } %>

EJS를 사용시 HTML에서 자바스크립트 문법이 사용 가능해진다.
위 코드처럼 <% %>내부에 자바스크립트 문법을 담으면 된다.

MongoDB에서 데이터 꺼내오기

db.collection('post').find()
db.collection('post').findOne()
이런식으로 데이터를 꺼내올 수 있다.

post 콜렉션에 저장된 모든 데이터를 가져오는 명령을 주는 코드를 작성하려면 아래와 같다.

(server.js)

app.get('/list', function(req, res){
	db.collection('post').find().toArray(function(err,result){
    	console.log(result)
        res.render('list.js')
    })
});

.find().toArray()라고 작성하면 collection('post')에 있는 모든 데이터를 Array 자료형으로 가져온다.
ex) [자료1, 자료2, ...]

데이터를 list.ejs 파일에 보내는 법

(server.js)

app.get('/list', function(req, res){
	db.collection('post').find().toArray(function(err, result) {
    	console.log(result)
        res.render('list.ejs', { posts : result })
    })
});

가져온 데이터를 list.ejs 파일에 보내주면 접속자들이 데이터를 확인 가능하다.
.render()라는 함수에 둘째 파라미터를 적어주게 되면 list.ejs 파일을 렌더링함과 동시에 { post.result } 라는 데이터를 함께 보내줄 수 있다.
(정확히는 result 데이터를 post 이름으로 ejs 파일에 보내주는 것이다.)

(views/list.ejs)

<h4><%= posts %></h4>
<p><%= posts %></p>

이런식으로 html에 데이터를 넣어줄 수 있다.
posts만 넣어도 데이터가 출력 되는데 result 데이터를 posts 이름으로 보냈기 때문이다.
result 데이터를 출력 해보면 [{blabla}, {blabla}] 이렇게 되어 있으니
원하는 제목과 날짜 데이터를 출력하려면

(views/list.ejs)

<h4><%= posts[0].name %></h4>
<p><%= posts[0].date %></p>

이런식으로 쓰면 된다.

(views/list.ejs)

<h4><%= posts[0].name %></h4>
<p><%= posts[0].date %></p>

<h4><%= posts[1].name %></h4>
<p><%= posts[1].date %></p>

위 처럼 사용하면 반복되는 코드가 너무 많아지니 반복문으로 축약할 수 있다.

(views/list.ejs)

<% for (let i = 0; i < posts.length; i ++) { %>
  <h4><%= posts[i].name %></h4>
  <p><%= posts[i].date %></p>
<% } %>

이런식으로 바꿔서 작성이 가능하다.

반복할 때마다 같은 제목이 반복 출력 되는 걸 방지하기 위해 posts[0]을 posts[i]로 바꿔 반복 시켜주고 반복문 안의 인자를 posts.length로 작성해 posts 갯수만큼 반복문을 돌게 하여 확장성을 높였다.