[DAY 2] MVC 패턴 이해와 실습

2.1 뷰 템플릿과 MVC 패턴

뷰 템플릿 : 화면을 담당하는 기술, 웹 페이지(view)를 하나의 틀(Template)로 만들고, 변수를 삽입하여 서로 다른 페이지를 보여줄 수 있게 하는 기술

책에서는 머스테치가 뷰 템플릿을 만드는 도구라고 설명한다. 머스테치와 같은 것을 템플릿 엔진이라고 부른다.

템플릿 엔진 (Template Engine)

지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어. 웹 템플릿 엔진은 View Code(HTML)과 Data Logic Code(DB)를 분리하여 클라이언트에게 웹페이지를 제공한다.

템플릿 엔진은 서버와 클라이언트 2가지로 나눌 수 있다.

(1) 서버 사이드 템플릿 엔진 (Server Side Template Engine)

서버에서 구동하는 템플릿 엔진. 서버에서 DB 혹은 API에서 가져온 데이터를 미리 정의된 템플릿에 넣어 HTML 페이지를 클라이언트에 전달한다. JSP, velocity, Freemark, mustache 등이 있다. 스프링 부트에서는 JSP, Velocity는 권장하지 않고, Thymleaf를 권장하지만 문법이 어렵다. 반면 mustache는 문법이 쉽고, 간단하게 구현할 수 있으며 로직 코드를 사용할 수 없어 View의 역할과 서버의 역할이 명확히 분리된다.

(2) 클라이언트 사이드 템플릿 엔진 (Client Side Template Engine)

클라이언트단에서 사용하는 템플릿 엔진. 동적으로 DOM을 그리는 역할을 함. React.js, Vue.js, Angular 등 사용.

서버와 클라이언트 사이드 템플릿 엔진은 병행 사용하는 경우가 많음.

MVC 패턴 (Model-View-Controller)

디자인 패턴 중 하나. Model, View, Controller 로 구성됨. 잘 사용하면 실행중인 비즈니스 로직을 서로 영향 없이 쉽게 고칠 수 있는 애플리케이션을 만들 수 있음.

MVC 흐름

1.사용자 Request를 controller가 받음
2. controller는 service에서 비즈니스 로직을 처리한 후 결과를 model에 담음
3. model에 저장된 결과를 바탕으로 시각적 요소를 view에게 담아 사용자에게 전달함

Model : 데이터 관리

controller에게 받은 데이터를 조작, 가공하는 역할

1. 사용자가 편집하길 원하는 모든 데이터를 가지고 있어야 한다.
2. view나 controller에 대해서 어떤 정보도 알지 말아야 한다.
3. 변경이 일어나면, 변경 통지에 대한 처리방법을 구현해야만 한다.

 

View : 사용자에게 시각적으로 보여줌 (웹 페이지)

입력값, 체크박스 등 ui요소를 담고 있다. controller에게 받은 model 데이터를 사용자에게 시각적으로 보여주는 역할

1. Model이 가지고 있는 정보를 따로 저장해서느 안된다.
2. Model이나 Controller를 알고 있을 필요가 없다.
3. 변경이 일어나면 변경 통지에 대한 처리방법을 구현해야한다.

Controller : 데이터 흐름 제어

model과 view 사이에서 데이터의 흐름을 제어함. 클라이언트의 요청을 파악하고 적절한 method를 호출하여 service에서 로직을 처리한 후, 결과를 model에 저장하여 view에게 전달하는 역할 수행. Model과 view를 분리하는 요소

1. model이나 view에 대해서 알고 있어야 한다.
2. model이나 view의 변경을 모니터링 해야 한다.

 

부트스트랩이나 레이아웃은 어렵지 않았는데, 첫날에 아무 생각 없이 바탕화면에 프로젝트 폴더를 둬서 폴더 옮기고 깃 연동 시켰더니 또 첫날과 같이 빌드 에러 깃 리모트 에러 온갖 에러 처리하느라 오래 걸렸당,,, 깃 연동은 제때제때 하도록 하자.

 

참고 자료

https://velog.io/@langoustine/%EC%97%AC%EA%B8%B0%EB%8F%84-MVC-%EC%A0%80%EA%B8%B0%EB%8F%84-MVC-MVC-%ED%8C%A8%ED%84%B4%EC%9D%B4-%EB%AD%90%EC%95%BC

여기도 MVC, 저기도 MVC! MVC 패턴이 뭐야?

https://velog.io/@choidongkuen/Spring-MVC-%ED%8C%A8%ED%84%B4%EC%97%90-%EB%8C%80%ED%95%B4-%EC%95%8C%EC%95%84%EB%B4%85%EC%8B%9C%EB%8B%A4

[Spring] 스프링 MVC 패턴에 대해 알아봅시다.