Node.js | Express Web 어플리케이션 자동 생성 | 새로운 페이지 작성

Tags:

그럼, 이 기본적인 구조를 사용하여 새 페이지를 만들어 보자. 이번에는 /helo를 접근하여 표시되는 페이지를 만들려고 한다. 필요한 것을 정리한다.

routes 안에 helo.js

/helo의 처리를 기술하는 스크립트 파일로, routes 폴더 안에 helo.js 파일을 작성한다.

var express = require('express');
var router = express.Router();
 
/* GET helo page. */
router.get('/', function(req, res, next) {
    res.render('helo', {
        title: 'Helo',
        data: {
            '성진':'sungjin@foryou',
            '원석':'wonsuck@flower',
            '병호':'byeongho@devkuma.com'
        }
    });
});
 
module.exports = router;

이 중에 router.get으로 ‘/‘렌더링하는 처리를 설정해 두었다. 그리고 간단한 샘플로 title와 data를 템플릿에 전달하여 처리하도록 하고 있다.

views 안에 helo.ejs

/helo으로 표시되는 템플릿 파일이다.

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <table>
    <% for(var key in data){ %>
        <tr><td><%= key %></td>
        <td><%= data[key] %></td></tr>
    <% } %>
    </table>
  </body>
</html>

여기에서는 <%= title %>으로 title을 출력하는 문장과 변수 data 안에 키와 값을 <table>에 정리하여 출력하는 문장을 기술하고 있다.

app.js

메인 프로그램인 app.js 파일이다.

var helo = require('./routes/helo');
 
app.use('/helo', helo);

이 안에는 helo = require('./routes/helo')으로 helo.js의 exports를 변수 helo에 대입하고, app.use('/helo', helo);으로 /helo 액세스 처리를 helo 객체의 helo 메소드로 설정하고 있다.

public의 stylesheets 폴더 안에 style.css

마지막으로 <table> 스타일 시트를 추가한다. 스타일시트는 “public"의 “stylesheets"폴더에 저장된다.

table tr td{
    background-color:#eeeeff;
    padding: 3px;
}

이 안에 ‘style.css’를 열고, <table>의 스타일을 기술해 두면 된다.

대충 편집이 끝나면, Node.js에서 app.js를 실행하고, http://localhost:3000/helo에 방문해 본다. 만든 페이지가 제대로 표시되는지 확인한다.

최종 수정 : 2018-07-16