웹애플리케이션 제작 / 복습 & database
내용정리
정리
var express = require('express');
var app = express();
app.listen(3000, function(){
console.log('connected, 3000port!');
})모듈을 가져올 때는 require
var express = require('express')가져온 express를 제어, 사용하려면 함수 가 리턴 한 값을 express라는 변수에 담음
이 변수를 통해 express를 제어 할 수 있다.
var app = express();
app.listen(3000, function(){
})함수를 호출 실행하면 app 객체를 리턴한다.
애플리케이션 객체가 갖고 있는 메소드 중에서 listen 이라는 것을 통해서 특정 포트를 리스닝 할 수 있게 한다.
3000번 포트를 바라보게 하고 싶다.
첫번째 인자로 3000, 두번쨰 인자로 function 콜백 함수
3000번 포트에 연결되면 콜백함수가 호출 되면서 연결 되었다는 상황을 알려준다.
라우팅
localhost:3000/topic/new 로 접속 했을때
app.get('/topic/new', function(req, res){
res.send('hi');
})템플릿 엔진 사용
디렉토리에 템플릿 파일을 넣겠다 는 것을 알려주려면
app.set
app.set('views', './views_file');
app.set('view engine', 'jade');new.jade 파일생성 후
res.send 에서 render 로 변경해 렌더링
app.get('/topic/new', function(req, res){
res.render('new');
})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')코드 pretty 하게 보여주기
app.locals.pretty = true;라우팅 / 애플리케이션이 받도록 라우터 설정
app.post('/topic', function(req, res){
res.send('hi topic');
})POST 방식을 위한 body parser 사용
npm install body-parser --savebodyparser 모듈을 사용할 수 있게 로드
var bodyParser = require('body-parser');use 코드 추가 / 상세 코드는 패턴화 해서 이해
app.use(bodyParser.urlencoded({ extended: true }));확인
app.post('/topic', function(req, res){
var title = req.body.title;
var description = req.body.description;
res.send('hi topic,'+req.body.title);
})fs
filesystem module (파일시스템 모듈)
var fs = require('fs');writeFile
data 파일 저장, 생성
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.send('success');
});
})파일명 : title
내용 : description
출력
get방식으로 url을 접속했을때 view.jade 파일을 보여줌
app.get('/topic', function(req, res){
res.render('view');
});readdir
data 디렉토리에 있는 파일목록을 가져와서 파일명 출력해서 리스트 생성하기
fs.readdir(path, callback)
첫번째는 경로, 두번째는 정보를 가져왔을 때 호출 될 콜백함수
app.get('/topic', function(req, res){
fs.readdir('data', function(err, files){
if(err){
console.log(err);
res.status(500).send('internal server error');
}
res.render('view', {topics:files});
});
});호출 되는 funtion 은 (err, files) 두개의 인자를 전달 받는다.
첫번째는 에러, 파일 목록을 갖고 있는 array를 전달 받는다.
에러가 있다면 console log 로 err를 출력 하고
files 안에는 data 라는 디렉토리 안에 포함되어 있는 각각의 파일들의 이름들이 배열로 담겨 있다.
files 라고 하는 배열에 담겨있는 이름을 이용해서 글 목록 완성
res.render 코드를 콜백 함수 안에 넣고
view라고 하는 템플릿 파일의 li에 파일들의 이름을 전달
어떻게?
render라는 함수는
첫번째 인자 : 템플릿파일의 이름이 들어가고,
두번째 인자 : 템플릿 파일 안으로 주입하고자 하는 데이터를 객체안에 담아서 주입하면 된다.
res.render('view', {topics:files});jade iteration 반복문
view.jade
doctype html
html
head
meta(charset='utf-8')
body
h1 Server Side Javascript
ul
each topic in topics
li= topic링크 추가
doctype html
html
head
meta(charset='utf-8')
body
h1 Server Side Javascript
ul
each topic in topics
li
a(href='/topic/'+topic)= topicid 값을 출력
app.get('/topic/:id', function(req, res){
var id = req.params.id;
res.send(id);
});id값에 해당되는 파일을 읽어서 가져오기
fs.readFile
app.get('/topic/:id', function(req, res){
var id = req.params.id;
fs.readFile('data/'+id, 'utf8', function(err, data){
if(err){
console.log(err);
res.status(500).send('internal server error');
}
res.send(data);
});
});정보를 list 밑에 출력
send 대신에 render로 바꾸고 view를 사용
app.get('/topic/:id', function(req, res){
var id = req.params.id;
fs.readFile('data/'+id, 'utf8', function(err, data){
if(err){
console.log(err);
res.status(500).send('internal server error');
}
res.renter('view', {title:id});
});
});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에러
목록 가져오는 것을 복붙 후 수정
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');
}
res.render('view', {topics:files, title:id});
});
});
});본문 출력
= description
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코드의 개선
중복제거
route 배열에 복수로 주고 싶은 path를 준다
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;
if (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, description:data});
});
} else {
// id값이 없을 때
res.render('view', {topics:files, title:'welcome', description:'hello javascript for server'});
}
});
});제목에 홈 링크 추가
view.jade
h1
a(href='/topic') Server Side Javascript글쓰기 버튼 추가
div
a(href='/topic/new') new글 작성 페이지에도 레이아웃 추가
app.get('/topic/new', function(req, res){
fs.readdir('data', function(err, files){
if(err){
console.log(err);
res.status(500).send('internal server error');
}
res.render('new', {topics:files});
});
});redirect
작성후 리스트로 보내기
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);
});
});