저는 NodeJS가 죽도록 어려웠습니다. 저는 서버 사이드 언어를 처음 접해본게 PHP였고 NodeJS는 PHP와는 전혀 다른 방식으로 되는듯 보였습니다. 시작하는데 어려움을 많이 겪었고 중급 난이도의 책을 먼저 본것도 큰 낭패였습니다. 하지만 NodeJS의 개념을 어느정도 알고나니 조금은 이해가 됐습니다. 이 글은 NodeJS를 처음 접하는 사람이 대상이며 조금이나마 도움이 되길 바라는 마음으로 작성되었습니다.


디렉터리 구조

먼저 Express 프레임워크를 이용해서 프로젝트를 생성하면 다음과 유사한 디렉터리 구조가 등장합니다.

1
2
3
4
5
6
7
8
9
public
- css
  - style.css
views
- index.html
- about.html
router
- main.js
server.js


server.js

그리고 server.js에는 다음과 같은 코드가 작성되어 있다고 생각해 보도록 하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
var express = require('express');
var app = express();
var router = require('./router/main')(app);

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

var server = app.listen(3000, function() {
    console.log("express server started in port 3000.");
});

app.use(express.static('public'));

1행의 require은 모듈을 불러오는 것입니다. 다만 3행의 router의 경우에는 사용자가 작성한 파일을 불러오고 있습니다.


/router/main.js

그럼 router에 있는 main을 살펴보도록 하겠습니다.

1
2
3
4
5
6
7
8
9
module.exprots = function(app)
{
    app.get('/', function(req, res) {
        res.render('index.html');
    });
    app.get('about', function(req, res) {
        res.render('about.html');
    });
}

사용자가 접속한 경로에 따라서 어떤 파일을 보여줄지 나열하고 있습니다. 이와같은 기능을 하는 router는 별도로 작성하여 보관하는 것이 통용되는 방법입니다.


server.js

다시 server.js의 남아있는 부분을 살펴보도록 하겠습니다.

1
2
3
4
5
6
7
8
9
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);

var server = app.listen(3000, function() {
    console.log("express server started in port 3000.");
});

app.use(express.static('public'));

1행은 views/views 디렉터리로 지정하고 있습니다. 이는 Model, View, Controller를 사용하는 소프트웨어 공학의 MVC 모델에 근거한 것입니다. index.html 파일이 /views 디렉터리에 들어있지만 우리는 views/views로 지정했으므로 보여질 뷰 모델의 경로를 생략할 수 있습니다.

2행과 3행은 뷰 엔진을 ejs로 설정한 것입니다. ejs는 중복된 레이아웃을 편리하게 만들고 관리할 수 있도록 만들어진 템플릿입니다. 아래와 같이 작성됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
  <head>
    <% include ../part/header %>
  </head>
  <body>
    example ejs
    <footer>
      <% include ../part/footer %>
    </footer>
  </body>
</html>

다시 server.js의 남아있는 부분을 살펴보도록 하겠습니다.

1
2
3
4
5
var server = app.listen(3000, function() {
    console.log("express server started in port 3000.");
});

app.use(express.static('public'));

1, 2, 3행은 3000번 포트를 이용해서 웹서버를 열게됩니다. 그 아래 5행에서 express.static이라는 메서드를 사용했습니다. staiticcss, js, image와 같은 정적 파일입니다. /public 디렉터리에 정적파일이 있음을 설정합니다.


/views/index.html

/views/index.html의 내용을 살펴보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Main Page</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="/css/style.css">
    <script src="/js/main.js"></script>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

살펴볼 부분은 style.css를 읽어오는 부분입니다. 보다시피 /public 디렉터리명을 생략하여 불러옵니다. 다시 디렉터리를 살펴봅시다.

1
2
3
4
5
6
7
8
9
public (정적파일)
- css
  - style.css
views (보여지는 파일)
- index.html
- about.html
router (보여지는 파일을 결정)
- main.js
server.js

마지막으로 server.js를 정리해 보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 모듈 읽어옴
var express = require('express');
var app = express();
var router = require('./router/main')(app);

// 뷰의 경로와 엔진을 선택
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.engine('html', require('ejs').renderFile);

// 웹서버 구동
var server = app.listen(3000, function() {
    console.log("express server started in port 3000.");
});

// 정적 파일 경로 선택
app.use(express.static('public'));
WRITTEN BY

배진오

하고싶은 건 다 하면서 사는게 목표
im@baejino.com

comments powered by Disqus