[Node.js][express] ejs로 서버에서 받은 JSON 데이터 보여주기

가끔 간단하게 Node.js에서 화면이 보여져야 하는 경우가 있는데, 단순히 화면을 보여주기만 하는거라면 html 을 사용하면 된다.

하지만 node.js에서 구축한 서버에서 데이터를 받아 바로 뿌려주고 싶은 경우, 데이터에 따라 html이 동적으로 변하게 해야하는 경우에는 ejs, pug 등의 view engine을 이용하면 node.js에서 보낸 데이터를 보여주거나, html에서 반복문을 이용하는 등의 구현이 가능하다.

처음에는 pug를 더 선호했는데, html과 같지 않다보니 매번 찾거나 익숙해져야 사용이 편한 것 같다.

ejs의 경우 html 문법에서, 일부만 ejs 로 대체하면 되기 때문에 훨씬 빠르게 적용할 수 있어서 더 선호하는 편이다!

ejs 설정

먼저, node + express 환경이 구축되어 있다는 가정하에 진행하겠다.

npm i ejs

먼저 ejs를 설치해준다

app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');

app.js에 ejs 설정을 추가해준다

ejs 생성

루트폴더에 view라는 폴더를 생성해주고, 안에는 ejs 파일을 만들어준다

ejs의 경우 html에 코드안에 원하는 부분만 ejs를 적용해주면 되므로 html코드를 작성한다

+ ! (느낌표)입력 후 Tab키를 누르면 html 기본코드가 자동작성 된다! 꿀팁 ㅎㅎ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

^ 기본 HTML 코드

이제 여기서 받아온 데이터를 보여줄 부분에만 ejs코드를 추가하면 된다.

php와 비슷하다고 볼 수 있다

Express response

혹시 기존에 구축해둔 Node.js express 서버가 있다면

return res.send('데이터')

이 부분을

return res.render('view/notices', {data : {데이터});

이렇게 데이터를 바로 return 하는게 아니라 ejs 파일을 render하면서, 뒤에 원하는 데이터를 같이 보내주면 ejs파일에서 받은 데이터를 화면에 보여줄 수 있다!

data를 보내는 부분은 key : value 형식이며 {데이터}위치에 원하는 데이터를 넣어주면 된다

json형태의 response도 가능하다!

ejs 파일

response에 json을 보냈다고 가정하고 ejs 에서 띄워보자

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <th>index</th>
        <th>제목</th>
        <th>내용</th>
        <th>관리자이름</th>
        <th>고정</th>
        <th>공개</th>
        <% for(var i = 0; i<5; i++){ %>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
                <td>4</td>
                <td>5</td>
            </tr>
        <% } %>
    </table>
</body>
</html>

for문을 이용하여 table에 행을 5개 추가하는 코드를 구현해보았다.

위처럼 for문을 사용해야 하는 경우 <% %>로 코드를 묶고 내부에 html을 넣어주면 된다!

중괄호 닫는 부분도 따로 설정해주었는지 꼭 확인하자

위 코드 실행 시

이렇게 html문 반복이 잘 적용된걸 확인할 수 있다

이제 테이블 내용에 받은 response를 뿌려보자

response 형태는 json이다

처음에 JSON.parse 같은 코드를 사용해서 파싱해야하나 하면서 삽질을 엄청 했었다ㅜㅜ

하지만 node.js에서 데이터 접근 하듯이 배열의 경우 arr[i] 같은 형태, json key 값은 object.key 와 같은 형태로 접근하면 된다.

response 형태

{
  isSuccess: true,
  code: 1000,
  message: '성공',
  result: [
    TextRow {
      idx: 3,
      title: '오늘의 고정 공지',
      contents: 'test입니다',
      adminName: '손수연',
      createdAt: '2021년 05월 17일',
      pinned: 'Y',
      status: 0
    },
    TextRow {
      idx: 1,
      title: '오늘의 공지',
      contents: 'test입니다',
      adminName: '손수연',
      createdAt: '2021년 05월 13일',
      pinned: 'N',
      status: 0
    },
    TextRow {
      idx: 2,
      title: '오늘의 공지',
      contents: 'test입니다',
      adminName: '손수연',
      createdAt: '2021년 05월 13일',
      pinned: 'N',
      status: 0
    },
    TextRow {
      idx: 4,
      title: 'fghfgh',
      contents: 'fghfhfgh',
      adminName: '손수연',
      createdAt: '2021년 05월 17일',
      pinned: 'N',
      status: 0
    },
    TextRow {
      idx: 5,
      title: '테스트 공지',
      contents: 'fhgjfh',
      adminName: '손수연',
      createdAt: '2021년 05월 17일',
      pinned: 'N',
      status: 0
    },
    TextRow {
      idx: 6,
      title: 'dasdas',
      contents: 'dasdas',
      adminName: '손수연',
      createdAt: '2021년 05월 18일',
      pinned: 'N',
      status: 0
    },
    TextRow {
      idx: 7,
      title: '테스트 공지',
      contents: '테스트',
      adminName: '손수연',
      createdAt: '2021년 05월 18일',
      pinned: 'N',
      status: 0
    },
    ]}

response에 접근하여 뿌려주는 ejs코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <th>index</th>
        <th>제목</th>
        <th>내용</th>
        <th>관리자이름</th>
        <th>작성일</th>
        <th>고정</th>
        <th>공개</th>
        <% for(var i = 0; i<5; i++){ %>
            <tr>
                <td><%= i %></td>
                <td><%= data.result[i].title %></td>
                <td><%= data.result[i].contents %></td>
                <td><%= data.result[i].adminName %></td>
                <td><%= data.result[i].createdAt %></td>
                <td><%= data.result[i].pinned %></td>
                <td><%= data.result[i].status %></td>
            </tr>
        <% } %>
    </table>
</body>
</html>

for문에서는 <% %>를 사용했던 것과 달리 데이터를 뿌려줄 때는 <%= %> 를 사용하면 데이터가 화면에 보여지게 된다!

data는 받아온 response이고 (render 시 보낸 데이터 key값)

data의 result요소의 i번째 object에서 각 속성을 뽑아내고 있다

결과는 아래와 같다

서버에서 받아온 데이터 화면에 뿌려주기 성공!

저작자표시 (새창열림)

'🔙 Backend > 🟢 Node.js' 카테고리의 다른 글

[Node.js] Cookie 사용하기 🍪 (0)	2021.06.01
[Node.js][Express] alert 창 띄우고, 페이지 이동하기 (0)	2021.06.01
[Node.js][ejs] ejs로 HTML checkbox check 여부 설정하기 (0)	2021.06.01
[Node.js][express] html에서 ejs 사용시 html태그로 인식 되는 문제 (0)	2021.06.01
[Node.js]nodejs로 웹서버 만들기 (0)	2020.08.28

ejs 설정

ejs 생성

Express response

ejs 파일

'🔙 Backend > 🟢 Node.js' 카테고리의 다른 글

티스토리툴바