send : 텍스트 자체로 응답을 준다.(돌려주는 행위)
render : 파일을 가져다가 응답을 준다.
가장 먼저, npm install express nunjucks 해주는 것 잊지말기.
자바스크립트 코드
(HTML 코드는 자바스크립트 코드 끝나고 바로 작성하였다.)
const express = require('express')
const app = express()
const nunjucks = require('nunjucks')
app.set('view engine', 'html')
nunjucks.configure('views',{
express:app,
})express 와 nunjucks를 외부파일에서 끌어와서 변수에 저장해준다.
express 와 nunjucks를 세팅해준다.
Node.js에는 View Engine이라는 시스템이 있다.
뷰엔진은 서버에서 처리한 데이터 결과값을 정적인 페이지(HTML 파일)에 보다 편리하게 출력해주기 위해 사용한다. 뷰엔진에서 요구하는 형태로 템플릿 파일(문서)을 만들고, 해당 템플릿 문서에 서버에서 처리한 데이터를 전달하면 해당 데이터를 화면에 출력할 수 있다. nunjucks가 이 뷰엔진이다.
ninjucks.configure 뒤에 들어가는 첫번 째 인자값은 요청할 여러 html파일이 담겨있는 '폴더명'이다.
여기까지가 기본세팅이다. 그냥 외우면 된다.
app.get('/', (req, res)=>{
res.render('index.html') //게시판 메인 페이지 html코드가 저장된 파일명(js코드 아래에 첨부함)
})
// 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
app.get('/board/list',(req, res)=>{
res.render('board_list.html',{
content:list,
num:1,
//list, 라고 써도됨
})
})
// localhost:3000/board/list라는 주소에서는
//view 폴더 안에 있는 board_list.html이라는 파일을 랜더하겠다.
//내용은 list라는 배열을 사용할 것이며, num은 1로 통일하겠다.
app.get('/board/write', (req,res)=>{
res.render('board_write.html')
})
//localhost/board/write라는 주소에서는
//view라는 폴더 안에 있는 board_write.html이라는 파일을 랜더하겠다.
app.use(express.urlencoded({extended:true,})) //이거 안해놓고 post로 요청했는데 안돼요 금지. 필수임.
app.post('/board/write',(req,res)=>{
let board = {...req.body} //req 콘솔 찍어보면, list가 json 형식으로 나옴
console.log(list, board)
list.push(board)
console.log(list)
res.redirect('/board/list')
})
//localhost/board/write라는 주소에서 form으로 넘겨받은 데이터를(내가 입력한 데이터를)
//게시판 글 리스트에 넣어준다.
//redirect는 글 작성이 끝나면, 다시 localhost/board/list라는 주소로 자동으로 넘어가겠다는 의미이다.
app.get('/board/view', (req,res)=>{
console.log(list)
res.render('board_view.html')
})
//localhost/board/view라는 주소를 입력하면, view라는 폴더 안에 있는 board_view.html이라는 파일을 랜더하겠다.
app.listen(3000, ()=>{
console.log('서버시작')
})
//뒤에 숫자 지정. 보통 3000, 8000 많이 쓴다.
게시판 메인 페이지
파일이름 : index.html
html 코드
<body>
<h1><a href="/">LOGO</a></h1>
<ul>
<li><a href="/board/list">게시판 가기</a></li>
</ul>
</body>
logo를 누르면, 메인페이지로
게시판 가기를 누르면, 게시판 리스트가 나오도록 하겠다.
게시판 리스트
파일이름: board_list.html
html 코드
<body>
<h1><a href="/">LOGO</a></h1>
<h2>게시판 리스트</h2>
<table>
<tr>
<td>번호</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
</tr>
{% for item in content %}
<tr>
<td>1</td>
<td>{{item.subject}}</td>
<td>{{item.username}}</td>
<td>{{item.date}}</td>
</tr>
{% endfor %}
<a href="/board/write">글쓰기</a>
</table>
</body>
글쓰기를 누르면, 새 글을 생성하는 페이지로 이동하도록 하겠다.
파일이름: board_write.html
html 코드
<body>
<h1><a href="/">LOGO</a></h1>
<h2>게시판 글쓰기</h2>
<form method="post" action="/board/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>
<!--제목, 작성자, 작성일
Request method GET(url을 엔터만 치면 됨, 내용 갖고오고 싶을 때 내용을 꾸밀 때 사용)
POST(내용을 보내야할 때. 데이터 처리를 위해.)
-->
내용을 작성해서, 버튼을 누르면 리스트에 내용이 적혀져, 들어가게 만들겠다.
이렇게 입력 후, 작성하기를 누르면?
추가되어, 게시판리스트로 바로 이렇게 이동한다.
쓸 글보기는 별도로 만들겠다. (아직 안배움)
파일제목 : board_view.html
html 코드
body>
<h1><a href="/">LOGO</a></h1>
<h2>게시판 보기</h2>
<ul>
<li>
제목 : 질문 있습니다.
</li>
<li>
작성자 : podo
</li>
<li>
작성일 : 2022-02-03
</li>
</ul>
<a href="/board/list">목록</a>
</body>목록을 누르면 게시판 리스트로 이동
'백엔드 > Node.js' 카테고리의 다른 글
| [nodejs]쿠키, 세션, 미들웨어, 라우팅 (1) | 2022.02.08 |
|---|---|
| [nodejs]쿠키란?, 로그인 페이지 만들기(cookie parser 사용 안하고) (0) | 2022.02.07 |
| [nodejs] promise, then, await 구동 순서, 사용 이유 완벽 이해하기 (0) | 2022.01.28 |
| [nodejs] 템플릿 엔진 nunjucks 설치, 세팅, 사용하기 (0) | 2022.01.28 |
| [nodejs] 구조분해 할당, 객체 리터럴, require, 랜덤함수, promise (1) | 2022.01.27 |