[생활코딩] Node.js 를 이용해 웹애플리케이션 만들기(4)

글 목록 만들기

저장된 data를 읽어오는 법

*GET에 대한 라우트

app.get('/topic', function(req, res){ // get 방식으로 /topic 라우트 fs.readdir('data', function(err, files){ if(err){ res.status(500).send('Internal Server Error'); } res.render('view', {topics: files}); }) })

템플릿엔진을 이용한다
app.set('views', './views_file');
app.set('view engine', 'pug');
전 수업에서 작성했던 이 코드가 있어야 함

readdir을 이용해서 data를 읽어온다
그때 callback 함수는 err와 file 목록(files=배열)을 전달받는다

js 파일에서 pug로 정보를 전달할 때
render를 이용해서 res.render('view', {topics: files}); 이렇게 정보를 보내준다
(여러 정보를 동시에 전달할 수 있다)


아래와 같은 view.pug 파일을 작성한다
(완성된 view.pug)

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

반복문( each i in val )을 이용해서 data에 맞추어 li, a 태그를 만들어준다

topics는 js 파일에서 받아온 files 목록이다
(files가 아닌 topics를 이용해야 함)

각 목록에 a 태그를 만들어주고 a 태그의 속성을 이용해서 링크를 걸어준다
a(href="/topic/"+topic)= topic

본문 읽기

목록을 클릭했을 때 정보를 화면에 표시하는 법

*라우트
(완성된 코드)

app.get('/topic/:id', function(req, res){ // get 방식으로 각 list 페이지 라우트 let id = req.params.id; // :id의 값 fs.readdir('data', function(err, files){ if(err){ res.status(500).send('Internal Server Error'); } fs.readFile('data/'+id, 'utf-8', function(err, data){ if(err){ res.status(500).send('Internal Server Error'); } res.render('view', {topics:files, title:id, description:data}); }) }) })

URL에서 바뀔 수 있는 부분은 :으로 표시해준다

let id = req.params.id;
이 코드를 통해 id에 접근한다

접근한 id 값을 이용해서 파일을 읽기 위해 readFile을 이용한다

fs.readFile('data/'+id, 'utf-8', function(err, data){ if(err){ res.status(500).send('Internal Server Error'); } res.render('view', {topics:files, title:id, description:data}); })

이렇게 js 파일에서 여러 정보를 pug로 전달해줄 수 있다

readdir을 이용해서 data 디렉토리 아래의 파일들의 목록을 가져온 후 readFile을 이용해서 id 값을 이용해서 해당 파일을 읽는다

코드의 개선

*readdir 중복 & view 중복

중복 제거 -> 유지보수 쉬움, 가독성 좋음

app.get(['/topic', '/topic/:id'], function(req, res){ // get 방식으로 /topic 라우트 fs.readdir('data', function(err, files){ if(err){ res.status(500).send('Internal Server Error'); } let id = req.params.id; // :id의 값 if(id){ // id 값 있을 때 fs.readFile('data/'+id, 'utf-8', function(err, data){ if(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: 'Wellcome', description:'Hello!!'}); } }) })

[]를 이용해서 여러 path 라우트하기

if - else를 이용해서 id 값이 있을 때, 없을 때 다른 코드를 실행하도록 하기
id 값이 있는 경우에만 readFile을 이용해서 id 값에 해당하는 파일 읽기

id 값이 없는 경우에는 바로 view에 topics, title, description 전달

id 값이 없는 경우

topic/:id 라우트 삭제하기

app.get('/topic/:id', function(req, res){ // get 방식으로 각 list 페이지 라우트 let id = req.params.id; // :id의 값 fs.readdir('data', function(err, files){ if(err){ res.status(500).send('Internal Server Error'); } fs.readFile('data/'+id, 'utf-8', function(err, data){ if(err){ res.status(500).send('Internal Server Error'); } res.render('view', {topics:files, title:id, description:data}); }) }) })

*제목 클릭하면 /topic으로 가도록 view.pug 수정

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

*new 클릭하면 .../topic/new로 이동하도록 view.pug 수정

doctype html html head meta(charset="UTF-8") title Document 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

*.../topic/new 디자인 비슷하도록 new.pug 수정

doctype html html head meta(charset="UTF-8") title Document 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")

이때 js 파일을 수정하지 않으면 topics를 받아올 수 없기 때문에 에러가 뜬다

js 파일의 .../topic/new 라우트 부분 수정
(원래는 render('new')만 있었는데 topics를 전달하기 위해 readdir을 이용해서 files를 읽어온다)

app.get('/topic/new', function(req, res){ //form을 topic/new로 fs.readdir('data', function(err, files){ if(err){ res.status(500).send('Internal Server Error'); } res.render('new', {topics: files}); }) })

수정 완료된 모습

*정보 입력 후 제출하면 해당 페이지로 이동하도록 수정

입력 후 제출

수정 전: 성공하면 Success! 뜸

app.post 부분을 수정해야 한다
res.send('Success!');

res.redirect('/topic/'+title);
이렇게 redirect를 이용해서 바로 해당 페이지로 이동하도록 수정

정보 입력

수정 후: 바로 해당 페이지로 이동

ㄷㅏ 듣긴했지만 다시 정리한 거 보면서 공부해야게따 ;ㅅ;