[포스코x코딩온] Node.js MVC 구조

💡MVC 구조 어디선가 들어본 것 같은데 배운 적은 없는 구조

혼자서 코드를 짜는 게 아니라 협업에 있어서 도움이 되는 백엔드 구조 방식에 대해 배웠다. 글을 다시 보니까 오타도 보이고, 수정할 부분이 많이 보인다. 이제는 이론보다는 코드의 구조적인 면을 더 깊게 파악해야되서 글로 정의하기가 어렵다.

 

그냥 어렵다.

더 많은 시도가 구조를 파악하는데 도움이 될거라 생각한다. 

 

MVC (Model View Controller)

소프트웨어 설계(데이터 및 논리 제어), UI를 구현하는데 사용되는 디자인 패턴이다.

=> 상황에 따라 자주 쓰이는 설계 방법을 정리한 코딩 방법론

mvc 이용 웹 프레임 워크 : spring(java), django(python), express(javascript), ruby on rails(ruby) 등등

 

장점

• 패턴들을 구분해서 개발
• 유지보수 용이(잘 나눠져 있으니까!)
• 유연성 높음
• 확장성 높음(기능별로 쪼개져 있으니까)
• 협업 용이

 

단점 

• 완벽한 의존성 분리 어려움
• 설계 단계 복잡
• 설계시간 오래걸림
• 클래스(단위)가 많음

 

MVC 흐름

: Client  >  Browser (ex.크롬, 엣지)  > url에 주소를 입력하면 그게 Router >  주소에 대한 대응을 Controller  > Controller 는 필요한 데이터를 모델에서 가져옴 , 모델 (데이터와 직접적으로 처리) =DB > view 를 보여줄 준비가 되면 마지막 렌더  > 다시 Browser 

Model : 데이터 처리 부분

view :  ui 관련된 것 처리, 사용자에게 보여지는 부분

controller : view 와 model을 연결해주는 부분

 

Node.js MVC 구조

• controller : view와 model 연결 부분
  • Cmain.js
• model : data
  • Comments.js
• node_modules
• routes
  • index.js
• views
  • index.ejs
• .gitignore
• app.js
• package-lock.json
• package.json

 

app.js

const indexRouter = require("./routes");  //index는 생략 가능!
//require : 폴더까지만 접근할 경우엔, 자동으로 index.js 파일을 찾아감.
app.use("/", indexRouter);

- router 불러오는 부분으로 특정 시작 url의 역할 구분 가능

 

routes.index.js

const controller = require("../controller/Cmain");

const router = express.Router(); //객체 router로 라우터 생성

router.get("/", controller.main); // GET /
router.get("/comments", controller.comments); // GET / comments

- 경로를  controller와 연결

 

404 Error

: 클라이언트가 잘못된 주소로 접속했을 때 발생하는 Error!

// [404 error]
app.get("*", (req, res) => {
  // res.send('404 Error! 잘못된 주소 형식입니다.');
  res.render("404");
});

* : 코드 맨 마지막에 선언

 

Controller/Cmain.js

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

- 경로와 연결될 함수 내용 정의

- 경로와 연결되는 함수이기에 req 객체와 res 객체 사용 가능

 

Controller-model

const Comment = require("../model/Comment");
//컨트롤러와 모델 연결
exports.comments = (req, res) => {
  console.log(Comment.getComments()); //댓글 목록이 [{},{},{},{}] 형태
  res.render("comments", { commentInfos: Comment.getComments() });
};

 

model/Comments.js

//데이터베이스 선택
exports.getComments = () => {
  //sql문 만들고
  //sql문을 실행 시키는 코드들
  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: "첫 댓글입니당ㅎㅎ",
    },
  ];
};

아직 mysql과 연결하지않아서 임시적으로 DB에서 데이터 목록을 만들었다.

댓글 목록은 배열로, 배열 안 각 댓글은 객체로 저장되어 있다.