- express
- body-parser
- jade (생코에선 jade지만 지금은 pug로 이름 변경, 선택)
- supervisor (선택)
express-generator 사용 없이 빈프로젝트에서 시작.
// express 모듈 객체 불러오기
var express = require('express');
var app = express();
// 3000번 포트에 연결되면 callback 함수가 호출된다.
app.listen(3000, function () {
console.log('Connected, port 3000');
});
var express = require('express');
var app = express();
app.set('views', './views_file'); // 템플릿 엔진의 view가 views_file 폴더 안에 있음을 설정
app.set('view engine', 'pug'); // view engine으로 pug 사용을 명시
app.listen(3000, function () {
console.log('3000번 포트에 연결');
});
views_file 폴더를 만들어 new.pug 파일 생성
간단한 입력 폼
html
head
meta(charset='utf-8')
body
h1 New topic
form(action='/topic')
p
input(type='text' name='title' placeholder='제목')
p
input(type='textarea' name='content' placeholder='본문')
p
input(type='submit' value="제출")
var express = require('express');
var body_parser = require('body-parser'); // body-parser 추가
var app = express();
app.set('views', './views_file');
app.set('view engine', 'pug');
// new.pug 파일을 렌더링할 라우트를 추가
app.get('/topic/new', function (req, res) {
res.render('new');
});
app.listen(3000, function () {
console.log('3000번 포트에 연결');
});
var express = require('express');
var body_parser = require('body-parser'); // body-parser 추가
var app = express();
app.use(body_parser.urlencoded({extended: false})); // body-parser 사용 설정
app.set('views', './views_file');
app.set('view engine', 'pug');
// new.pug 파일을 렌더링할 라우트를 추가
app.get('/topic/new', function (req, res) {
res.render('new');
});
app.listen(3000, function () {
console.log('3000번 포트에 연결');
});
var express = require('express');
var body_parser = require('body-parser');
var app = express();
app.use(body_parser.urlencoded({extended: false})); // request 객체에 body라는 property를 만들어 post data에 접근할 수 있게 해준다.
app.locals.pretty = true; // 소스코드를 정리해준다.
app.set('views', './views_file');
app.set('view engine', 'pug');
app.get('/topic/new', function (req, res) {
res.render('new');
});
app.listen(3000, function () {
console.log('3000번 포트에 연결');
});
var express = require('express');
var body_parser = require('body-parser');
var app = express();
app.use(body_parser.urlencoded({extended: false}));
app.locals.pretty = true;
app.set('views', './views_file');
app.set('view engine', 'pug');
app.get('/topic/new', function (req, res) {
res.render('new');
});
// 입력폼 new.pug에서 submit 버튼 눌렀을 경우의 라우팅 설정
app.post('/topic', function (req, res) {
var title = req.body.title;
var content = req.body.description;
res.send("title : " + title + "<br>content : " + content);
});
app.listen(3000, function () {
console.log('3000번 포트에 연결');
});
/topic/new에서 작성된 내용이 저장될 디렉토리를 생성한다.
fs 모듈을 사용해 data에 작성한 내용이 텍스트 파일로 저장되게 하는 코드 작성
var express = require('express');
var body_parser = require('body-parser');
var fs = require('fs'); // fs 모듈을 사용한다.
var app = express();
app.use(body_parser.urlencoded({extended: false}));
app.locals.pretty = true;
app.set('views', './views_file');
app.set('view engine', 'pug');
app.get('/topic/new', function (req, res) {
res.render('new');
});
app.post('/topic', function (req, res) {
var title = req.body.title;
var content = req.body.description;
// 파일로 저장
fs.writeFile('data/' + title, content, 'utf8', function (err) {
if (err) {
console.log(err);
res.status(500).send('Server Error');
}
res.send("title : " + title + "<br>content : " + content);
});
});
app.listen(3000, function () {
console.log('3000번 포트에 연결');
});
Topic list가 출력될 페이지 작성
html
head
meta(charset='utf-8')
body
h1 Topic list
ul
each topic in topics
li
a(href='/topic/' + topic)= topic
a(href='/topic/new') 새로운 Topic 생성
var express = require('express');
var body_parser = require('body-parser');
var fs = require('fs');
var app = express();
app.use(body_parser.urlencoded({extended: false}));
app.locals.pretty = true;
app.set('views', './views_file');
app.set('view engine', 'pug');
app.get('/topic/new', function (req, res) {
res.render('new');
});
// 사용자가 topic page로 들어왔을 때의 라우팅 설정
app.get('/topic', function (req, res) {
res.render('show');
});
app.post('/topic', function (req, res) {
var title = req.body.title;
var content = req.body.content;
fs.writeFile('data/' + title, content, 'utf8', function (err) {
if (err) {
console.log(err);
res.status(500).send('Server Error');
}
res.send("title : " + title + "<br>content : " + content);
});
});
app.listen(3000, function () {
console.log('3000번 포트에 연결');
});
var express = require('express');
var body_parser = require('body-parser');
var fs = require('fs');
var app = express();
app.use(body_parser.urlencoded({extended: false}));
app.locals.pretty = true;
app.set('views', './views_file');
app.set('view engine', 'pug');
app.get('/topic/new', function (req, res) {
res.render('new');
});
app.get('/topic', function (req, res) {
fs.readdir('data', function (err, files) { // 디렉토리 안을 읽는 함수
if (err) {
console.log(err);
res.status(500).send('Server Error');
}
res.render('show', {topics: files}); // 템플릿 파일의 이름, 넘겨줄 데이터 순으로 매개변수 작성
});
});
app.post('/topic', function (req, res) {
var title = req.body.title;
var content = req.body.content;
fs.writeFile('data/' + title, content, 'utf8', function (err) {
if (err) {
console.log(err);
res.status(500).send('Server Error');
}
res.send("title : " + title + "<br>content : " + content);
});
});
app.listen(3000, function () {
console.log('3000번 포트에 연결');
});
var express = require('express');
var body_parser = require('body-parser');
var fs = require('fs');
var app = express();
app.use(body_parser.urlencoded({extended: false}));
app.locals.pretty = true;
app.set('views', './views_file');
app.set('view engine', 'pug');
app.get('/topic/new', function (req, res) {
res.render('new');
});
app.get('/topic', function (req, res) {
fs.readdir('data', function (err, files) {
if (err) {
console.log(err);
res.status(500).send('Server Error');
}
res.render('show', {topics: files});
});
});
app.post('/topic', function (req, res) {
var title = req.body.title;
var content = req.body.content;
fs.writeFile('data/' + title, content, 'utf8', function (err) {
if (err) {
console.log(err);
res.status(500).send('Server Error');
}
res.redirect('/topic'); // 리다이렉트 경로 설정
});
});
app.listen(3000, function () {
console.log('3000번 포트에 연결');
});
html
head
meta(charset='utf-8')
body
article
h2= title
=content
br
a(href='/topic') 뒤로가기
선택한 개별 topic 내용 출력
var express = require('express');
var body_parser = require('body-parser');
var fs = require('fs');
var app = express();
app.use(body_parser.urlencoded({extended: false}));
app.locals.pretty = true;
app.set('views', './views_file');
app.set('view engine', 'pug');
app.get('/topic/new', function (req, res) {
res.render('new');
});
// params로 넘어온 파일 내용을 읽어서 전달해주는 기능 구현
app.get('/topic/:title', function (req, res) {
var title = req.params.title;
fs.readFile('data/' + title, 'utf8', function (err, data) {
if (err) {
console.log(err);
res.status(500).send('Server Error!');
}
res.render('check', {title: title, content: data});
});
});
app.get('/topic', function (req, res) {
fs.readdir('data', function (err, files) {
if (err) {
console.log(err);
res.status(500).send('Server Error');
}
res.render('show', {topics: files});
});
});
app.post('/topic', function (req, res) {
var title = req.body.title;
var content = req.body.content;
fs.writeFile('data/' + title, content, 'utf8', function (err) {
if (err) {
console.log(err);
res.status(500).send('Server Error');
}
res.redirect('/topic');
});
});
app.listen(3000, function () {
console.log('3000번 포트에 연결');
});
node app_file.js
localhost:3000/topic
접속 시 화면 : Topic 리스트
localhost:3000/topic/new
접속 시 화면 : 새로운 Topic 생성
localhost:3000/topic/:title
접속 시 화면 : 개별 Topic 내용 조회
소스코드는 중복되는 코드가 없을수록 좋다. get() 메서드의 url 파라미터를 배열로 넘겨서 중복되는 코드를 제거해보자.
아래는 /topic
과 /topic/:title
을 하나의 함수로 합치는 코드이다.
app.get(['/', '/topic', '/topic/:title'], function (req, res) {
var title = req.params.title;
if (title) {
// title 값이 있을 때
fs.readFile('data/' + title, 'utf8', function (err, data) {
if (err) {
console.log(err);
res.status(500).send('Server Error!');
}
res.render('check', {title: title, content: data});
});
} else {
// title 값이 없을 때
fs.readdir('data', function (err, files) {
if (err) {
console.log(err);
res.status(500).send('Server Error');
}
res.render('show', {topics: files});
});
}
});