개발공부일지
NodeJS - express 사용하기 본문
목차
1. express설치하기
2. nunjucks 설치하기
3. 필요한 라우터 만들기
4. 필요한 로직을 넣어주기
1. express설치하기
- 작업할 디렉토리(게시판) 터미널에서 작성하기
npm init
npm install expressconst express = require("express");
const app = express();
app.get("/", (req, res) => {
res.send("hello world!");
});
app.listen(3000, () => {
console.log(`server start`);
});- express 라이브러리를 설치하고 불러온다.
- 라우터를 하나 만들어서 127.0.0.1:3000 연결되는지 확인해본다.
2. nunjucks 설치하기
npm install nunjucksconst nunjucks = require("nunjucks");
app.set("views engine", "html");
nunjucks.configure("views", {
express: app,
});
app.use(express.urlencoded({ extended: true }));
app.get("/", (req, res) => {
// res.send("hello world!");
res.render("index.html");
});- nunjucks를 설치하고 views 디렉토리에 index.html 파일을 만들어준다.
- nunjucks를 불러오고, body parse해줄 코드를 작성한다.
- 127.0.0.1:3000/ 일때 index.html이 뜨는지 확인해본다.
3. 필요한 라우터 만들기
app.get("/boards/list", (req, res) => {
res.render("board/list.html");
});
app.get("/boards/write", (req, res) => {
res.render("board/write.html");
});
app.get("/boards/view", (req, res) => {
res.render("board/view.html");
});
app.post("/boards/write", (req, res) => {
res.redirect("/board/view");
});- 게시판에 필요한 list, write. view페이지의 라우터를 만들어준다.
- write에는 POST에 redirect로 작성한다.
4. 필요한 로직을 넣어주기
<body>
<h2>글쓰기 페이지입니다.</h2>
<form method="post" action="/boards/write">
<input type="text" name="title" /><br />
<input type="text" name="writer" /><br />
<textarea name="content"></textarea><br />
<button type="submit">글쓰기</button>
</form>
</body><body>
<h2>VIEW 페이지 입니다</h2>
<ul>
<li>제목 : {{title}}</li>
<li>작성자 : {{writer}}</li>
<li>내용 : {{content}}</li>
</ul>
</body>const boards = [];
app.get("/boards/view", (req, res) => {
const { id } = req.query;
const row = boards[id];
console.log(row);
res.render("board/view.html", {
title: row.title,
writer: row.writer,
content: row.content,
});
});
app.post("/boards/write", (req, res) => {
boards.push(req.body);
const id = boards.length - 1;
res.redirect(`/boards/view?id=${id}`);
});
※ 미들웨어
※ 정적 라우팅
※ 동적 라우팅
※ 템플릿 엔진
'NodeJS' 카테고리의 다른 글
| NodeJS - controller, service, repository, entity (0) | 2023.09.14 |
|---|---|
| NodeJS - Router, Controller 나누기 (0) | 2023.09.13 |
| NodeJS - RESTful, URL, URI, Request method (GET, POST) (0) | 2023.09.11 |
| NodeJS - 요청, 응답 (0) | 2023.09.09 |
| NodeJS - Response Message class문법으로 만들기 (0) | 2023.09.07 |
'NodeJS' Related Articles
more
