게시판 만들기 2탄
이번에 만들 게시판은 브라우저와 서버간의 요청과 응답을
실현하는 것이 목적이기 때문에 웹스토리지의 저장기능은
사용하지 않습니다
1. 서버 구축
기본적인 과정은 지난 포스트와 동일합니다
[server.js]
const express = require("express")
const nunjucks = require("nunjucks")
const app = express()
// 데이터를 저장하기 위해 전역에 배열 선언 (DB 대용)
const list = []
// nunjucks 기본세팅
app.set("view engine", "html")
// 템플릿엔진이 바라볼 디렉토리(views)와 인자값입니다
nunjucks.configure("views", {
express: app,
})
// 정적파일(public > css, js) 연결을 위한 미들웨어
app.use(express.static("public"))
// bodyParser
// 페이로드 탭의 subject=a&writer=a&content=a 부분을 파싱합니다
// {subject:a, writer:a, content: a}
app.use(express.urlencoded({ extended: true }));
app.get("/", (req, res)=> {
const { name } = req.query
// get 요청에 대한 템플릿 엔진의 '응답' (views > index.html)
res.render("index.html" , { name })
})
app.get('/list', (req,res)=>{
res.render('list.html', { list })
})
app.get('/write', (req,res)=>{
res.render('write.html')
})
app.post('/write', (req,res)=>{
// bodyParser가 켜지지 않으면 undefined 출력
const {subject, writer, content} = req.body
list.push({subject, writer, content})
res.redirect(`/view?index=${list.length-1}`)
})
app.get("/view", (req,res)=>{
const { index } =req.query
console.log(list[index])
//res.render("view.html", {name:list[index].writer, content:list[index].content, subject:list[index].subject})
res.render("view.html", { ...list[index ]})
})
app.listen(3005, ()=> {
console.log("server start")
})서버파일에서는 라우터의 설정을 이해하는 것이 중요합니다
-
각 경로의 GET 요청 : html 파일을 렌더링합니다
그리고 '/list' 경로의 GET 요청에 대해서는 'list' 배열의 내용을 템플릿으로 전달합니다 -
'/write' 경로에서 POST 요청을 처리하고,
req.body의 'subject', 'writer', 'content' 값을 가져와list배열에 추가합니다.
(write 페이지의 POST 요청을 통해 서버로 넘어온req.body는 하나하나가 게시글이 됩니다
그리고 전역에 선언한 list는 서버가 켜져있는 동안
모든 글을 담은 리스트이자 저장소 역할을 합니다)
그리고 새로 추가된 글의 인덱스를 쿼리스트링으로 전달해 '/view' 경로로 재요청(redirect)합니다 -
'/view' 경로의 GET 요청에서는 쿼리스트링으로 전달된 인덱스를 이용해서 각 게시글의 위치를 특정할 수 있습니다
2. 템플릿 엔진 활용하기
지난 포스트에서 살펴본대로
Nunjucks를 비롯한 템플릿 엔진에서는 특정 문법({{}})을 사용해서
서버에 저장된 변수를 HTML 요소로 옮겨 쓰는 것이 가능합니다
for문이나 if문을 사용하는 것도 가능하기 때문에
템플릿 엔진의 사용 문법만 알고 있으면
게시판 리스트 페이지를 그리는데도 유용하게 쓸 수 있습니다
Nunjucks의 for문은 다음과 같은 방식으로 사용합니다
{% for item in Arr %}
{{ loop.index0 }}: {{ item }}
{% endfor %}이렇게 {% for item in Arr %} 루프를 사용하면
for문 형태로 HTML 요소를 생성하는 것이 가능합니다
*loop.index는 Nunjucks의 내장 변수
loop.index 뒤에 숫자를 붙여서 배열 요소 반복의
시작점을 지정할 수 있습니다 (기본값은 1)
아래는 실제로 게시판 html 파일에 적용한 코드입니다
[list.html]
<body>
<table>
<h1>게시판 리스트</h1>
<tr>
<td>번호</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
{% for item in list %}
<tr>
<td>{{loop.index}}</td>
<td><a href=""></a>{{item.subject}}</td>
<td>{{item.writer}}</td>
<td>2022-12-19</td>
<td>0</td>
</tr>
{% endfor %}
</table>
<a href="/write">글작성</a>
</body>[view.html]
<body>
<h2>view page</h2>
<ul>
<li>제목 : {{subject}}</li>
<li>작성자 : {{writer}}</li>
<li><p>내용:</p> {{content}}</li>
</ul>
</body>```