$$config title: [node.js] 게시판 만들기 - 목록 띄우기 keywords: - IT - node.js $$ [nunjucks로 게시판 만들기](https://green-grapes.tistory.com/entry/nodejs-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EB%A7%8C%EB%93%A4%EA%B8%B0-CRUD%EA%B8%80%EC%93%B0%EA%B8%B0-%EC%9D%BD%EA%B8%B0-%EC%88%98%EC%A0%95%ED%95%98%EA%B8%B0-%EC%82%AD%EC%A0%9C%ED%95%98%EA%B8%B0) [참고2](https://velog.io/@suzu11/Node.js%EB%A1%9C-%EA%B2%8C%EC%8B%9C%ED%8C%90-%EB%A7%8C%EB%93%A4%EA%B8%B0-1) [참고3](https://soohyun6879.tistory.com/161) [참고4](https://velog.io/@sue6e2/node.jsnode.js%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0) [참고5](https://velog.io/@gwak2837/Node.js-%EB%B0%B1%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C) # 게시판 만들기 nunjucks깔기 ```js npm install express nunjucks ``` View Engine 사용 - 서버에서 처리한 데이터 결과값을 정적인 페이지(HTML 파일)에 보다 편리하게 출력해주기 위해 사용 - 템플릿 파일(문서)을 만들고, 해당 템플릿 문서에 서버에서 처리한 데이터를 전달하면 해당 데이터를 화면에 출력할 수 있다. - nunjucks 가 view engine ```js //./server/server.js const express = require("express"); const app = express(); const router = require("./Router/router"); const nunjucks = require('nunjucks') app.set('view engine', 'html') nunjucks.configure('./server/views',{ // html파일의 폴더 경로를 적음 express: app, // app 객체 연결 watch: true, // true - HTML 파일이 변경될 때 템플릿 엔진을 다시 렌더링함 }) app.use("/", router); const port = 3000; app.listen(port, () => { console.log(`Listening on port ${port}`); }); ``` list 출력 js코드 ```js //./server/Router/router const express = require("express"); const router = express.Router(); router.get("/", (req, res) => { res.render('index.html'); //게시판 메인 페이지 html코드가 저장된 파일명 }); // localhost:3000(숫자는 아래에서 지정) = / //이라는 주소에서는, view라는 폴더 안에 있는 index.html파일을 랜더하겠다. let list = [ { subject:'안녕하세요', //글제목 username:'podo', //작성자 date:'2022-02-03', //날짜 }, { subject:'안녕하세요2', username:'podo2', date:'2022-02-03', }, { subject:'안녕하세요3', username:'podo3', date:'2022-02-03', }, { subject:'안녕하세요4', username:'podo4', date:'2022-02-03', }, { subject:'안녕하세요5', username:'podo5', date:'2022-02-03', }, ] //board router.get('/board/list',(req, res)=>{ res.render('board_list.html',{ content:list, num:1, //list, 라고 써도됨 }) }) module.exports = router; // localhost:3000/board/list라는 주소에서는 //view 폴더 안에 있는 board_list.html이라는 파일을 랜더하겠다. //내용은 list라는 배열을 사용할 것이며, num은 1로 통일하겠다. ``` 메인 페이지 html코드 ```html //./server/views/index.html

LOGO

게시판 가기

``` 리스트 html 코드 ```html //./server/views/board_list.html

LOGO

게시판 리스트

{% for item in content %} {% endfor %} 글쓰기

번호	제목	작성자	작성일
1	{{item.subject}}	{{item.username}}	{{item.date}}

```

게시글 상세