[새싹 x 코딩온] 웹 풀스택 영등포 5기 6주차 회고 - 2

📌 MVC

• Model View Controller
• 소프트웨어 설계와 관련된 디자인 패턴

디자인 패턴

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

• MVC 이용 웹 프레임워크
  • PHP
  • Django
  • Express
  • Angular 등등

📣 장단점

🟠 장점

• 패턴들을 구분해 개발
• 유지보수 용이
• 유연성 & 확장성이 높음
• 현업에 용이

🟠 단점

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

📣 MVC 흐름

• Model : 데이터를 처리하는 부분
  • 데이터 베이스에서 데이터를 가지고 와 controller에게 던져줌 (view와 연결 X)
• View : UI와 관련된 것을 처리하는 부분(사용자에게 보여지는 부분)
  • controller에게 받은 값을 처리하여 browser에 보여지도록 함
• Controller : View와 Model을 연결해주는 부분

📌 Node.js MVC 구조

• 기존의 MVC 흐름에 routes(경로 설정) 부분 추가
  

📣 app.js

const indexRouter = require('./routes'); // index는 생략가능!
app.use('/', indexRouter); // localhost:PORT/ 경로를 기본으로 
// ./routes/index.js 파일에 선언한 대로 동작!

• Router 불러오는 부분
• 해당 코드에서 특정 시작 url의 역할 구분이 가능함

📣 routes/index.js

• 경로를 controller와 연결해 설정 가능

const controller = require('../controller/Cmain.js');
...
// localhost:PORT/
router.get('/', controller.main); // GET /
router.get('/comments', controller.comments); // GET /comments

module exports = router;

404 Error 🚨

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

404 Error 라우팅 🚨

• 맨 마지막 라우트로 선언
• • : 그 외 나머지 주소는 모두(all) 잘못된 요청임을 사용자에게 알려야 함
• 클라이언트가 올바르지 않은 주소로 요청 시 Error 페이지 렌더링

📣 controller/Cmain.js

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

exports.comments = (res, req) => {
  res.render('comments');
};

• 경로와 연결될 함수 내용을 정의
• 경로와 연결되는 함수이기에 req 객체와 res 객체를 사용 가능

📣 model/Comment.js

exports.commentInfos = () => {
  return [
    {
      id: 1,
      userId: 'helloworld',
      date: '2022-10-11',
      comment: '안녕!',
    },
    {
      id: 2,
      userId: 'world',
      date: '2022-11-11',
      comment: '안녕~~!',
    },
  ];
};

• DB에서 댓글 목록 데이터를 가져왔음을 가정
  • 댓글 목록은 배열로 가져옴
  • 각 댓글은 객체로 저장됨

📣 Controller - model

• 컨트롤러와 모델 연결

const Comment = require('..model/Comment');

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

exports.comments = (req, res) => {
	console.log(Comment.commentInfos());
  	res.render('comments', { commentInfos: Comment.commentInfos() });
};

리팩토링(Refactoring)

• (결과의 변경 없이) 코드를 재정비하는 것
• 장점
  • 가독성 향상
  • 유지보수성 향상
  • 버그 수정, 기능 추가 X
  • 로직(논리)개선