Node.js + MongoDB DB데이터 가져오기(ejs [lib])
/add로 POST요청시 DB에 저장하는 코드를 만들었다.
app.post('/add', function(요청, 응답){
응답.send('전송완료');
db.collection('post').insertOne( { 제목 : 요청.body.title, 날짜 : 요청.body.date } , function(){
console.log('저장완료')
});
});저번글에서 데이터저장하던 예제코드를 똑같이 작성하고 안에 내용물만 살짝 바꿨습니다.
그럼 이제 폼에서 뭔가 전송시킬 때마다 DB에 데이터를 저장합니다.
그리고 참고로 응답.send() 이 부분은 항상 존재해야합니다.
전송이 성공하든 실패하든 뭔가 서버에서 보내주어야합니다. 안그러면 브라우저 멈춰요.
메세지 같은걸 보내주기 싫다면 간단한 응답코드나 아니면 리다이렉트(페이지강제이동)를 해주는 코드도 있습니다.
그러나 넣기만하고 데이터를 가져오지 못한다 데이터를 가져오는 법을 알아보자
/list로 방문하면 ejs 파일을 보내주기
그냥 HTML 파일만 보내주면 흔히 말하는 Static페이지가 됩니다.
HTML에 실제 DB 데이터를 넣어서 보내줄 수가 없으니까요.
그래서 EJS, Pug같은 템플릿 엔진을 사용합니다.
EJS는 서버 데이터를 HTML에 쉽게쉽게 박아넣을 수 있게 도와주는 일종의 HTML 렌더링 엔진입니다.
그럼 우리도 이걸 설치해서 DB 데이터를 HTML에 박아넣어보도록 합시다.
설치는 터미널에서 npm install ejs 하시고
app.set('view engine', 'ejs');이걸 Server.js 상단에 적어주면 되겠습니다. const 여러개 있는 곳 바로 밑에 적으면 될듯요.
EJS 파일 만들기
EJS 파일은 그냥 html과 똑같이 만들어 쓰시면 됩니다.
근데 중간중간 EJS 문법으로 데이터를 꽂아넣을 뿐입니다.
그래서 파일을 빨리 하나 만들어봅시다.
그 전에 주의할점 : 작업폴더 내에 views라는 이름의 폴더를 하나 만드신 후
거기에 list.ejs 파일을 만드셔아합니다.
html처럼 생성뒤 코드에 !치고 엔터하면 자동완성으로 html태그가 완성된다.
EJS 파일 기본적인 문법
당장 쓸 것 딱 두개만 알려드리겠습니다.
<h2><%= user.name %></h2>HTML 중간중간에 서버 데이터를 집어넣고 싶을 땐 이렇게 사용합니다.
<%= 서버에서 보낸 데이터의 변수명 %>
그럼 HTML 글자로 렌더링 됩니다. 끝입니다.
EJS를 사용하면 HTML에 여러가지 자바스크립트 문법을 사용가능합니다.
<% if (user) { %>
<h2><%= user.name %></h2>
<% } %>HTML에 if문을 적용하거나 반복문을 적용하고 싶을 땐
<% %> 내부에 자바스크립트 문법을 담으시면 됩니다.
위의 예제 코드는 user 라는 변수가 참일 때만 내부 <h2> 코드를 보여줄 것입니다.
이게 끝입니다.
MongoDB에서 데이터를 꺼내고 싶다면
db.collection('post').find()
db.colleciton('post').findOne()
이런 식으로 쓰시면 데이터를 꺼낼 수 있습니다.
근데 우리는 "post 콜렉션에 저장된 모든 데이터를 가져와주세요~" 라고 명령을 주고 싶습니다. 그렇다면 이렇게 칩니다.
(server.js)
app.get('/list', function(요청, 응답){
db.collection('post').find().toArray(function(에러, 결과){
console.log(결과)
응답.render('list.ejs')
})
})저번시간 코드를 이렇게 업데이트하면 되겠군요.
.find().toArray() 라고 적으시면 collection('post')에 있는 모든 데이터를 Array 자료형으로 가져옵니다.
[자료1, 자료2 ...] 이런 식으로 담겨오게 됩니다. 궁금하면 결과라는 변수를 콘솔창에 출력해보십시오.
그리고 자료들이 안오거나 에러나면 실제 DB에 데이터 몇개가 제대로 저장되어 있는지 확인합시다.
DB 데이터가 오염되어있거나 그러면 원하는대로 보이지 않을 수 있으니까요.
데이터를 list.ejs 파일에 보내고 싶다면?
그리고 가져온 데이터를 list.ejs 파일로 보내주면 이제 접속자들이 그 데이터들을 볼 수 있겠죠?
(server.js)
app.get('/list', function(요청, 응답){
db.collection('post').find().toArray(function(에러, 결과){
console.log(결과)
응답.render('list.ejs', { posts : 결과 })
})
}).render()라는 함수에 둘째 파라미터를 요로케 적어주시면
list.ejs 파일을 렌더링함과 동시에 {posts: 결과} 라는 데이터를 함께 보내줄 수 있습니다.
(정확히 말하면 결과라는 데이터를 posts 라는 이름으로 ejs 파일에 보내주세요~ 입니다)
그러면 이제 list.ejs 파일에서 데이터를 가지고 여기저기 쑤셔 집어넣는 일만 남았군요.
데이터를 가지고 EJS 파일을 꾸며보자
(views/list.ejs)
<h4>임시 제목</h4>
<p>임시 날짜</p>
<h4>임시 제목</h4>
<p>임시 날짜</p>대충 이런 HTML 몇개를 만들어 주시고 여기에 데이터를 꽂아넣으면 되겠습니다.
(views/list.ejs)
<h4><%= posts %></h4>
<p><%= posts %></p>
<h4>임시 제목</h4>
<p>임시 날짜</p>posts 까지만 꽂아도 뭔가 나오죠? 아까 결과라는 데이터를 posts 라는 이름으로 여기에 보냈으니까요.
근데 결과라는 데이터는 출력해보시면 [{어쩌구}, {어쩌구}] 이런 식으로 되어있으니
원하는 제목과 날짜 데이터를 출력하려면
(views/list.ejs)
<h4><%= posts[0].제목 %></h4>
<p><%= posts[0].날짜 %></p>
<h4><%= posts[1].제목 %></h4>
<p><%= posts[1].날짜 %></p>이런 식으로 쓰시면 되겠습니다. 기본적인 Object, Array에서 원하는 자료를 뽑는 문법이니 설명은 패스합니다.
에러나면 실제 DB에 데이터 몇개가 제대로 저장되어 있는지 확인합시다. (두번째 강조)
반복문을 사용하자
반복되는 코드를 발견하면 반복문으로 축약할 수 있습니다.
(views/list.ejs)
<% for (var i = 0; i < 2; i ++) { %>
<h4><%= posts[0].제목 %></h4>
<p><%= posts[0].날짜 %></p>
<% } %>for (var i = 0; i < 반복시킬 횟수; i++) { 반복시킬 코드 }
자바스크립트에선 이렇게 반복문을 씁니다.
그리고 EJS 안에서 자바스크립트 문법을 쓰실 땐 <% %> 내부에 담으셔야합니다.
그럼 위의 예제코드에 따르면 내부 코드가 2번 반복됩니다.
새로고침 해보시면 제목이 2개 생기죠?
근데 문제가 있죠? 같은 제목이 2번 반복됩니다.
반복할 때마다 각각 다른 제목을 출력시키고 싶으면 i라는 변수를 활용합니다.
(views/list.ejs)
<% for (var i = 0; i < posts.length; i ++) { %>
<h4><%= posts[i].제목 %></h4>
<p><%= posts[i].날짜 %></p>
<% } %>i 라는 변수는 반복문이 돌 때마다 0,1,2,3 ... 이렇게 차례로 나아가는 변수라고 보시면 됩니다.
그래서 이걸 써주면 각각 다른 제목을 출력해줄 수 있겠군요.
그리고 반복문 안의 인자를
for (var i = 0; i < posts.length; i ++) { 반복시킬 코드 }
이렇게 바꿔주면
아까처럼 항상 2번만 도는게 아니라 posts 갯수만큼 반복문이 돌게 되니까 확장성 있는 코드가 되겠군요.