Node.js 생활코딩 정리 - 웹앱 제작 코드 개선하기

웹앱 제작 6 : 코드의 개선

 

1. 라우팅 중복의 제거 방법 : 글목록 표시 부분

2. 글작성하기를 좀 더 세련되게 표현

3. 글작성후 redirect를 통해 바로 쓴 글로 이동

 

var express = require('express');//익스프레스를 가져옴

var bodyParser = require('body-parser')

var fs = require('fs');

var app = express();

 

app.use(bodyParser.urlencoded({ extended: false }));//body parser를 사용함

app.locals.pretty = true;//템플릿 줄바꿈

app.set('views', './views_file');//템플릿 폴더 위치 표시

app.set('view engine', 'jade');//템플릿 엔진을 jade로 명시함

 

//글작성하기 폼

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

fs.readdir('data', function(err, files){//첫번째는 에러 두번째는 파일목록을 전송받음

if(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){//에러가 있다면 여기서 처리

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){//에러가 있다면 여기서 처리

res.status(500).send('Internal Server Error');

}

//data는 파일의 내용

res.render('view', {title:id, topics:files, description:data})

});//readFile끝

}else{//id값이 없을 때

res.render('view', {topics:files, title:'Welcome', description:'hello nodejs'});//템플릿 사용 topics라는 이름으로 files를 넘김

}

});//readdir끝

});

 

/*//글을 클릭했을때 옴

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

var id = req.params.id;//id로 접근을 함

//다음부분은 topics:files때문에 그런것임

fs.readdir('data', function(err, files){//첫번째는 에러 두번째는 파일목록을 전송받음

if(err){//에러가 있다면 여기서 처리

res.status(500).send('Internal Server Error');

}

fs.readFile('data/'+id, 'utf8', function(err, data){

if(err){//에러가 있다면 여기서 처리

res.status(500).send('Internal Server Error');

}

//data는 파일의 내용

res.render('view', {title:id, topics:files, description:data})

});//readFile끝

});//readdir끝

});

 

*/

 

//폼에서 작성한 것을 여기서 받음

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){//에러가 있다면 여기서 처리

res.status(500).send('Internal Server Error');

}

//그 사람이 작성한 페이지로 보내버림

res.redirect('/topic/'+title);//redirect는 바로 그 URL로 이동시키는 것

});//title을 파일의 이름으로 해서 파일 생성

});

 

app.listen(3000, function(){

console.log('Connected, 3000 port!');

})

 

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

form(action='/topic' method='post')

p

input(type='text' name='title' placeholder='title')

p

textarea(name='description')

p

input(type='submit')

 

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

 

출력화면

 

 

새로운 글 작성하기 화면

 

 

글 작성 후 제출하면 다음과 같이 쓴 글이 보이게 된다.

 

 

출처 : https://opentutorials.org/course/2136