NodeJS - controller, service, repository, entity

 

---

목차

1. 디렉토리, 파일생성하고 패키지 설치, 설계하기

2. router 와 controller 나누기

3. entity 작성하기

4. repository 작성하기

5. service 작성하기

6. list 작업하기

7. write 작업하기

8. view 작업하기

9. 조회수 올리기

10. Update  작성하기

11. Delete  작성하기

---

 

 

 

1. 디렉토리, 파일생성하고 패키지 설치, 설계하기

- 디렉토리

/
| - /node_moduels
| - /src
| --- /board
| ------- /board.route.js
| --- /user
| ------- /user.route.js
| --- index.js
| - /views
| - /public
| - package.json
| - package-lock.json
| - server.js

 

- 패키지 설치

npm init -y
npm install express nunjucks

 

- server.js 서버만들기
- express,nunjucks 설치
- src, public, views 디렉토리 생성
    - src : board, user
    - public : css, js, images
    - view : list, write, view, modify html
    - render 되는지 꼭 확인해보기

 

// server.js

const express = require("express");
const app = express();
const nunjucks = require("nunjucks");
const router = require("./src/index");

app.set("view engine", "html");
nunjucks.configure("views", {
  express: app,
});

app.use(express.static("public"));
app.use(express.urlencoded({ extended: true }));

app.use(router);

app.listen(3001, () => {
  console.log(`server start`);
});

 

// index.js


const express = require("express");
const app = express();
const nunjucks = require("nunjucks");
const router = require("./src/index");

app.set("view engine", "html");
nunjucks.configure("views", {
  express: app,
});

app.use(express.static("public"));
app.use(express.urlencoded({ extended: true }));

app.use(router);

app.listen(3001, () => {
  console.log(`server start`);
});

 

 

 

2. router 와 controller 나누기

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개의 라우터

- src → index.js
    - router 담고 exporst 하기
    - boardRouter 가져오기

- src → board → board.router.js
    - router 담고 exports 하기
    - controller 가져오기

- src → board → board.controller.js
    - boardService 가져오기
    - 핸들러함수 exports 해서 router에 넣어주기

- server.js
    - src index.js router 가져오기
    - res.send() 확인해보기

 

 

// router

const express = require("express");
const router = express.Router();
const controller = require("./board.controller");

router.get("/list", controller.getList);
router.get("/write", controller.getWrite);
router.get("/view", controller.getView);
router.get("/modify", controller.getModify);

router.post("/write", controller.postWrite);
router.post("/modify", controller.postModify);
router.post("/delete", controller.postDelete);

module.exports = router;

 

// controller

const boardService = require("./board.service");

exports.getList = (req, res) => {
  const result = boardService.getFindAll();
  res.render("board/list.html", {
    list: result,
  });
};

exports.getWrite = (req, res) => {
  res.render("board/write.html");
};

exports.getView = (req, res) => {
  const { id } = req.query;
  const result = boardService.getFindOne(id);
  res.render("board/view.html", {
    ...result,
  });
};

exports.getModify = (req, res) => {
  res.send("get modify");
};

exports.postWrite = (req, res) => {
  const { id } = boardService.create(req.body);
  res.redirect(`/boards/view?id=${id}`);
};

exports.postModify = (req, res) => {
  res.send("post modify");
};

exports.postDelete = (req, res) => {
  res.send("post delete");
};

 

 

 

3. entity 작성하기
- src → board → board.entity.js
- class Board 만들고 module.exports 내보내기

class Board {
    id;
    title;
    writer;
    content;
    created_at;
    hit;

    constructor(id, title, writer, content) {
        this.id = id;
        this.title = title;
        this.writer = writer;
        this.content = content;
        this.created_at = new Date();
        this.hit = 0;
    }
}

module.exports = Board;

 

 

 

4. repository 작성하기
- src → board → board.repository.js
- class Board 가져오기
- exports로 함수내보내면서 작업하기
    - findAll
    - create
    - findOne

const Board = require("./board.entity");

const data = [];

const latestId = () => {
  return data.length + 1;
};

exports.findAll = () => {
  return data;
};

exports.findOne = (id) => {
  const [board] = data.filter((row) => {
    return row.id === id;
  });
  return board;
};

exports.incrementHit = (id) => {
  const index = data.findIndex((v) => v.id === id);
  data[index].hit += 1;
};

exports.create = (title, writer, content) => {
  const id = latestId();
  const board = new Board(id, title, writer, content);
  data.push(board);

  return board;
};

 

 

 

5. service 작성하기
- src → board → board.service.js
- repository 가져오기
- exports로 함수내보내면서 작업하기
   - create
   - getFindOne
   - getFindAll

const boardRepository = require("./board.repository");

exports.create = (data) => {
  const { title, writer, content } = data;
  const result = boardRepository.create(title, writer, content);

  return result;
};

exports.getFindOne = (board_id) => {
  const id = parseInt(board_id);
  const result = boardRepository.findOne(id);
  boardRepository.incrementHit(id);

  return result;
};

exports.getFindAll = () => {
  const result = boardRepository.findAll();

  return result;
};

 

 

 

6. list 작업하기
- views → board → list.html
    - nunjucks 반복문 사용하기

- src → board → board.controller.js

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>LIST</title>
    <link rel="stylesheet" href="/css/index.css" />
  </head>
  <body>
    <h2>LIST</h2>
    <table>
      <tr>
        <th>번호</th>
        <th>제목</th>
        <th>작성자</th>
        <th>작성일</th>
        <th>조회수</th>
      </tr>
      {% for data in list %}
      <tr>
        <td>{{data.id}}</td>
        <td><a href="/boards/view?id={{data.id}}">{{data.title}}</a></td>
        <td>{{data.writer}}</td>
        <td>{{data.created_at}}</td>
        <td>{{data.hit}}</td>
      </tr>
      {% endfor %}
    </table>

    <a href="/boards/write">글쓰기</a>
  </body>
</html>

 

 

 

7. write 작업하기
- views → board → write.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Write</title>
  </head>
  <body>
    <h2>WRITE</h2>
    <form method="post" action="/boards/write">
      <ul>
        <li><input type="text" name="title" /></li>
        <li><input type="text" name="writer" /></li>
        <li><textarea name="content"></textarea></li>
      </ul>
      <button type="submit">글쓰기</button>
    </form>
  </body>
</html>

 

 

 

 

8. view 작업하기
- views→ board → view.html

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>View</title>
    </head>
    <body>
        <p>제목 : {{title}}</p>
        <p>작성자 : {{writer}}</p>
        <p>작성일 : {{created_at}}</p>
        <p>내용 : {{content}}</p>
        <p>조회수 : {{hit}}</p>

        <a href="/boards/list">목록가기</a>
        <a href="/boards/modify?id={{id}}">수정하기</a>
        <form method="post" action="/boards/delete?id={{id}}">
            <button type="submit">삭제하기</button>
        </form>
    </body>
</html>

 

 

 

9. 조회수 올리기
- src → board → board.repository.js
    - incrementHit

exports.incrementHit = (id) => {
    const index = data.findIndex((v) => v.id === id);
    data[index].hit += 1;
};

 

 

 

10. Update 작업하기

- views → board → modify.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>
    </head>
    <body>
        <h2>수정하기</h2>
        <form method="post" action="/boards/modify?id={{id}}">
            <ul>
                <li><input type="text" name="title" value="{{title}}" /></li>
                <li><input type="text" name="writer" value="{{writer}}" /></li>
                <li><textarea name="content">{{content}}</textarea></li>
            </ul>
            <button type="submit">수정하기</button>
        </form>
    </body>
</html>

 

// board.repository.js

exports.update = (id, new_row) => {
    const index = data.findIndex((v) => v.id === id);
    if (index === -1) return null;

    data[index] = { ...data[index], ...new_row };
    return data[index];
};



// board.service.js

exports.update = (id, new_row) => {
    const id_num = ~~id;
    const boardUpdate = boardRepository.update(id_num, new_row);

    return boardUpdate;
};

exports.getFindOneModify = (board_id) => {
    const id = parseInt(board_id);
    const result = boardRepository.findOne(id);

    return result;
};


// board.controller.js

exports.getModify = (req, res) => {
    const { id } = req.query;
    const result = boardService.getFindOneModify(id);
    res.render("board/modify.html", { ...result });
};

exports.postModify = (req, res) => {
    const { id } = req.query;
    boardService.update(id, req.body);
    res.redirect(`/boards/view?id=${id}`);
};

 

 

 

 

11. Delete 작업하기

// board.repository.js

exports.delete = (id) => {
    const result = data.filter((row) => row.id !== id);
    data = result;
    return result;
};


// board.service.js

exports.delete = (id) => {
    const id_num = ~~id;
    const boardDelete = boardRepository.delete(id_num);

    return boardDelete;
};


// board.controller.js

exports.postDelete = (req, res) => {
    const { id } = req.query;
    boardService.delete(id);
    res.redirect("/boards/list");
};

 

 

 

---

※ 23.09.14 과제로 update, delete 완성시키기

 

※ 피드백 (230918)

 - 보이드함수가 나오지않게  return 해주기

 - 성공에대한것만 생각하지말고 실패에대한것을 생각하고 예외처리해주기

    - 404 또한 응답이니까, 예외처리해주어야한다!!

 - 가독성을 위해 ~~ 보단 parseInt()를 사용해주기

 - 타입도 매우 중요해 === 사용하기

 - 서로간의 코드리뷰시간 가져보기 (페어코딩이라던지)

 - web server router 나누기 중요하니까 꼭꼭 연습많이하기!!!!

 

 ★★★★ id에 대한 이슈 발생함!!!!!