이제까지 내가 작성했던 코드들은 index.js에 모든게 모여있다. 그러므로 무언가 수정하기도 힘들고 점차 알아보기가 힘들어 졌다. 점차 자바스크립트와 노드의 문법이 익숙해지는 것 같아서 Django와 같이 MVT 패턴으로 (MVC 패턴과 똑같지만 용어만 좀 다르다고 생각해도 된다.) 분리하려고 한다.

1
2
3
- Model      => Model
- View       => Template
- Controller => View
1
2
3
"scripts": {
    "start": "node src/index.js"
},

우선 package.json에 위와같은 스크립트를 추가하여 index.js가 먼저 실행되게 할 것이다.

1
2
3
4
5
6
var app  = require('./urls');
var http = require('http').Server(app);

http.listen(3000, () => {
	console.log('SERVER RUN IN PORT 3000');
});

index.js는 위와같이 구현되었다. 그럼 app이 불러오는 urls.js에서 사용자가 접속할 url을 명시해 둘 것이다.

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

var app = express();

app.get('/',          views.renderIndex);
app.get('/write',     views.renderWrite);
app.get('/posts/:id', views.renderPosts);

app.use(express.static(__dirname + '/static'));

module.exports = app;

위와같이 사용자가 어떤 URL에 접근했을 때 어떤 로직을 처리할 것인지만 명시해둔다. 그리고 로직은 views.js에 작성할 것이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
    renderIndex: (req, res) => {
        res.sendFile(__dirname + '/templates/index.html');
    },
    renderWrite: (req, res) => {
        res.sendFile(__dirname + '/templates/write.html');
    },
    renderPosts: (req, res) => {
        res.json({
            id: req.params.id,
        });
    },
}

위와같이 views.js까지 작성하면 templateshtml 파일을 생성하면 완벽한 MVT(MVC) 패턴으로 분리되었다. 그대로 완료했다면 아래와 같은 구조가 되었을 것이다.

1
2
3
4
5
6
7
src/templates/index.html
src/templates/write.html
src/index.js
src/views.js
src/urls.js
package-lock.json
package.json

이제 최상위 디렉터리에서 npm start를 입력하면 된다.

WRITTEN BY

배진오

소비적인 일보단 생산적인 일을 추구하며, 좋아하는 일을 잘하고 싶어합니다 :D
im@baejino.com