NodeJS가 죽도록 이해되지 않는다면

저는 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