Web Application 만들기

• 기능

사용자가 정보를 서버에 전송하고, 서버가 그 정보를 받아서 저장하고 화면에 출력.

• 데이터를 저장하는 것 원래는 DB에 저장하지만 여기서는 파일에 저장한다.

• 구조 appfile.js에 작업한다. 사용자의 데이터는 'data' 라는 디렉토리에 저장한다. 템플릿 엔진은 'views_file'라는 디렉토리에 있는 파일들을 템플릿 엔진을 사용한다. 정적인 파일(css,...)은 'publicfile'라는 디렉토리에 넣는다.

• 만드는 순서 1. 모듈을 가져온다. - require('express') 2. 가져온 모듈(메서드)를 실행한다. 3. template engine 디렉토리 및 파일 경로 설정한다. (까먹지 말기!)

app.set('views', './views') // specify the views directory
app.set('view engine', 'ntl') // register the template engine

4. views디렉토리에 pug 파일을 생성한다. => 먼저 fs 모듈 가져온다! pug파일은 html문서 상위 버전이라고 생각하자.

var fs = require('fs');
app.post('/topic', (req,res)=>{//사용자가 보낸 title을 제목, desc를 내용으로 하는 파일 생성 및 저장할 것이다.
    var title = req.body.title;
    var desc = req.body.desc;
    fs.writeFile('data/'+title, desc, (err)=>{//'data'디렉토리 밑에 파일을 생성한다.
        if (err){
            res.status(500).send('Internal Server Error');
        }
        res.send('SUCCESS!');
    });
    
});

5. 데이터가 저장되있는 data 디렉토리의 파일의 목록을 읽어올 때. - fs.readdir(path,callback )

6. app_file.js 내에서 . pug(html)파일에 데이터를 넣어줄 때

res.render('view',{topics:files});//'view'라는 파일은 views_file에 있어야함.

7. 디렉토리 내에 파일의 수만큼 li a를 출력할 것이기 때문에 pug(html)파일 내에서 반복문을 돌린다! pug(html)에서 변수는 '='로 설정가능하다.

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

8. 파일의 내용을 가져올 때 : 해당 내용을 웹페이지 형식으로 만든 다음 가져온다. 항상 먼저 생각해야하는 것은 라우터 설정이다. 링크를 클릭해서 들어오면 해당 이름의 파일 내용을 보여준다. - 링크 클릭 접속 방식은 GET

app.get('/topic/:xyz',(req,res)=>{
    var xyz = req.params.xyz;
    fs.readFile('data/'+xyz,'utf8',(err,data)=>{
        if(err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        res.send(data);
    });
    
});

9. 목록 밑에 해당 내용을 보여주고 싶을 때. - 웹문서 (html) 측면에서 생각해보자! ul 태그 밑에 article 태그를 생성해서 여기에 내용을 보여주겠다!

app.get('/topic/:xyz',(req,res)=>{
    var xyz = req.params.xyz;

    fs.readdir('data',(err,files)=>{//render할 때 다시 똑같이 변수값을 넘겨줘야한다!(data디렉토리 내에 파일 목록을 가져온다!)
        if(err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        fs.readFile('data/'+xyz,'utf8',(err,data)=>{//readFile로 읽어온 정보는 'data'에 담겨있다!
            if(err) {
                console.log(err);
                res.status(500).send('Internal Server Error');
            }
            res.render('view',{topics:files, desc:data, title:xyz});//파라미터를 통해 가져온 값이 원하는 값이다. xyz라는 파라미터 값을 'title'변수에 던져준다!
        });
    });
});

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

reader, readFile 사용 결과

'view' pug 파일의 페이지 소스

• 리팩토링 express에서 라우터를 여러개 가질 수 있다. 아래 코드 두개를 하나로 합칠 수 있다.

app.get('/topic', (req,res)=>{//topic페이지로 들어오면 글 목록이 나오게 한다.

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

코드의 일관성을 유지하기 위해 form으로 데이터를 전달받고 이것을 render할 때 원래 'new' pug 파일에는 없었던 ul 태그를 비롯한 몇몇 개의 태그가 나온다. 이 중에서 'topics'라는 변수가 나오기 때문에 app_file.js에서 해당 변수값을 넘겨줘야한다! 여기서는 파일 목록을 보여줄 것이기 때문에 readdir로부터 데이터를 가져오고 이것을 넘겨준다.

app.get('/topic/new', (req,res)=>{
    fs.readdir('data',(err,files)=>{//files 안에는 data 디렉토리 안의 파일명들이 배열로 담겨있다!
        if(err) {
            console.log(err);
            res.status(500).send('Internal Server Error');
        }
        res.render('new',{topics:files});//render하고자 하는 패키지 파일의 이름을 넣어줘야함!
    });
});