출력을 하기 위해서 우리는 라우터를 만들어줘야한다.
/topic이라는 라우터가 있는데 왜 만들어야할까에 대해 의문을 가질 수 있다.
이유는 사용자가 url상으로 입력해서 들어오는 방식은 POST 방식이 아닌 GET 방식이기 때문이다.
그래서 GET 방식의 /topic을 한 개 더 만들어줘야하는 것이다.
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});
})
그리고 다음과 같이 readdir를 통해 data 디렉토리 내에 있는 파일들을 읽는 기능을 하는 코드를 작성한다.
에러에 대한 예외처리까지 해준다.
참고로 바뀔 수 있는 정보에 대한 처리는 : 으로 한다.
body
h1 Server Title
ul
each topic in topics
li= topic
view.pug 파일의 body부분을 위와 같이 each를 사용하여 topics를 한 개씩 순회하여 li에 대입하게 된다. 그러면 사용자로부터 데이터가 들어올 때 우리가 코드를 수정하지 않고도 그 데이터들을 사용할 수 있다.
추가로 body부분을 수정할 것이다.
body
h1 Server Title
ul
each topic in topics
li
a(href='/topic/'+topic)= topic
( ) 안은 속성을 의미한다. href 속성값으로 /topic/을 주고 웹페이지 소스를 리로드해보면 <a href="/topic/파일명">파일명</a> 가 된다.
그러면 웹페이지에 파일명에 링크가 생기면서 들어갈 수 있을텐데 들어가면 오류가 날 것이다.
Cannot GET /topic/파일명
다시 우리는 라우터를 만들어줘야한다.
app.get('/topic/:id', function (req, res) {
})
다음과 같이 프레임을 또 다시 만들어준다.
app.get('/topic/:id', function (req, res) {
var id = req.params.id;
});
위 코드에서 '/topic/:id'의 id는 req.params.id의 id와 매칭된다.
/topic/:name이라면 req.params.name이 되어야할 것이다.
fs.readFile('data/' + id, 'utf-8', function (err, data) {
if (err) {
console.log(err);
res.status(500).send('Internal Server Error');
}
res.send(data);
})
위 코드를 추가했다.
readFile을 사용하여 data디렉토리 아래에 있는 파일들을 읽는다.
그리고 callback함수를 통해 2개의 인자를 전달하는데 한 개는 err, 한 개는 data 이다.
이 때, 인자의 이름은 상관없지만 위치는 매우 중요하다.
에러있을 시에는
console.log(err);
res.status(500).send('Internal Server Error');
를 실행하고,
에러가 없이 정상적으로 실행될 때에는
res.send(data);
를 실행하게 된다.
추가로 우리는 웹페이지에서 링크를 클릭했을 때, 그에 해당하는 본문 내용을 아래에 출력되게 할 것이다.
그래서 마지막 줄 res.send(data);를 res.render('view', {title:id});로 수정해주고, view.pug 파일도 수정해준다.
app.get('/topic/:id', function (req, res) {
var id = req.params.id;
fs.readFile('data/' + id, 'utf-8', function (err, data) {
if (err) {
console.log(err);
res.status(500).send('Internal Server Error');
}
res.render('view', {title:id});
})
});
doctype html
html
head
meta(charset='utf-8')
body
h1 Server Title
ul
each topic in topics
li
a(href='/topic/'+topic)= topic
article
h2= title
하지만 이렇게 하면 에러가 날 것이다.
왜냐하면 /topic 라우터에서는 topics를 주지만, /topic/:id 라우터에서는 topics를 안주기 때문이다.
그래서 /topic 라우터에서 그대로 가져오면 된다.
최종코드는 다음과 같다.
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, 'utf-8', function (err, data) {
if (err) {
console.log(err);
res.status(500).send('Internal Server Error');
}
res.render('view', {topics:files, title:id, description:data});
})
})
});
위 코드의 흐름을 보면 가장 먼저 사용자가 topic의 특정한 파라미터를 갖고 들어오면, readdir를 통해 data 디렉토리에 있는 파일 목록을 가져온다.
성공시, readFile을 통해서 files와 id값에 해당되는 데이터를 읽어온다. 이 때의 files는 readdir했을 때 가져온 정보이다. description의 정보는 readFile로 읽어온 data에 있기 때문에 위와 같이 작성한다.
<new.pug 전체코드>
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')
<view.pug 전체코드>
doctype html
html
head
meta(charset='utf-8')
body
h1 Server Title
ul
each topic in topics
li
a(href='/topic/'+topic)= topic
article
h2= title
= description
<app.js 전체코드>
var express = require('express');
var bodyParser = require('body-parser');
var fs = require('fs');
var app = express();
app.use(bodyParser.urlencoded({extended: false}));
app.locals.pretty = true;
app.set('views', './views');
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('Internal Server Error');
}
res.render('view', {topics: files});
})
});
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, 'utf-8', function (err, data) {
if (err) {
console.log(err);
res.status(500).send('Internal Server Error');
}
res.render('view', {topics:files, title:id, description: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) {
console.log(err);
res.status(500).send('Internal Server Error');
}
res.send('Success!');
});
});
app.listen(7777, function () {
console.log('Connected, 7777 port!');
});
'javascript > node.js 웹애플리케이션 제작' 카테고리의 다른 글
[Node.js] 자바스크립트 데이터베이스 연동 - 웹애플리케이션 2 (0) | 2024.07.13 |
---|---|
[Node.js] 자바스크립트 데이터베이스 연동 - 웹애플리케이션 1 (0) | 2024.07.13 |
[Node.js] 웹애플리케이션 제작 - 4 파일 업로드 (0) | 2024.07.09 |
[Node.js] 웹애플리케이션 제작 - 3 코드 개선 (0) | 2024.07.09 |
[Node.js] 웹애플리케이션 제작 - 1 (0) | 2024.07.09 |