오늘은 지금까지 배운 nodejs의 내용을 이용해 간단한 글 작성, 수정, 삭제 기능을 가진 게시판 웹 사이트를 만들어보자.
메인 페이지, 글의 리스트 페이지, 글 쓰기, 삭제, 수정 순으로 기능을 구현해볼 것이다.
1. Set up
express와 nunjucks를 먼저 설치하고 다음과 같이 js를 작성한다.
/* server.js */
const express = require('express')
const app = express()
const nunjucks = require('nunjucks')
app.set('view engine', 'html')
nunjucks.configure('views', {express:app})
app.use(express.urlencoded({extended:true}))
app.get('/', (req, res) => {
res.render('index.html')
})
app.listen(3000, () => {
console.log('서버 구동')
})
view 폴더 안에는 index.html을 만들어준다.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1><a href='/'>logo</a></h1>
<ul>
<li><a href='/board/list'>게시판 바로가기</a></li>
</ul>
</body>
</html>
여기까지 하고 server.js를 실행해 메인 페이지가 잘 나오는지를 한 번 확인하고 다음 단계를 진행하자.
2. 게시물 리스트 페이지 만들기
이제 boardData.js라는 js파일을 하나 더 만들고, 거기에 게시판의 내용물이 될 데이터를 만든 후,
export를 통해 server.js로 가져온다.
/* boardData.js */
const list = [
{
subject: '안녕하세요1',
username: 'life',
date:'2022-02-04'
},
{
subject: '안녕하세요2',
username: 'reset',
date:'2022-02-04'
},
{
subject: '안녕하세요3',
username: 'button',
date:'2022-02-04'
}
]
module.exports = {
data:list
}module의 export에 list라는 변수를 넣어주고 내보낸다.
이를 다시 server.js에서 받으려면 다음과 같이 추가하면 된다.
/* server.js */
const list = require('/boardData')
const data = [...list.data]
이렇게 하면 data 변수에는 boardData.js에서 가져온 객체 형태 데이터가 복사되어 배열 형태로 들어오게 된다.
이제 게시판 리스트 웹 페이지가 될 html 파일을 만들자.
/* server.js */
/* 다음 코드를 추가 */
app.get('/board/list', (req, res) => {
res.render('board_list.html', {
list:data
})
})
이 코드의 uri에 대응해 불러올 html 문서 board_list.html은 다음과 같이 작성한다.
<!-- board_list.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1><a href='/'>logo</a></h1>
<h2>리스트 페이지</h2>
<table>
<tr>
<td>번호</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
</tr>
{% set num = 1 %}
{% for item in list %}
<tr>
<td>{{num}}</td>
<td>{{item.subject}}</td>
<td>{{item.username}}</td>
<td>{{item.date}}</td>
</tr>
{% set num = num + 1 %}
{% endfor %}
</table>
</body>
</html>
게시판 웹 페이지에 글 목록을 테이블 형태로 렌더링하되,
글의 제목, 작성자, 작성일을 외부 데이터에서 가져오고 싶다.
그럴 경우에 해야할 일은
1. boardData.js에서 server.js로 가져온 데이터를 board_list.html에 전달하고, (const data)
2. 가져온 데이터를 반복문을 이용해 html에 렌더링한다.
html 문서에서 변수나 반복문을 선언/사용하기 위해서는 {% %} 안에 필요한 내용을 써주면 된다.
위에서는 num이라는 변수를 선언하고 그 값을 1로 줬다.
또 list (server.js에서 가져온)들의 각 item들을 순차적으로 불러와 데이터 갯수만큼의 행을 가진 표를 만들었다.
list는 객체를 요소로 가지는 배열이며,
배열의 요소인 객체의 각 데이터를 불러왔고, (item.subject, item.username, item.date)
각각의 객체에 대해 표를 생성하는 것을 반복한 것이다.
반복문이 적용되는 범위를 끝내려면 {% endfor %} 코드를 넣어주면 된다.
여기까지 하고 지금까지 만든 웹 페이지를 불러오면 각각 다음과 같이 렌더링된다.
3. 글쓰기 페이지 만들기
다음으로 글쓰기 페이지를 만들어보자. 우선 라우터에 대응할 웹 페이지 uri를 지정하고 html을 만들자.
/* server.js */
/* 다음을 추가 */
app.get('/board/write', (req, res) => {
res.render('board_write.html', {
list:data
})
})
/* board_write.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=\, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1><a href='/'>살려줘</a></h1>
<h2>글쓰기 페이지</h2>
<form method='post' action='./write'>
<ul>
<li>제목: <input type='text' name='subject'></li>
<li>작성자: <input type='text' name='username'></li>
<li>작성일: <input type='text' name='date'></li>
</ul>
<input type='submit' value='글작성'>
</form>
</body>
</html>
board_list.html에도 글쓰기 버튼을 만들어주기 위해 다음과 같이 추가한다.
/* board_list.html */
<a href='/board/write'>글쓰기</a>
여기서 board_write.html을 보면 form element의 method가 post임을 알 수 있다.
이는 웹 페이지를 불러올 경우, 데이터를 작성해 제출할 경우 각각 웹 페이지에서 보여야 할 반응이 다르기 때문이다.
웹 페이지를 불러올 경우 (server.js에서 get을 사용한 경우) board_write.html을 불러와야 하고,
데이터를 제출할 경우 라우터에서는 post로 이를 받아 제출받은 데이터를 원래 있던 데이터와 합하고,
게시물 리스트 페이지로 사용자를 돌려보내주어야 한다.
server.js에 후자에 해당하는 코드를 추가해보자.
/* server.js */
app.post('/board/write', (req, res) => {
let item = {...req.body}
data.push(item)
res.redirect('/board/list')
})
우리가 데이터를 제출하면 제출한 데이터(객체)는 요청 헤더의 body가 되어 서버에 전달된다. (req.body)
이를 복사해 item이라는 변수에 넣고, 그걸 server.js의 전역변수 data(배열)에 추가해준다.
이 시점에서 data는 4개의 객체를 가진 배열이 된다.
이후, /board/list로 리다이렉트되어 대응하는 html을 다시 불러올 때, 전역 변수 data는 추가한 데이터를 포함해
board_list.html에 넘어가게 되고, 이를 반복문을 통해 불러오므로 우리가 제출한 데이터가 추가된 것을 확인할 수 있다.
다음과 같이 글을 작성하고 글 작성 버튼을 눌러 요청을 제출하면
제출한 데이터를 통합해 다시 리스트 페이지가 렌더링 되는 것을 확인할 수 있다.
이제 남은 것은 작성된 글 보기, 글 삭제하고, 수정하기 3가지인데, 이 글에서 다루면 글이 너무 길어지므로
여기서부턴 다음 포스트에서 다룬다.
'Nodejs > Server' 카테고리의 다른 글
| Session #2 - 미들웨어 (0) | 2022.02.13 |
|---|---|
| Session #1 (0) | 2022.02.13 |
| Server의 이해 - Cookie #2 (0) | 2022.02.08 |
| Server의 이해 - Cookie #1 (0) | 2022.02.07 |
| JavaScript의 활용 - 게시판 서버 만들기 #2 (0) | 2022.02.06 |