[SeSSAC] 웹 풀스택 영등포 5기 과정_MVC 패턴

다소 쉬웠던 sql과정을 지내고 mvc 패턴에 대해 배우는 시간이었습니다.

파일과 파일들을 왔다갔다해서 한눈에 가닥이 잡히지 않고 헷갈렸던 시간이었습니다

익숙해지고 개념이 확실해지면 괜찮으리라 믿으며,,

 

0. MVC 패턴이란?

Model View Controller

정보처리기사를 준비할 때 보았던 디자인 패턴 중 하나였습니다. 

그냥 이론적인 것인 줄만 알았는데, 이렇게 실제로 구현을 하니 신기했습니다.

 

하기 그림을 통해 MVC 흐름을 이해하도록 하겠습니다.

MVC 흐름

이 MVC 흐름 구조도가 아주 중요했습니다. 각각의 역할은 아래와 같습니다.

Model :  데이터를 처리하는 부분
View :  UI 관련된 것을 처리하는 부분
Controller :  View와 Model을 연결해주는 부분 ( 중개자 역할 수행 )

 

여기서 DB는 알겠는데, Router는 직접 생성해보아도 이해가 가지 않아 정리하였습니다.

Router :  사용자 요청 url을 해석하고 그에 따라 컨트롤러가 어떻게 실행되어야하는지 알려줌

---

1. app.js의 변화

저희는 여지껏 수업시간에서 하기와 같은 코드를 작성하였습니다.

그러니까, get이나 post로 render해서 사용자 url을 관리하였던 것이죠.

이 외에 다른 url이 있다면 쭈르륵 적어주는 형태여서, app.js파일이 아주 길었습니다.

그러나 router를 쓰고 나선, app.js는 정말 간단해졌습니다.

이게 끝이에요. (물론 이 밑에 예외처리를 위한 에러 페이지가 있긴 함)

 

먼저 require은 모듈을 가져오는 함수인데, 어떤 모듈을 가져오느냐?

routes 폴더에 있는 index파일을 가져와서 indexRouter라는 변수에 넣을 겁니다.

 

그리고 use 메서드는 미들웨어의 요청과 응답 사이에서 동하는 함수로, 

앞선 app.use('/', indexRouter)는 루트경로의 요청이 들어오면

indexRouter라는 미들웨어를 실행하라는 의미입니다.

---

2. router

그럼 routes파일에 가서 router가 어떤 역할을 하는 모듈을 생성하고 넣었는지 살펴봅시다 :)

이 routes디렉토리 내의 index 파일은 경로 선언과 관련된 내용을 기술하고 있습니다.

하기 예제를 봅시다!

먼저, 라우팅을 구현하려면 express모듈을 선언해야합니다. 

이 express모듈을 선언해서 안에 있는 Router() 매서드로 새로운 라우터 객체를 생성하여

router 변수에 넣어준 상태입니다.

 

이 router 변수는 현재 '라우터 객체'인 상태로 미들웨어와 같은 역할을 수행하며,

특정 경로로 들어오는 요청을 처리하는데 사용됩니다.

저희가 앞서서 app.get()이나 app.post()같은 메서드로 url에 대한 정적 또는 동적처리를 진행했잖아요?

똑같은 처리를 해주는 객체라고 보시면 됩니다.

 

router 변수 => 그냥 단순하게 경로와 뒤에오는 콜백함수를 연결해주는 아이입니다.

 

여기서 아까 맨 처음 그림에 보았듯이, router와 연결된 "controller"가 등장하게 됩니다.

앞선 내용은 controller가 제외된 router에 집중한 버전이고,

하기 코드가 controller가 포함된 버전입니다.

---

3. controller

컨트롤러는 실행흐름에서 보았듯이, 뷰와 라우터, 모델 사이에 있는 아이입니다.

삼다리를 걸쳐서 날 힘들게해,,,,

 

먼저, 라우터에 있는 컨트롤러 먼저 보도록 하겠습니다.

 여기서 controller라는 변수에 require를 이용해서 Cmain파일의 모듈을 담았어요.

 

그래서 라우터를 이용해서 get으로 url요청 처리를 진행해줄 건데,

아까 router만 있던 코드와 달리 url요청에 대한 콜백함수에 controller모듈이 들어가게 됩니다.

 

'/'루트 경로에는 controller모듈의 main 함수가, '/comments' 경로에는 controller모듈의 comments함수가,

'/comment/:id'에는 controller모듈의 comment함수가 들어가서 요청에 대한 처리를 진행합니다.

 

하기는 controller의 Cmain파일의 코드입니다.

이게 바로 controller의 내부입니다.

 

먼저 가장 처음에 Comment 변수에 model 디렉토리에 있는 Comments파일의 모듈을 가져와서 담고 있습니다.

---

 

사실 현재 sql의 연결을 배우지 않은 터라

model의 Comments파일은 현재 간단한 data를 getCommentAll()이라는 함수의 반환값으로 내보내고 있습니다.

model디렉토리의 Comments파일 내부

이 내보낸 getCommentAll()함수의 반환값을 모듈로 Comment변수에 담아서 활용하고 있습니다.

 

아까  router 파일에서 각각의 경로 처리에 필요했던

콜백 함수들 (main, comments, comment)가 controller에 정의되어있습니다.

(export.함수 - 이 형태는 정의와 동시에 내보내기 하는 것입니다.)

 

여기서 드디어 사용자 url경로에 따른 어떤 페이지를 내보낼 것인지 render를 통해 이어주게 됩니다.

 

콜백함수에 따른 ejs를 render해줄때 model에 있는 data도 같이 보내주어 view에서 활용하고 있는 점이

controller가 view와 Model을 이어주는 지점이라고 하는 이유인 것 같습니다!

---

 

이렇게 놓고 봐도 아직 조금 복잡한 감이 있습니다....

그래서 제가 적으면서 정리를 했는데,,,,

ㅋㅎ,,,,그냥 그렇다구요,,,,