JArchive 프로그래밍 일기

Node.js 를 MySQL과 연동하여 아래와 같은 글목록을 만들어본다.

글 목록 만들기 

app_mysql.js를 작성하고, DB연결을 한다.

// MySQL로 글목록 만들기.

var express = require('express');
var app = express();
var bodyParser = require('body-parser')
var fs = require('fs')

// POST 방식 처리할 때, body 속성을 가공해준다 
app.use(bodyParser.urlencoded({extended: false}))

// DB 연결 
var mysql      = require('mysql');
var conn = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : '111111',
  database : 'o2'
});

conn.connect();

템플릿 엔진과 템플릿  파일 디렉토리를 명시해준다.

//템플릿 엔진 (views 들을 위치할 디렉토리 적어준다)
app.set('views', './views_mysql');
//템플릿 엔진 종류 명시 
app.set('view engine', 'jade');

app.locals.pretty = true;

라우팅 처리 

topic 이나 topic/id 를 통해 접근하면 글 목록이 보인다. 

app.get() 함수의 URL 부분을 배열로 만든다. 

그리고 id, title을 가지고 글목록을 만든다. 

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

    var sql = 'SELECT id, title FROM topic';
    conn.query(sql, function(err, topics, fields){
      
    })
})

상세보기 내용을 가지고 와서 view 파일에 띄워준다.

res.render() 함수를 사용하여 view 라는 이름의 템플릿을 이용한다. 

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

    var sql = 'SELECT id, title FROM topic';
    conn.query(sql, function(err, topics, fields){
        // 사용자가 id를 URL에 물고들어왔는지. 
        var id = req.params.id;

        if(id){ // 상세 보기 한다 
            var sql = 'SELECT * FROM topic WHERE id=?';
            conn.query(sql, id, function(err, rows, fields){
                if(err){
                    console.log(err);
                    res.status(500).send('Internal Server Error')
                }else{
                    res.render('view', {topics:topics, topic:rows[0]})
                }
            });
        }else{
            res.render('view', {topics:topics});
        }
    })
})

view.jade 템플릿 파일 

article태그 쪽을 보자. 

topic 이라는 값이 파라미터로 넘어 온다면, topic.title, topic.description, topic.author를 이용하여 상세보기 화면을 보여준다.

그렇지 않고 제목을 클릭 안했다면, Welcome만 띄워준다.     

doctype html
html
    head
        meta(charset='utf-8')
    body
        h1
            a(href='/topic') Server Side JavaScript
        ul  
            each topic in topics
                li
                    a(href='/topic/'+topic.id)=topic.title
        article
            if topic
                h2=topic.title
                =topic.description
                div='by '+topic.author
            else
                h2 Welcome!
                | This is server side javascript tutorial.

        a(href='/topic/add') add

글 작성 

맨 밑에 add 버튼을 누르면 입력폼이 나타나고, 내용이 DB 에 INSERT 되게 하자.

app.get('/topic/add', function(req, res))

새 글을 쓰는 입력 폼과 포스트 처리를 하는 함수가 필요하다. 

app.post('/topic/add',function(req, res))

POST 처리는 query() 함수로 DB에 INSERT 해주고, 작성이 완료된 페이지로 리다이렉션을 포함한다.

conn.query() 함수와 res.redirect() 함수.

// 새 글 쓰기 
app.get('/topic/add', function(req, res){
    var sql = 'SELECT id, title FROM topic';
    conn.query(sql, function(err, topics, fields){
        if(err){
            console.log(err);
            res.status(500).send('Internal Server Error')
        }
        res.render('add', {topics:topics})
    })  

})

// POST 처리
app.post('/topic/add',function(req, res){
    var title = req.body.title
    var description = req.body.description
    var author = req.body.author

    var sql = 'INSERT INTO topic (title, description, author) VALUES(?, ?, ?)'

    conn.query(sql, [title, description, author], function(err, result, fields){
        if(err){
            console.log(err);
            res.status(500).send('Internal Server Error')
        }else{
        // 작성 완료된 페이지로 리다이렉션 
        res.redirect('/topic/'+result.insertId)
        }
    })
 
})

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

    var sql = 'SELECT id, title FROM topic';
    conn.query(sql, function(err, topics, fields){
        // 사용자가 id를 URL에 물고들어왔는지. 
        var id = req.params.id;

        if(id){ // 상세 보기 한다 
            var sql = 'SELECT * FROM topic WHERE id=?';
            conn.query(sql, id, function(err, rows, fields){
                if(err){
                    console.log(err);
                    res.status(500).send('Internal Server Error')
                }else{
                    res.render('view', {topics:topics, topic:rows[0]})
                }
            });
        }else{
            res.render('view', {topics:topics});
        }
    })
})

입력 폼 템플릿 add.jade 

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

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

                

글 편집 

글 제목을 클릭하면 상세 화면이 나온다. 

이 때, edit 버튼을 클릭하면 글을 편집할 수 있게 코드를 추가해보자. 

글을 읽어와서 입력 폼에 뿌려놔줘야 편집이 가능하다. 

그래서 글 작성과 글 읽기 기능을 이해하고 있어야 편집 기능 만들기가 가능하다.

view.jade 템플릿 

view.jade를 열어서 edit 버튼을 추가한다. 

맨 아래쪽에, topic 값이 있으면, edit 버튼이 보이도록 한다. 

왜냐하면 글 제목을 클릭 했을 때만 edit 버튼이 보이도록 하고 싶기 때문이다.

(예를 들어, /topic 에서는 안보이고, /topic/5 에서는 보인다.)

doctype html
html
    head
        meta(charset='utf-8')
    body
        h1
            a(href='/topic') Server Side JavaScript
        ul  
            each topic in topics
                li
                    a(href='/topic/'+topic.id)=topic.title
        article
            if topic
                h2=topic.title
                =topic.description
                div='by '+topic.author
            else
                h2 Welcome!
                | This is server side javascript tutorial.

        ul
            li
                a(href='/topic/add') add
            if topic
                li
                    a(href='/topic/'+topic.id+'/edit') edit

edit.jade 템플릿 

편집을 위한 입력폼을 보여주는 템플릿이다. 

view.jade 에서 article 부분 내부를 지우고, 그 안에 add.jade 템플릿에서 썼던 form을 가져와 붙여넣는다. 

기존의 컨텐츠를 입력폼에 넣어서 보여줘야 하기 때문에, input 태그 내부에 value 속성을 넣어준다.

textarea는 형식이 조금다르다. 괄호 안에 속성 써주는게 아니라, 괄호 옆에 이퀄 (=)을 써준다.  

form 의 action 태그는 topic.id 를 넣는다. 

폼의 내용들을 DB에 저장하기 위해 /edit URL을 명시해준다. 

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

POST 처리는 id 에 따라 DB에 update 할 함수를 만들고 라우팅을 해준다. 

// 편집 내용 POST를 query() 함수로 DB UPDATE. 그리고 리다이렉션 

app.post(['/topic/:id/edit'], function(req,res){
    var title = req.body.title;
    var description = req.body.description;
    var author = req.body.author;
    var id = req.params.id;
    var sql = 'UPDATE topic SET title=?, description=?, author=? WHERE id=?';

    conn.query(sql, [title, description, author, id], function(err, result, fields){
        if(err){
            console.log(err);
            res.status(500).send('Internal Server Error')
        }else{
            // 에러 없으면 리다이렉션 
            res.redirect('/topic/'+id);
        }
    })
})

글 삭제

글을 클릭했을 때 편집 기능이 보이는 것 처럼, 글 삭제도 글을 클릭했을 때만  보이도록 한다. 

veiw.jade 템플릿 맨 아래에 버튼하나 추가한다. 

view.jade 템플릿

doctype html
html
    head
        meta(charset='utf-8')
    body
        h1
            a(href='/topic') Server Side JavaScript
        ul  
            each topic in topics
                li
                    a(href='/topic/'+topic.id)=topic.title
        article
            if topic
                h2=topic.title
                =topic.description
                div='by '+topic.author
            else
                h2 Welcome!
                | This is server side javascript tutorial.

        ul
            li
                a(href='/topic/add') add
            if topic
                li
                    a(href='/topic/'+topic.id+'/edit') edit
                li
                    a(href='/topic/'+topic.id+'/delete') delete

app_mysql.js에 /delete 를 처리할 라우팅 함수를 하나 만든다. 

node.js 에서 MySQL을 연결하여 DML을 실행해보자. 

SELECT 컬럼명 FROM 테이블명 

INSERT INTO 테이블명 (컬럼명) VALUES(값)

DELETE FROM 테이블명 WHERE문

UPDATE 테이블명 SET 컬럼명=값, 컬럼명=값, ... WHERE문

참고) INSERT INTO 할 때, 컬럼명을 생략할 수 있긴 하다.

하지만, 테이블 구조가 변경되었을 경우를 대비하여 컬럼명을 생략하지 말고 명시를 꼭 하는게 좋다. 

DELETE와 UPDATE 할 때는 반드시 WHERE 조건문을 써야 함을 기억하자!

SELECT 

쿼리는 select*  from topic 이지만, 두개의 컬럼만 출력한다. 

var mysql      = require('mysql');

var conn = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : '111111',
  database : 'o2'
});

conn.connect();

var sql = 'select * from topic';

conn.query(sql, function(err, rows, fields){
  if(err){
    console.log(err);
  }else{
    for(var i=0; i<rows.length; i++){
      console.log(rows[i].author +": "+ rows[i].title)
    }

  }
});

conn.end();

for문을 이용하여 출력한다. 

INSERT 

행 하나를 추가해보자. 

쿼리에서 개행할 때는 \ (역슬래시) 해주면 에러가 안난다. 

var mysql      = require('mysql');

var conn = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : '111111',
  database : 'o2'
});

conn.connect();

var sql = 'INSERT INTO topic (title, description, author) \
VALUES("Node.js_02", "Server Side javascript", "coco")';

conn.query(sql, function(err, rows, fields){
  if(err){
    console.log(err);
  }else{
    console.log(rows);
  }
})

conn.end();

id와 title 만 조회하여 방금 INSERT 한 결과를 확인한다. 

console.log() 에 rows.insertId 를 출력해보자. 

var mysql      = require('mysql');

var conn = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : '111111',
  database : 'o2'
});

conn.connect();

var sql = 'INSERT INTO topic (title, description, author) \
VALUES("Node.js_03", "Server Side js", "lululala")';

conn.query(sql, function(err, rows, fields){
  if(err){
    console.log(err);
  }else{
    console.log(rows.insertId);
  }
})

conn.end();

 node database.js 명령으로 실행 하면,

삽입한 행의 id가 출력된다. (insertId : 추가한 데이터의 고유한 식별자를 알아낸다.)

데이터베이스 select 해보면, id 값이 확인된다. 

사용자가 입력한 파라미터로 쿼리를 만들자. 

쿼리에 넣을 값을 ? 퀘스쳔 마크로 변경한다. 

params 라는 배열에 실제 값들을 넣는다. 

conn.query()함수의 두 번째 인자값으로 준다. 

node.js가 params를 sql에 주입해준다. (-> SQL injection 을 방지하는 효과가 있다.)

var mysql      = require('mysql');

var conn = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : '111111',
  database : 'o2'
});

conn.connect();

var sql = 'INSERT INTO topic (title, description, author) \
VALUES(?, ?, ?)';

var params = ['Supervisor', 'watcher', 'graphittie'];

conn.query(sql, params, function(err, rows, fields){
  if(err){
    console.log(err);
  }else{
    console.log(rows.insertId);
  }
})

conn.end();

node database.js 실행하면  insertId가 출력되고, 

select 해보면 정상적으로 insert  된 결과를 확인할 수 있다. 

UPDATE

3이라는 id의 행을 대상으로, 타이틀과 저자를 수정한다. 

sql과 params를 변경한다.

var mysql      = require('mysql');

var conn = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : '111111',
  database : 'o2'
});

conn.connect();


var sql = 'UPDATE topic SET title=?, author=? WHERE id=?';

var params = ['npm', 'itzy', 3];

conn.query(sql, params, function(err, rows, fields){
  if(err){
    console.log(err);
  }else{
    console.log(rows.insertId);
  }
})

conn.end();

3번 id 의 행이 변경된 것을 확인할 수  있다. 

delete 

3번 행을 지워본다. 

var mysql      = require('mysql');

var conn = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : '111111',
  database : 'o2'
});

conn.connect();


var sql = 'DELETE FROM topic WHERE id=?';

var params = [3];

conn.query(sql, params, function(err, rows, fields){
  if(err){
    console.log(err);
  }else{
    console.log(rows);
  }
})

conn.end();

정상 처리가 되면 console.log(rows)에 OkPacket이 온다. 

SELECT 해보면 정상적으로 삭제된 것을 확인할 수 있다. 

SQL에 대한 내용이 더 필요하다면 w3school 에서 참고하자. 

https://www.w3schools.com/sql/sql_select.asp

실행 환경 

Ubuntu 16.04 LTS 

접속 방법

로컬 컴퓨터의 mysql 에 접속 

mysql -uroot -p 

치고 password 입력하면 접속된다. 

로컬이 아니라 다른 컴퓨터로 접속하고 싶다면, 

mysql -brocolia -P3306 -uroot -p

컴퓨터 이름과 포트를 지정할 수 있다.

(mysql 은 기본포트로 3306을  쓴다)

Database 만들기 

CREATE DATABASE o2 CHARACTER SET utf8 COLLATE utf8_general_ci;

o2 라는 이름으로 데이터베이스를 만든다.

인코딩 정보를 함께 입력한다.

show database;

명령으로 데이터베이스가 정상 생성되었는지 확인한다.  

데이터베이스를 사용하겠다고 명령한다. 

USE o2; 

데이터베이스를 사용하겠다고 해야 테이블을 만들고 지우고 등의 조작이 가능하다.

접속과 비슷하게 이해하면 된다. 

들어가서 테이블을 조회해보면 아무것도 없다.

show tables;

topic  테이블을 만들어보자. 

CREATE TABLE `topic` 
( `id` int(11) NOT NULL AUTO_INCREMENT, 
`title` varchar(100) NOT NULL, 
`description` text NOT NULL, 
`author` varchar(30) NOT NULL, PRIMARY KEY (id)) 
ENGINE=InnoDB DEFAULT CHARSET=utf8;

쿼리를 칠 때, 작은 따옴표가 아니라, 그레이브 엑센트 ( ` )를 써야하는 것이 유의점이다! 

CREATE 명령 뒤에 붙는 ENGINE 과 CHARSET은 데이터 엔진명과 문자셋 인코딩이다. 

show tables 명령으로 정상적으로 생성됬음을 확인한다. 

데이터를 삽입하고 조회해보자. (INSERT와 SELECT)

INSERT INTO topic (title, description, author) VALUES('JavaScript', 'Computer Language for Web', 'brocolia');

더 삽입 해보자. 

node.js로 mysql 조작하기 

프로젝트 디렉토리에서 npm install 로 node-mysql 모듈을 설치한다.

npm install --save node-mysql 

npm 홈에서 node mysql 을 검색한다. github도 있다. 스크롤 내려서 mysql을 연동하는 샘플코드를 보고 따라한다. 

database.js 를 만든다. 

require()로 객체를 생성한다. 

DB연결 정보를 이력하여 createConnection()로 연결 객체를 만든다. 

connect() 함수로  연결한다. 

sql 문자열을 따로 만든 후에, 쿼리를 실행하는 query()로 쿼리를 실행한다. 

콜백함수가 에러 여부, 행, 열 정보를 리턴해준다. 

var mysql      = require('mysql');

var conn = mysql.createConnection({
  host     : 'localhost',
  user     : 'root',
  password : '111111',
  database : 'o2'
});

conn.connect();

var sql = 'select * from topic';

conn.query(sql, function(err, rows, fields){
  if(err){
    console.log(err);
  }else{
    console.log('rows', rows);
    console.log('fields', fields)
  }
});

conn.end();

프로젝트 디렉토리에서 node database.js 로 실행하면, 

다음과같은  출력 결과가 나온다. 

다음 포스팅에서 select, insert, delete, update를 다뤄본다. 

참고 포스팅 

https://m.blog.naver.com/PostView.nhn?blogId=imf4&logNo=220760337928&proxyReferer=https:%2F%2Fwww.google.com%2F

MySQL

가장 대중적인 오픈소스 DB

MySQL은 SUN에 인수되었는데, SUN이 오라클에게 인수되면서 같이 넘어갔다.  

MySQL이 만든 분이 오라클의 정책에 반발하면서 MySQL과 완전히 호환되는 MariaDB를 만들게 된다.

MariaDB

MySQL의 지지부진한(?)개발을 개선하였고, 진보적으로 발전해온 오픈소스 DB

DB만 바꾸면, MySQL이 갖고 있었던 단점을 버리고 MariaDB의 장점을 취할 수 있다. 

아마존에서 만든 DB 오로라(Aurora) 도 MariaDB와 호환된다. 

Ubuntu 에서 MySQL 설치 

터미널에서 sudo apt-get install mysql  엔터치지 말고 tab을 두번 친다. 

현재 설치할 수 있는 server, client, workbench 등이 나온다. 

그 중에 최신 버전 server와 cilent 버전을 치고 설치한다.

sudo apt-get install mysql-server-5.7 mysql-client-5.7 

패스워드는 제일 쉽게 1을 6개 친다. (혼자쓰는 것이니까)

설치가 끝났으면 제대로 설치되었는지 확인하기 위해 로그인 해본다. 

패스워드를 치고 아래와 같이 welcome 이 뜨면 제대로 된 것이다. 

라우트 

비슷한 기능을 하는 app.get() 함수 2개를 중복만 제거하고 하나로 합쳐보자. 

여러 경로를 한번에 처리 

get() 함수에서 파일명, 파일 내용을 가져오는 코드의 중복을 제거. 

새 글 쓰는 버튼을 누르면, 글목록 하위에 form 이 나오도록 jade 템플릿 변경

새 글을 쓰고 나서, 글을 제대로 썼는지 작성된 글 페이지로 '리다이렉션' 하여 이동.

res.redirect( 경로 ) 함수를 이용 

작성 후에 바로 작성내용을 볼 수 있다. 

app_file.js 

// 파일로 만든 웹앱 (03-15)

var express = require('express');
var app = express();
var bodyParser = require('body-parser')
var fs = require('fs')

// POST 방식 처리할 때, body 속성을 가공해준다 
app.use(bodyParser.urlencoded({extended: false}))

//템플릿 엔진 (views 들을 위치할 디렉토리 적어준다)
app.set('views', './views_file');
//템플릿 엔진 종류 명시 
app.set('view engine', 'jade');

app.locals.pretty = true;

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


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

        // id 값이 있는지 없는지! 
        if(id){
            fs.readFile('data/'+id, 'utf8', function(err, data){
                // 파일 내용을 가져옵니다. 
                if(err){
                    console.log(err);
                    res.status(500).send('Internal Server Error')
                }
                // render 인자 : 템플릿파일명, 주입하려는 객체 
                // 파일목록, 제목, 내용
                res.render('view', {topics:files, title: id, description:data});
            })
        }else{ // id 값이 없으면, 
            res.render('view', {topics:files, title:'Welcome', description:'hello'})
        }
    })


})


// POST 처리
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 가 여기에 위치.
        res.send('Success!')
    });
})

// 애플리케이션이 특정 포트를 listen() 하도록.
app.listen(3000, function(){
    console.log('Connected 3000 port ! ');
}) 

view.jade

홈버튼과 새글쓰기 버튼을 추가함 

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

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

new.jade 

doctype html
html
    head
        meta(charset='utf-8')
    body
        h1
            a(href='/topic') Server Side JavaScript
        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')

                

아래 포스팅 '글 목록 만들기' 글과 이어지는 포스팅 입니다. 

1. GET 방식에 따라 URL 이 변경되는데 파일명을 받아옵니다. 

2. 글 목록을 보여줍니다. 

fs.readdir() 함수로 files 목록을 받아오고, 

jade 템플릿 view.jade 로 topics 이름의 files 목록을 주입합니다. 

3. http://127.0.0.1:3000/topic 로 접속하면 파일명 링크만 나옵니다.

파일명 링크를 누르면, URL이 http://127.0.0.1:3000/topic/javascript 로 변경되고, 파일 내용도 출력됩니다. 

파일명과 내용을 보여주는 view.jade 템플릿을 만듭니다.  

( article 부분만 추가했습니다) 

title, description 이름으로 넘어오는 변수값을 출력합니다. 

4.

2개의 기능이 동시에 필요합니다. 

파일명을 가져오고 파일 이름을 가져오는 함수 

render() 함수의 파라미터로 넘길 객체의 이름과 값을 {} 로 감싸고 콤마로 구분합니다. 

전체코드 

app_file.js

// 파일로 만든 웹앱 (03-15)

var express = require('express');
var app = express();
var bodyParser = require('body-parser')
var fs = require('fs')

// POST 방식 처리할 때, body 속성을 가공해준다 
app.use(bodyParser.urlencoded({extended: false}))

//템플릿 엔진 (views 들을 위치할 디렉토리 적어준다)
app.set('views', './views_file');
//템플릿 엔진 종류 명시 
app.set('view engine', 'jade');

app.locals.pretty = true;

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

// 본문 읽기 
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, 'utf8', function(err, data){
            // 파일 내용을 가져옵니다. 
            if(err){
                console.log(err);
                res.status(500).send('Internal Server Error')
            }
            // render 인자 : 템플릿파일명, 주입하려는 객체 
            // 파일목록, 제목, 내용
            res.render('view', {topics:files, title: id, description:data});
        })
    })
    
})


// 글 목록 보이기 
app.get('/topic', function(req,res){
    fs.readdir('data', function(err,files){
        if(err){
            console.log(err);
            res.status(500).send('Internal Server Error')
        }
        // render 인자 : 템플릿파일명, 주입하려는 객체 
        res.render('view', {topics:files})
    })
})

// POST 처리
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 가 여기에 위치.
        res.send('Success!')
    });
})

// 애플리케이션이 특정 포트를 listen() 하도록.
app.listen(3000, function(){
    console.log('Connected 3000 port ! ');
}) 

템플릿 코드  view.jade

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
            =description

            

새 파일 만드는 new.jade 

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')

                

파일을 이용하여 글 목록을 만들어보자. 

(나중에는 DB를 이용한다.)

form 화면에서 사용자의 입력을 받아서 파일을 만듭니다. 

파일의 이름과 파일의 내용으로 글의 목록이 만들어집니다. 

링크를 클릭하면 글의 내용이 바뀝니다. 

필요한 모듈 

express, body-parser, fs (파일시스템) 모듈

필요한 파일과 디렉토리 

app_file.js : entry point 파일

views_file 디렉토리 : jade 템플릿 파일 저장 

data 디렉토리 : 글목록을 만들기 위한 파일을 저장

1. 필요한 모듈을 require()로 가져옵니다. 

2. 포트 설정하여 서버 listen()

entry point 파일인 app_file 에서, 애플리케이션이 3000 번 port 를 listen 하도록 만듭니다. 

3. /topic 경로로 들어오면, 화면에 문자열을 출력해봅니다. 

URL로 접근하는 것이니까 app.get() 함수를 사용합니다. 

4. jade 템플릿 사용 설정을 합니다. 

--> set() 함수 사용 

jade 템플릿 파일들이 위치할 디렉토리를 지정합니다. 

jade 라는 'view engine' 을 사용할 것이라고 지정합니다. 

5. /topic/form 경로에서 form.jade 템플릿을 쓰도록 render() 함수를 써줍니다. 

6. form 이 있는 form.jade 템플릿 파일을 만듭니다. 

제목과 내용.

두 칸을 만들어서 입력을 받습니다. 

'제출' 버튼을 누르면, action= '/topic' 이므로, topic 경로로 전송합니다. 방식은 POST.

7.  템플릿 엔진의 html 태그를 예쁘게 정렬하기 위한 코드를 추가합니다.

8.  POST 방식으로 만든 form 의 body 객체 데이터에 접근해야 title과 description 값을 가져올 수 있습니다. 

파일을 생성하는 모듈이 필요합니다.

파일 시스템에 대한 Node.js Document를 읽어봅니다. 

파라미터를 봅니다. 

파일명, 데이터, 그리고 옵션, 콜백함수 순으로 받습니다. 

콜백함수의 파라미터가 err 라고 되어있는데, 혹시 에러가 발생하면 err 변수에 내용을 알려준다는 뜻입니다. 

app_file.js 에 app.post() 함수를 추가합니다. 라우팅은 /topic 으로 합니다. 

title이 파일명이 되고, description은 파일의 내용이 됩니다. 

파일은 data 라는 디렉토리 하위에 만들꺼니까, 경로를 'data/' + title 로 해줍니다. 

디렉토리명 뒤에 / 슬래시를 붙여줘야 합니다. 

 POST 방식으로 body 태그 내용을 처리하기 위해 bodyParser 사용 설정을 합니다.

글 제목과 내용을 입력받을 html의 body 태그내용에 접근해야 합니다. 

form 에 내용을 쓰고 제출 버튼을 눌러보면, data 디렉토리 하위에 title과 똑같은 파일명이 생긴것을 확인할 수 있습니다. 

9. 이제 data 하위의 파일명으로 글목록을 만듭니다. 

파일을 쓰는게 아니라 디렉토리 내의 파일을 읽을 것이기 때문에 fs.readdir() 함수를 이용합니다. 

app.get() 함수에 /topic으로 라우팅 하고, 콜백함수 내에 readdir() 함수를 작성합니다. 

readdir() 함수의 콜백함수는 err 가 있다면 err를 알려주고,  files 이름으로 파일명들을 리턴합니다. 

err가 있다면 console.log() 로 출력하고, 응답으로 500 코드와 메시지를 출력하도록 합니다. 

콜백함수가 끝나기 전 마지막에 render() 를 작성합니다. 

render() 함수의 첫째 파라미터는 jade 템플릿명을 쓰고, 둘째 부터는 돌려주고 싶은 객체값 files를 topics 라는 이름으로 씁니다.

10. 파일목록 jade 템플릿은 이런 모양입니다. 이것을 jade iterator로 수정합니다. 

jade에서 객체를 반복하는 것은 iterator 입니다. jade document를 참조합니다. 

11. 폼에 내용 입력해서 파일 생성하고, 파일목록 읽어서 글목록 조회해보기! 

http://127.0.0.1:3000/topic/form 에서 제목과 내용을 입력합니다. 

http://127.0.0.1:3000/topic 에서 보이는 글목록 화면 입니다.