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

출력을 하기 위해서 우리는 라우터를 만들어줘야한다.
/topic이라는 라우터가 있는데 왜 만들어야할까에 대해 의문을 가질 수 있다.
이유는 사용자가 url상으로 입력해서 들어오는 방식은 POST 방식이 아닌 GET 방식이기 때문이다.
그래서 GET 방식의 /topic을 한 개 더 만들어줘야하는 것이다.

 

 

 

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

우선 다음과 같이 프레임을 만들어준다.

 

 

 

fs.readdir('data', function (err, files) {
        if (err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        res.render('view', {topics:files});
    })

그리고 다음과 같이 readdir를 통해 data 디렉토리 내에 있는 파일들을 읽는 기능을 하는 코드를 작성한다.
에러에 대한 예외처리까지 해준다.
참고로 바뀔 수 있는 정보에 대한 처리는 : 으로 한다.

 

body
        h1 Server Title
        ul
            each topic in topics
                li= topic

view.pug 파일의 body부분을 위와 같이 each를 사용하여 topics를 한 개씩 순회하여 li에 대입하게 된다. 그러면 사용자로부터 데이터가 들어올 때 우리가 코드를 수정하지 않고도 그 데이터들을 사용할 수 있다.

 

 

 

추가로 body부분을 수정할 것이다.

body
        h1 Server Title
        ul
            each topic in topics
                li
                    a(href='/topic/'+topic)= topic

( ) 안은 속성을 의미한다. href 속성값으로 /topic/을 주고 웹페이지 소스를 리로드해보면 <a href="/topic/파일명">파일명</a> 가 된다.

 

 

 

그러면 웹페이지에 파일명에 링크가 생기면서 들어갈 수 있을텐데 들어가면 오류가 날 것이다.
Cannot GET /topic/파일명
다시 우리는 라우터를 만들어줘야한다.

 

app.get('/topic/:id', function (req, res) {

})

다음과 같이 프레임을 또 다시 만들어준다.

 

 

 

app.get('/topic/:id', function (req, res) {
    var id = req.params.id;
});

위 코드에서 '/topic/:id'의 id는 req.params.id의 id와 매칭된다.
/topic/:name이라면 req.params.name이 되어야할 것이다.

 

 

 

fs.readFile('data/' + id, 'utf-8', function (err, data) {
        if (err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        res.send(data);
    })

위 코드를 추가했다.
readFile을 사용하여 data디렉토리 아래에 있는 파일들을 읽는다.
그리고 callback함수를 통해 2개의 인자를 전달하는데 한 개는 err, 한 개는 data 이다.
이 때, 인자의 이름은 상관없지만 위치는 매우 중요하다.

에러있을 시에는 
console.log(err);
res.status(500).send('Internal Server Error');
를 실행하고,

에러가 없이 정상적으로 실행될 때에는
res.send(data);
를 실행하게 된다.



추가로 우리는 웹페이지에서 링크를 클릭했을 때, 그에 해당하는 본문 내용을 아래에 출력되게 할 것이다.
그래서 마지막 줄 res.send(data);를 res.render('view', {title:id});로 수정해주고, view.pug 파일도 수정해준다.

app.get('/topic/:id', function (req, res) {
    var id = req.params.id;
    fs.readFile('data/' + id, 'utf-8', function (err, data) {
        if (err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        res.render('view', {title:id});
    })
});

doctype html
html
    head
        meta(charset='utf-8')
    body
        h1 Server Title
        ul
            each topic in topics
                li
                    a(href='/topic/'+topic)= topic
        article
            h2= title

하지만 이렇게 하면 에러가 날 것이다.
왜냐하면 /topic 라우터에서는 topics를 주지만, /topic/:id 라우터에서는 topics를 안주기 때문이다.
그래서 /topic 라우터에서 그대로 가져오면 된다.

 

 

 

최종코드는 다음과 같다.

app.get('/topic/:id', function (req, res) {
    var id = req.params.id;
    fs.readdir('data', function (err, files) {
        if (err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        fs.readFile('data/' + id, 'utf-8', function (err, data) {
        if (err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        res.render('view', {topics:files, title:id, description:data});
        })
    })
});

위 코드의 흐름을 보면 가장 먼저 사용자가 topic의 특정한 파라미터를 갖고 들어오면, readdir를  통해 data 디렉토리에 있는 파일 목록을 가져온다.
성공시, readFile을 통해서 files와 id값에 해당되는 데이터를 읽어온다. 이 때의 files는 readdir했을 때 가져온 정보이다. description의 정보는 readFile로 읽어온 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')

 

<view.pug 전체코드>

doctype html
html
    head
        meta(charset='utf-8')
    body
        h1 Server Title
        ul
            each topic in topics
                li
                    a(href='/topic/'+topic)= topic
        article
            h2= title
            = description

 

<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.get('/topic', function (req, res) {
    fs.readdir('data', function (err, files) {
        if (err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        res.render('view', {topics: files});
    })
});
app.get('/topic/:id', function (req, res) {
    var id = req.params.id;
    fs.readdir('data', function (err, files) {
        if (err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        fs.readFile('data/' + id, 'utf-8', function (err, data) {
        if (err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        res.render('view', {topics:files, title:id, description: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!');
    });
});
app.listen(7777, function () {
    console.log('Connected, 7777 port!');
});