개발공부일지
NodeJS - Router, Controller 나누기 본문
목차
1. 디렉토리 생성하고 패키지 설치하기
2. 파일 만들기
3. 라우터 나누기
4. 템플릿 엔진 설정하기
5. controller (핸들러함수) 분리하기
1. 디렉토리 생성하고 패키지 설치하기
- 만들고자하는 디렉토리를 생성하고 라우터를 나누기 위해 설계하기
/
| - /node_moduels
| - /src
| --- /board
| ------- /board.route.js
| --- /user
| ------- /user.route.js
| --- index.js
| - /views
| - /public
| - package.json
| - package-lock.json
| - server.js- GET /
- GET /boards/list
- GET /boards/write
- GET /boards/view
- GET /boards/modify
- POST /boards/write
- POST /boards/modify
- POST /boards/delete
- GET /users/login
- GET /users/join
- POST /users/login
- POST /users/join
총 12개의 라우터npm init -y
npm install express
npm install nunjucks
2. 파일 만들기
// server.js 파일
const express = require("express");
const app = express();
app.get("/", (req, res) => {
res.send("hello world!");
});
app.listen(3000, () => {
console.log(`server start`);
});// src 디렉토리에 index.js파일
const express = require("express");
const router = express.Router();
module.exports = router;- src 디렉토리에서 index.js 파일을 만들고, server.js로 돌아간다.
const router = require("./src/index");
app.use(router);- router를 가져온다.
3. 라우터 나누기
// src 디렉토리 안에있는 board디렉토리에 board.route.js 파일
const express = require("express");
const router = express.Router();
router.get("/list", (req, res) => {
res.send("list");
});
router.get("/write", (req, res) => {
res.send("write");
});
router.get("/view", (req, res) => {
res.send("view");
});
router.get("/modify", (req, res) => {
res.send("modify");
});
router.post("/write", (req, res) => {
res.send("write");
});
router.post("/modify", (req, res) => {
res.send("modify");
});
router.post("/delete", (req, res) => {
res.send("delete");
});
module.exports = router;- 총 만들고 싶은 라우터 7개를 생성한다.
// src 디렉토리에 index.js 파일
const boardRouter = require("./board/board.route");
router.use("/boards", boardRouter);- index.js 파일에 boardRouter를 추가해준다.
const express = require("express");
const router = express.Router();
router.get("/login", (req, res) => {
res.send("login");
});
router.get("/join", (req, res) => {
res.send("join");
});
router.post("/login", (req, res) => {
res.send("login");
});
router.post("/join", (req, res) => {
res.send("join");
});
module.exports = router;- 유저에 관한것도 게시판에서 한것처럼 디렉토리를 만들고 라우터를 생성해준다.
4. 템플릿 엔진 설정하기
// server.js 파일
const nunjucks = require("nunjucks");
app.set("views engine", "html");
nunjucks.configure("views", {
express: app,
});- res.render()를 사용할수있게 nunjucks를 사용한다.
// src 디렉토리에 index.js
router.get("/", (req, res) => {
res.render("index.html");
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script type="text/javascript" src="/js/index.js"></script>
<link type="text/css" rel="stylesheet" href="/css/index.css" />
</head>
<body>
hello world!
</body>
</html>- view디렉토리 index.html 파일에 css, js를 추가한다.
// server.js 파일
app.use(express.static("public"));- 정적파일을 사용하기 위해 express.static() 안에 css, js가 들어있는 public 디렉토리를 넣어준다.
5. controller (핸들러함수) 분리하기
// src -> board -> board.controller.js 파일
const list = (req, res) => {
res.send("list");
};
module.exports = {
list,
};// src -> board -> board.route파일
const controller = require("./board.controller")
router.get("/list", controller.list);
6. closure
// src -> board -> board.controller.js 파일
class BoardContoller {
constructor(data) {
this.data = data;
}
list(req, res) {
console.log(this);
res.send("list");
}
}
module.exports = BoardContoller;// src -> board -> board.route파일
const Controller = require("./board.controller");
const getRouter = (data) => {
// data = > board
// console.log(data);
const board = new Controller(data);
router.get("/list", (req, res) => board.list(req, res));
return router;
// {}
};
module.exports = getRouter;// src 디렉토리 index.js
const boards = [];
router.use("/boards", boardRouter(boards));
router.use("/users", userRouter);
※ MVC
Model 모델 → 데이터 (로컬스토리지같은 역할, board=[ ]같은 )
View 뷰→ 클라이언트에게 보내야할 마지막에 보내야할 결과물
Controller 컨트롤러 → 요청과 응답의 데이터를 조작하는것
※ 의존성
※ express사이트 참고
'NodeJS' 카테고리의 다른 글
| NodeJS - Database - connection pool 활용해서 게시판 만들기 (작업중) (0) | 2023.09.20 |
|---|---|
| NodeJS - controller, service, repository, entity (0) | 2023.09.14 |
| NodeJS - express 사용하기 (0) | 2023.09.12 |
| NodeJS - RESTful, URL, URI, Request method (GET, POST) (0) | 2023.09.11 |
| NodeJS - 요청, 응답 (0) | 2023.09.09 |
'NodeJS' Related Articles
more
