HTML에 DB데이터 꽂아넣는 법 (EJS & DB데이터 읽기)

/list로 방문하면 ejs 파일을 보내주자

 

그냥 HTML 파일만 보내주면 흔히 말하는 Static페이지가 됩니다.

HTML에 실제 DB 데이터를 넣어서 보내줄 수가 없으니까요. 

그래서 EJS, Pug같은 템플릿 엔진을 사용합니다. 

EJS는 서버 데이터를 HTML에 쉽게쉽게 박아넣을 수 있게 도와주는 일종의 HTML 렌더링 엔진입니다. 

그럼 우리도 이걸 설치해서 DB 데이터를 HTML에 넣어보도록 합시다

 

 

설치는 터미널에서 npm install ejs 하시고 

 

이걸 Server.js 상단에 적어주면 되겠습니다.

 

 

 

 

 

EJS 파일 만들기 

EJS 파일은 그냥 html과 똑같이 만들어 쓰시면 됩니다.

근데 중간중간 EJS 문법으로 데이터를 꽂아넣을 뿐입니다.

그래서 파일을 빨리 하나 만들어봅시다. 

그 전에 주의할점 : 작업폴더 내에 views라는 이름의 폴더를 하나 만드신 후 거기에 list.ejs 파일을 만드셔아합니다.

 

다시한번 강조합니다. list.ejs 파일을 views 라는 폴더를 생성한 뒤에 거기 안에 담으셔야합니다.

그리고 내부 코드는 그냥 index.html에 있는거 전부 복붙해오시면 되겠습니다. 

 

 

 

 

 

 

EJS 파일 기본적인 문법 

 

당장 쓸 것 딱 두개만 알아봅시다.

 

HTML 중간중간에 서버 데이터를 집어넣고 싶을 땐 이렇게 사용합니다.

<%= 서버에서 보낸 데이터의 변수명 %>

그럼 HTML 글자로 렌더링 됩니다. 끝입니다. 

 

 

 

EJS를 사용하면 HTML에 여러가지 자바스크립트 문법을 사용가능합니다. 

HTML에 if문을 적용하거나 반복문을 적용하고 싶을 땐

<% %> 내부에 자바스크립트 문법을 담으시면 됩니다. 

위의 예제 코드는 user 라는 변수가 참일 때만 내부 <h2> 코드를 보여줄 것입니다. 

이게 끝입니다. 

 

 

 

 

 

 

MongoDB에서 데이터를 꺼내고 싶다면 

db.collection('post').find() 

db.colleciton('post').findOne()

이런 식으로 쓰시면 데이터를 꺼낼 수 있습니다. 

근데 우리는 "post 콜렉션에 저장된 모든 데이터를 가져와주세요~" 라고 명령을 주고 싶습니다. 그렇다면 이렇게 칩니다.

 

.find().toArray() 라고 적으시면 collection('post')에 있는 모든 데이터를 Array 자료형으로 가져옵니다.

[자료1, 자료2 ...] 이런 식으로 담겨오게 됩니다. 궁금하면 결과라는 변수를 콘솔창에 출력해보세요

그리고 자료들이 안오거나 에러나면 실제 DB에 데이터 몇개가 제대로 저장되어 있는지 확인합시다. 

DB 데이터가 오염되어있거나 그러면 원하는대로 보이지 않을 수 있으니까요. 

 

 

 

 

 

데이터를 list.ejs 파일에 보내고 싶다면?

그리고 가져온 데이터를 list.ejs 파일로 보내주면 이제 접속자들이 그 데이터들을 볼 수 있겠죠? 

 

 

.render()라는 함수에 둘째 파라미터를 요로케 적어주시면

list.ejs 파일을 렌더링함과 동시에 {posts: 결과} 라는 데이터를 함께 보내줄 수 있습니다. 

(정확히 말하면 결과라는 데이터를 posts 라는 이름으로 ejs 파일에 보내주세요~ 입니다)

 

그러면 이제 list.ejs 파일에서 데이터를 가지고 여기저기 집어넣는 일만 남았군요. 

 

 

 

 

 

 

 

데이터를 가지고 EJS 파일을 꾸며보자 

posts 까지만 꽂아도 뭔가 나오죠? 아까 결과라는 데이터를 posts 라는 이름으로 여기에 보냈으니까요.

근데 결과라는 데이터는 출력해보시면 [{어쩌구}, {어쩌구}] 이런 식으로 되어있으니 

원하는 제목과 날짜 데이터를 출력하려면

 

 

 

이런 식으로 쓰시면 되겠습니다. 기본적인 Object, Array에서 원하는 자료를 뽑는 문법이니 설명은 패스합니다.

에러나면 실제 DB에 데이터 몇개가 제대로 저장되어 있는지 확인합시다. (두번째 강조)

 

 

 

 

 

 

반복문을 사용하자

 

반복되는 코드를 발견하면 반복문으로 축약할 수 있습니다. 

 

 

 

 

 

 

 

<출처 : 코딩애플 : Node.js, MongoDB로 2시간 만에 빠르게 웹서비스 만들기>