[Node.js] 웹애플리케이션 제작 - 1

지금까지 작성한 포스팅들을 베이스로 웹애플리케이션을 제작해볼 것이다.
사실 개념을 숙지하는 것도 중요하지만 실습을 통해 여러가지 경험을 해보는 것이 더 중요하다고 생각한다.
그래서 한 번 애플리케이션을 직접 만들어보기로 했다.

사용자로부터 어떠한 정보들을 입력받고, 그렇게 입력받은 정보들을 서버에 저장하고, 사용자가 필요한 정보를 요청하면 그것을 제공하는 로직의 애플리케이션이다.

여기서의 핵심은 데이터를 어디에 어떻게 저장하는지다.
우리가 일상생활에서 사용하는 대다수의 웹애플리케이션들은 데이터들을 데이터베이스(DB)에 저장한다.
하지만 이번에 만들 애플리케이션은 데이터베이스에 저장하는 것이 아닌, 파일에 저장하는 형식으로 만드려고한다. 어떻게보면 파일에 저장하는 형식도 일종의 데이터베이스와 비슷한 개념이긴하다.
파일의 가장 중요한 장점은 사용하기가 굉장히 쉽다 라는 것이다. 특별한 개념이 많이 요구되지 않는다.

 

 

 

var express = require('express');

node_modules 디렉토리 내에 있는 express 모듈을 가져와 로드해준다.

 

 

 

var app = express();

express가 리턴하는 것은 함수이고, 해당 함수를 담는 변수인 app을 선언한다.

 

 

 

app.listen(7777, function () {
    console.log('Connected, 7777 port!');
});

listen() 메서드를 통해 특정 port를 listening할 수 있게 한다.
7777포트에 연결되면, function() 이라는 callback 함수를 호출하게 되면서 연결되었다는 사실을 알려준다.

 

 

다음은 글 작성에 관한 라우팅이다.
/topic/new로 접근했을 때 새로운 글을 작성하는 폼을 만들 것이다.

 

그 전에 views라는 디렉토리를 생성하고, 이 곳에 템플릿파일들을 저장한다.
우리는 pug를 사용할 것이기 때문에 미리 설치한다.

 

npm install pug --save

pug의 모듈을 프로젝트에 포함시킨다.

app.set('views', './views');
app.set('view engine', 'pug');
app.get('/topic/new', function (req, res) {
    res.render('new');
});

 

 

 

 

그리고 나서 views 디렉토리 내에 new.pug 라는 파일을 생성한다.

doctype html
html
    head

우선 템플릿파일이 잘 작동하는지를 체크하기 위해 간단한 코드만 넣었다.

이 때, 웹페이지 소스를 보면 줄바꿈이 되어있지 않아 불편하므로 

app.locals.pretty = true;

속성을 주어 가독성을 더 좋게 한다.

 

 

 

new.pug파일에

meta(charset='utf-8')

를 추가로 작성하여 utf-8 방식을 사용한다는 사실을 웹페이지가 웹브라우저에게 알려준다.

 

 

 

body
        form
            p
            input(type='text', name='title' placeholder='title')

body 태그를 만들고 그 안에 form  태그를 만든다. 그리고 텍스트박스를 한 개 만들어준다.
placeholder 속성은 아무것도 작성하지 않은 텍스트박스에 미리 특정 텍스트를 띄워주는 역할을 한다.
위에서는 'title'이라는 텍스트를 띄운다.

 

 

 

body
        form(action='/topic' method='post')
            p
            input(type='text', name='title' placeholder='title')
            p
            textarea(name='description')
            p
            input(type='submit')

코드를 더 수정해서 POST 방식을 사용하도록한다.
그리고 textarea를 만들어주고, 데이터를 전송할 버튼도 한 개 생성한다.

 

 

 

하지만 여기까지 작성하고 제출버튼을 누르면 Cannot POST /topic 이 뜬다.
그래서 /topic에 대한 라우팅을 해줘야한다.

app.post('/topic', function (req, res) {
   
});

우선 프레임부터 만들어준다.

또한 POST 방식에서는 body-parser를 사용해야하기 때문에 따로 설치해준다.

npm install --save body-parser

 

 

설치가 완료되었다면 이제 사용하면 된다.

 

 

 

var bodyParser = require('body-parser');

body-parser 모듈을 로드해준다.

 

 

 

app.use(bodyParser.urlencoded({extended: false}));

이제 애플리케이션이 bodyParser를 사용한다.

 

 

 

app.post('/topic', function (req, res) {
    var title = req.body.title;
    var description = req.body.description;
    res.send('Hi, post, ' + req.body.title);
});

/topic에 대한 라우팅을 다음과 같이 수정한다.

 

 

 

var fs = require('fs');

FileSystem의 약자인 fs 모듈을 로드한다.
그리고 사용자가 입력한 데이터들이 저장될 data라는 디렉토리를 생성한다.

 

 

 

app.post('/topic', function (req, res) {
    var title = req.body.title;
    var description = req.body.description;
    fs.writeFile('data/' + title, description, function (err) {
        if (err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        res.send('Success!');
    });
});

writeFile을 이용해 데이터를 저장한다.
그리고 if문을 통해 예외처리를 해준다.
에러가 발생했을 때 if문 내에 있는 구문만 실행되고, if문 밖에 있는 res.send('Success!'); 구문은 실행되지 않는다.

이 부분까지 하면 /topic/new 페이지에서 제출버튼을 눌렀을 때에 data 디렉토리에 파일이 로컬로 저장되게 된다.

 

 

 

<new.pug 전체코드>

doctype html
html
    head
        meta(charset='utf-8')
    body
        form(action='/topic' method='post')
            p
            input(type='text', name='title' placeholder='title')
            p
            textarea(name='description')
            p
            input(type='submit')

 

<app.js 전체코드>

var express = require('express');
var bodyParser = require('body-parser');
var fs = require('fs');
var app = express();
app.use(bodyParser.urlencoded({extended: false}));
app.locals.pretty = true;
app.set('views', './views');
app.set('view engine', 'pug');
app.get('/topic/new', function (req, res) {
    res.render('new');
});
app.post('/topic', function (req, res) {
    var title = req.body.title;
    var description = req.body.description;
    fs.writeFile('data/' + title, description, function (err) {
        if (err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        res.send('Success!');
    });
});
app.listen(7777, function () {
    console.log('Connected, 7777 port!');
});