[nodejs 강좌] Node.js 를 이용해 웹애플리케이션 만들기 - 섹션 9. node.js 를 이용한 웹앱 제작 실습

1. 오리엔테이션

클라이언트가 보내는 데이터를 파일에 저장해서 가공하는 실습 진행.

-> 나중에는 dB에 저장할 것.

Tip : Supervisor

js 파일 변경이 있는 경우 자동으로 노드를 내부적으로 재부팅해줌. -> watch

supervisor app.js

설치 방법:

npm install supervisor -g

---

2. 라우팅

우리가 만들 웹은 '/topic', '/topic/new', '/topic/:id' 이렇게 세 개의 url을 가지고 있기 때문에 각각의 라우터를 만들어주어야 한다.

• '/topic' GET : res.render('view.jade');
• '/topic/new' GET : res.render('new.jade');
• '/topic/:id' GET : res.render('vew.jade');

---

3. 본문 저장

사용자가 /topic/new 의 form에 title 과 description을 적어서 submit 하면 '/topic' 에 POST 형식으로 요청을 보내게 되고, 해당 라우터에서 파일을 만들어 정보를 저장한 후 '/topic' 에 GET 방식으로 다시 redirection을 보낸다.

fs.writeFile('data/'+title, description, function(err){
        if(err){
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        res.redirect('/topic/' + title);
    })

-> 파일로 저장하는 것은 매우 비효율적이고 좋지 않은 방법이지만 지금 실습에서는 이해를 빠르게 하기 위해 파일로 진행한다. 우리의 궁극적인 목표는 dB에 저장하는 것이다.

---

4. 글 목록 만들기

생성된 파일의 제목을 읽어서 화면에 출력한다.

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

fs 모듈을 사용해서 파일을 관리할 수 있다.

---

5. 본문 읽기

'/topic/:id' 로 접근하는 경우 해당 id에 해당하는 제목을 가진 파일의 본문을 읽어서 화면에 출력한다.

fs.readFile('data/'+id, 'utf8', function(err, data){
                if (err){
                    console.log(err);
                    res.status(500).send('Internal Server Error');
                }
                res.render('view', {topics: files, title: id, desc: data});
            })

---

6. 코드의 개선

'/topic' 과 '/topic/:id' 의 GET 라우터를 따로 구현해서 글 목록을 읽어오는 코드가 중복되는 경우가 발생했다.

이처럼 중복되는 코드는 비효율적이기 때문에, 라우터 하나에서 여러 주소를 처리하는 방식을 이용하여 코드의 중복을 없애주었다.

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');
        }
        // id 값이 있을 때
        var id = req.params.id;
        if (id){
            fs.readFile('data/'+id, 'utf8', function(err, data){
                if (err){
                    console.log(err);
                    res.status(500).send('Internal Server Error');
                }
                res.render('view', {topics: files, title: id, desc: data});
            })
        }
        // id 값이 없을 때
        else{
            res.render('view', {topics: files, title:'Welcome', desc:'Hello, Javascript for Server'});
        }
    })
})

중복을 제거하면 코드의 유지 보수에 훨씬 도움이 된다.