[Node.js/Express] Express를 이용해 간단한 게시판 구현

민수·2022년 12월 19일
0
post-thumbnail

Express를 활용해 간단한 게시판의 CRUD를 구현해 보았다.

코드

npm init -y
npm install express nunjucks

주요 코드

server.js

// express의 내장된 body-parser 미들웨어를 사용하기 위한 설정
// false면 querystring 모듈을 사용해 쿼리스트링 해석(내장 모듈)
// true면 qs 모듈을 사용해 쿼리스트링 해석(설치 필요[npm 패키지임])
app.use(express.urlencoded({ extended: false }));

app.post("/write", (req, res) => {
  const { title, writer, content } = req.body;
  const date = dateNow();
  list.push({ title, writer, content, date, views: 0 });
  res.redirect(`/view?index=${list.length - 1}`);
});

write 페이지에서 글작성을 완료하고 버튼을 누르면 /write로 post 요청을 보내게 되고 request body에 데이터가 담겨서 들어온다.
설정을 해주면 express는 body-parser를 이용해 body에 담긴 쿼리스트링을 req.body 객체에 담아준다.
req.body에 담긴 객체를 구조분해 할당으로 값을 각각 변수에 담아주고 다시 단축속성명을 이용해 객체를 생성한 다음 list 배열에 담아준다.
페이지를 view 페이지로 리다이렉트 해주는데 index값을 넘겨줘야 하므로 쿼리스트링에 list의 마지막 index를 넘겨준다.

app.post("/modify", (req, res) => {
  const { index } = req.query;
  const { title, writer, content } = req.body;
  list[index].title = title;
  list[index].writer = writer;
  list[index].content = content;
  list[index].date = dateNow();
  res.redirect(`/view?index=${index}`);
});

modify 페이지에서 글수정을 완료하고 버튼을 누르면 /modify로 post 요청을 보내게 되고 request body에 데이터가 담겨서 들어온다.
url에 있는 쿼리스트링은 req.query에 객체로 담겨서 오는데 이를 구조분해 할당을 해서 index 변수에 담아준다.
body에 담긴 쿼리스트링도 req.body 객체에서 구조분해 할당을 해서 각각 변수에 담아준다.
구한 index값을 이용해서 해당 인덱스에 해당하는 값들을 수정해준다.
페이지를 view 페이지로 index값을 넘겨주면서 리다이렉트를 해준다.

전체 코드

https://github.com/cloudcoke/express_crud_practice

0개의 댓글