[Backend] Node.js + Express MVC 기초 세팅

Web

[Backend] Node.js + Express MVC 기초 세팅

ㅋ. ㅋ 2024. 1. 2. 14:39

.
├── README.md
├── node_modules
├── package-lock.json
├── package.json
├── src
│   ├── app.js
│   ├── controllers
│   │   └── index.js
│   ├── routes
│   │   └── index.js
│   └── views
│       ├── error.ejs
│       └── index.ejs
└── yarn.lock

폴더구조

// app.js

const express = require("express");
const logger = require("morgan");
const cors = require("cors");
const path = require("path");
const createError = require("http-errors");
const app = express();

app.use(
  cors({
    origin: ["http://localhost:3000", "~~~"], // port 3000 뚫음
    credentials: true,
  })
);

/** view 설정 */
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");

/** 로그 */
console.log(process.env.NODE_ENV);
if (process.env.NODE_ENV === "production") {
  app.use(logger("combined"));
} else {
  app.use(logger("dev"));
}

/** 미설정 시 req.body undefined 뜸 */
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

/** 주소 - 라우터 파일 매칭 */
const apiRouter = require("./routes/index.js");
app.use("/api/", apiRouter);

/** error 처리 */
app.use(function (req, res, next) {
  next(createError(404));
});
app.use(function (err, req, res) {
  res.locals.message = err.message;
  res.locals.error = req.app.get("env") === "development" ? err : {};
  res.status(err.status || 500);
  res.send("error");
});

/** server 구동 */
const server = app.listen(3001, () => {
  const serverPort = server.address().port;
  console.log("server started, port : ", serverPort);
});

module.exports = app;

// routes/index.js

const express = require("express");
const router = express.Router();
const { postData, getData } = require("../controllers/index");

module.exports = router;

/** ex path : http://localhost:3001/api/~ */

/** post - http://localhost:3001/api/ */
router.post("/", async function (req, res) {
  await postData (req) // business logic은 컨트롤러에서 처리
    .then((res) => {
      return res.status(200).send({ data: res });
    })
    .catch((err) => res.status(500).send(err));
});

/** get - http://localhost:3001/api/get */
router.get("/get", async (req, res) => { 
  await getData (req) // business logic은 컨트롤러에서 처리
    .then((res) => {
      return res.status(200).send({ data: res });
    })
    .catch((err) => res.status(500).send(err));
});

// views/error.ejs

<h1>
    <%= error %>
</h1>

// views/index.ejs

<!DOCTYPE html>
<html>

<head>
    <title>
        <%= title %>
    </title>
    <link rel='stylesheet' href='../stylesheets/style.css' />
</head>

<body>
    <h1>
        <%= title %>
    </h1>
</body>

</html>

view는 뭔지는 잘 모르겠는데 아마 브라우저에 주소 치면 뜨는 창 아닐까?

// package.json -> scripts

"start": "env-cmd -f ./.env.local cross-env APP_ENV=local node ./src/app.js"
"dev": "env-cmd -f ./.env.development cross-env APP_ENV=development next dev",

env-cmd 랑 croess-env 설치하고 .env 파일도 만들기

nodemon -> 서버 내용 변경/저장 시 서버 재부팅 없이 반영 바로 해줌