백앤드/Node.js

[포스코x코딩온] 웹개발자 입문 과정 6주차 | MVC

영최 2023. 4. 5. 23:56
728x90

1.MVC란?

 한마디로 소프트 웨어 디자인 패턴이다.

 *디자인 패턴 : 상황에 따라 자주 쓰이는 설계 방법을 정리한 코딩 방법론

 Model View Controller의 약자이다.

 

 가. MVC를 이용한 웹프레임 워크 종류

  MVC를 이용한 웹프레임 워크에는

   - Spring (Java)

   - Django (Python)

   - Express (JavaScript)

   - Ruby on Rails (Ruby)  등이 있다.

 

 나. MVC 장단점

   장점

   - 패턴을 구분해 개발해서 유지보수에 용이하고 유연성 및 확장성이 높으며 

      협업에 용이하다.

   단점

   - 완전한 의존성 분리가 어려우며, 설계 단계가 복잡하고 시간이 오래걸린다.

      또한 클래스(단위)가 많아진다는 단점이 있다.

 

 다. MVC  흐름

   - Model: 데이터를 처리하는 부분

   - View : UI 관련 처리하는 부분 (사용자에게 보여지는 부분)

   - Controller : View와 Model을 연결해주는 부분

   - Router: 경로 설정하는 부분 

 

2.Node.js MVC 구조

 MVC 구조 대로 node.js 프로젝트를 설계해보도록 한다.

 가.폴더 구조 

MVC 폴더 구조

 나.코드 작성

   1)app.js 

    Router를 불러온다.

const express = require("express");
const app = express();
const PORT = 8000;

app.set("view engine", "ejs");
app.use("/views", express.static(__dirname + "/views"));
app.use("/static", express.static(__dirname + "/static"));
app.use(express.urlencoded({ extended: true }));
app.use(express.json());


//1.라우터 불러오는 부분
const indexRouter = require("./routes");
app.use("/", indexRouter);

//2.정의되지 않은 모든 주소는 404.ejs페이지 연결
app.get("*", (req, res) => {
  res.render("404");
});

//3.서버 연결 
app.listen(PORT, () => {
  console.log(`http://localhost:${PORT}`);
});

   2)routes/index.js 

    경로를 controller와 연결해서 사용 가능하다.

//1. 라우터 객체 불러옴
const express = require("express");
const router = express.Router();

//2. controller	불러옴
const controller = require("../controller/Cmain");

//3.라우터와 controller의 함수 연결

router.get("/", controller.main);
router.get("/comments", controller.comments);
router.get("/comment/:id", controller.comment);

//4.indexRouter에 라우터를 반환
module.exports = router;

   3)controller/Cmain.js 

    경로와 연결될 함수 내용을 정의한다.

    경로와 연결되는 함수이기에 req, res 객체를 사용한다.

    comment 함수 사용시 '/comment/:id' 주소로 호출하므로 req.query.id가 아니라

    req.params.id로 값을 받는다.

//1.model 내 데이터 불러옴
const Comment = require("../model/Comment");

//2.함수 정의 및 exports

//2-1.main
exports.main = (req, res) => {
  res.render("index");
};

//2-2.comments
exports.comments = (req, res) => {
  console.log(Comment.getComments());
  res.render("comments", { commentInfos: Comment.getComments() });
};

//2-3.comment
exports.comment = (req, res) => {
  const commentId = req.params.id; // 댓글 id: url로 들어온 매개변수
  const comments = Comment.getComments();
  // :id 변수에 숫자가 아닌 값이 온다면 404 페이지
  if (isNaN(commentId)) {
    return res.render("404");
  }
  // 존재하지 않는 댓글 id 접근시 404 페이지
  if (commentId < 1 || commentId > comments.length) {
    return res.render("404");
  }
  res.render("comment", { commentInfo: comments[commentId - 1] });
};

   4)model/Comment.js(DB sql 연결X 임시)

    mysql과 연동 하지 않아서 임시로 직접 데이터를 입력해서 return 한다.

exports.getComments = () => {
  return [
    {
      id: 1,
      userid: "helloworld",
      date: "2022-10-31",
      comment: "안녕하세요^~^",
    },
    {
      id: 2,
      userid: "happy",
      date: "2022-11-01",
      comment: "반가워유",
    },
    {
      id: 3,
      userid: "lucky",
      date: "2022-11-02",
      comment: "오 신기하군",
    },
    {
      id: 4,
      userid: "bestpart",
      date: "2022-11-02",
      comment: "첫 댓글입니당ㅎㅎ",
    },
  ];
};

 

   5)views/ XXXX.ejs 

index.ejs

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>메인페이지</title>
  </head>
  <body>
    <h1>여기는 홈</h1>
    <a href="/comments">댓글 목록 보기</a>
    <a href="/user">회원 보기</a>
  </body>
</html>

comments.ejs

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>댓글 목록 보기</title>
  </head>
  <body>
    <h1>댓글 모음</h1>
    <a href="/">홈으로 이동하기</a>

    <ul>
      <% for (let i = 0; i < commentInfos.length; i++) { %>
      <li>
        <b><%= commentInfos[i].userid %></b> -
        <a href="/comment/<%= i + 1 %>"><%= commentInfos[i].comment %></a>
        <!-- 배열의 0번째 요소라면 commentInfos 요소의 id는 1이다. -->
      </li>
      <% } %>
    </ul>
  </body>
</html>

comment.ejs

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>댓글 자세히 보기</title>
  </head>
  <body>
    <h1><%= commentInfo.userid %>님의 댓글입니다.</h1>
    <a href="/comments">댓글 목록 보기</a>

    <p>작성일: <%= commentInfo.date %></p>
    <p>댓글 내용: <%= commentInfo.comment %></p>
  </body>
</html>

404.ejs

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>404 Error</title>
  </head>
  <body>
    <h1>🚨404 Error</h1>
    <p>죄송합니다. 해당 URL은 접근할 수 없는 주소입니다.</p>
    <a href="/">HOME</a>
  </body>
</html>

 

 

728x90
저작자표시 비영리 변경금지

'백앤드 > Node.js' 카테고리의 다른 글

[포스코x코딩온] 웹개발자 입문 과정 6주차 | MVC MySQL 연동  (0) 2023.04.08
[포스코x코딩온] 웹개발자 입문 과정 6주차 | MVC 실습 - 여러 유저 정보 선언 후 로그인 성공 여부 판단하기  (0) 2023.04.06
[포스코x코딩온] 웹개발자 입문 과정 5주차 | 파일 업로드  (0) 2023.04.03
[포스코x코딩온] 웹개발자 입문 과정 5주차 | 비동기 HTTP 통신 종류 (ajax, axios, fetch)  (0) 2023.04.01
[포스코x코딩온] 웹개발자 입문 과정 5주차 | form 전송(get/post)  (0) 2023.03.31

'백앤드/Node.js'의 다른글

  • 현재글[포스코x코딩온] 웹개발자 입문 과정 6주차 | MVC

관련글

티스토리툴바