[Node.js] 웹애플리케이션 제작 - 3 코드 개선

앞전에 작성한 코드들을 더 깔끔하게 정리하고자한다. 중복 및 불필요한 코드를 제거할 것이다.
코드를 개선 및 정리하면 좋은 점은 가독성뿐만 아니라 코드의 유지보수 측면에서도 매우 편리하다.

 

app.get(['/topic', '/topic/:id'], 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});
    })
});

배열을 이용해 라우터의 경로를 2개를 설정함으로써 /topic으로 접근했을 때 실행되고, /topic/:id로 접근했을 때에도 실행된다.
/topic으로 접근할 때에는 그대로 실행하면 되지만 id를 끼고 접근했을 때에는 다르게 동작해야하기 때문에 추가적인 수정이 필요하다.

app.get(['/topic', '/topic/:id'], function (req, res) {
    fs.readdir('data', function (err, files) {
        if (err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        var id = req.params.id;
        if (id) {
            // 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', {topics: files, title: id, description: data});
            })
        } else {
            // id값이 없을 때
            res.render('view', {topics: files, title:'Welcome', description:'Hello, JavaScript for server.'});
        }
    })
});

이는 추가적인 수정이 이루어진 코드이다.
if문으로 id값이 있을 때와 없을 때를 구분하여 조건문을 걸었고,
각각에 해당하는 코드를 작성했다.

 

 

 

현재로서는 홈화면으로 가기 위해서는 url을 사용자가 직접 수정해야하는 불편함이 있다.
이를 해결하기 위해 Server Title 부분에 링크를 넣어 홈화면으로 갈 수 있도록 만들 것이다.

기존에 있던 view.pug 코드에서 h1 Server Title 부분을 다음과 같이 수정하면 된다.

a(href='/topic') Server Title

 

 

 

 

비슷한 로직으로 글쓰기 기능도 사용자가 직접 url에 /topic/new를 작성해야하는 불편함이 있다.
이또한 수정이 필요해보인다.

view.pug 파일에 아래와 같은 코드를 작성해 링크를 추가한다.

div
            a(href='/topic/new') new

 

 

 

또한 편집폼의 형식도 홈화면과 비슷한 ui를 갖도록 추가적으로 수정하려고 한다.

doctype html
html
    head
        meta(charset='utf-8')
    body
        h1
            a(href='/topic') Server Title
        ul
            each topic in topics
                li
                    a(href='/topic/' + topic)= topic
        article
            form(action='/topic' method='post')
                p
                input(type='text', name='title' placeholder='title')
                p
                textarea(name='description')
                p
                input(type='submit')

다음과 같이 작성하면 에러가 날 것이다.
topics가 없기 때문이다.

 

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

해당 코드를 아래와 같이 수정해야한다.

app.get('/topic/new', function (req, res) {
    fs.readdir('data', function (err, files) {
        if (err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        res.render('new', {topics:files});
    })
});

 

 

 

Success를 띄우는 것도 좋은 방법이지만 사용자가 글을 잘 작성했는지 확인할 수 있게 글에 대한 상세보기 페이지로 사용자를 보내는 것도 방법이다.

res(response)에는 redirect라는 또 다른 메서드가 있다.
해당 메서드의 인자에는 사용자를 보내고 싶은 위치의 경로를 적어주면 된다.

다음과 같이 사용하면 된다.

res.redirect('/topic/' + title);

 

 

 

그래서 이 부분의 코드는 다음과 같이 된다.

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.redirect('/topic/' + title);
    });
});

 

 

이로써 간단한 웹애플리케이션 제작 작업이 끝났다.
개선이 많이 필요한 부족한 상태이지만 서버의 기본 구조를 이해하는데에는 도움이 된다고 생각한다.
물론 나도 공부를 하면서 부족한 부분이 매우 많다.
여러가지 웹사이트를 만들어보면서 다양한 기능들에 대한 추가적인 공부가 더 필요하다.

 

 

 

<new.pug 전체코드>

doctype html
html
    head
        meta(charset='utf-8')
    body
        h1
            a(href='/topic') Server Title
        ul
            each topic in topics
                li
                    a(href='/topic/' + topic)= topic
        article
            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
            a(href='/topic') Server Title
        ul
            each topic in topics
                li
                    a(href='/topic/'+topic)= topic
        article
            h2= title
            = description
        div
            a(href='/topic/new') new

 

<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) {
    fs.readdir('data', function (err, files) {
        if (err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        res.render('new', {topics: files});
    })
});
app.get(['/topic', '/topic/:id'], function (req, res) {
    fs.readdir('data', function (err, files) {
        if (err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        var id = req.params.id;
        if (id) {
            // 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', {topics: files, title: id, description: data});
            })
        } else {
            // id값이 없을 때
            res.render('view', {topics: files, title: 'Welcome', description: 'Hello, JavaScript for server.'});
        }
    })
});
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.redirect('/topic/' + title);
    });
});
app.listen(7777, function () {
    console.log('Connected, 7777 port!');
});