본문 바로가기
study/Spring

MVC 패턴 구조에 대하여 알아보자

by 고기만두(개발자) 2021. 8. 21. 20:17
728x90
반응형

스프링 강의를 듣다 맨 처음 나온 개념 MVC

사실 입문교육 때도 분명 들어보긴 한 것 같은데 그때는 스프링을 배우지도 못했고 그게 언제야 잘 기억도 나지 않고....

 

요즈음의 웹개발에는 크게 3가지 방식이 있다.

1. 정적 컨텐츠 : 맨 처음 HTML 코딩 배울때 글자 찍는 페이지. 서버가 딱히 뭐 하는 거 없고, 그냥 파일째 보여주는 거.

우클릭해서 소스 까보면 그냥 HTML 페이지 그대로. (주석은 다른거 땜에 달아놓은게 그대로 나와버렸..)
출처 - 인프런 <스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술> 강의자료 (무료강의)

스프링 컨테이너에 컨트롤러 없고 그냥 바로 서버가 처리해서 보여줌

 

2. API: JSON 포맷을 활용하여 클라이언트에게 데이터를 전달하는 방식으로, Vue.js, react 같은 게 있다는데.

오늘은 이 얘기 했다가는 옆길로 새버릴 것 같으니 일단 넘어가도록 하자. 나중에 쓸래..

 

3. 오늘 얘기하려고 한 거 MVC

Model + View + Controller 를 나누어 개발하는 방법론이다.

간단한 그림과 코드를 활용하여 살펴보자.

 

1) Model : 무엇을 할 지를 정의.

컨트롤러의 명령을 받아서 비즈니스 로직의 알고리즘, 데이터 처리 등을 담당한다.

데이터베이스와 연결되어 데이터 추가 삭제 같은 일도 할 수 있겠지.

이번 예제의 경우, 이름을 받아 화면에 출력하는 아주 간단한 일을 해보기로 정의한다.

그래서 name을 변수로 받기로 하는 간단한 모델링 완. (평소 배치 짜면서 120개씩 칼럼 달던 데 비해 참 쉽다....)

 

2) View: 화면에 무언가를 보여주는 역할. 웹페이지, 모바일 페이지 등. 우리가 실제로 보는 부분

뼈대를 만드는 HTML, 스타일링해주는 CSS, 동적으로 움직일 수 있게 처리해주는 기능을 갖는 JavaScript 등이 view단에서 많이 쓰이고 있다.

<html xmlns:th="http://www.thymeleaf.org">
	<body>
		<p th:text="'hello ' + ${name}">hello! empty</p>
	</body>
</html>

hello_template.html을 이와 같이 코딩하였다.

name이 들어오면 name을 받아서 hello 옆에 출력할 수 있도록 name을 변수처리 한 게 보이고.

스프링에서 가장 많이 쓰이는 Thymeleaf를 연결했다.

동적 웹 프로그래밍을 가능하게 하는 일종의 뷰 템플릿이다.

 

3) Controller: 무엇을 어떻게 할 지를 정의한다. 요청이 들어오면 모델과 뷰를 연결한다.

@Controller
public class HelloController {
	@GetMapping("hello-mvc")
	public String helloMvc(@RequestParam("name") String name, Model model) {
		model.addAttribute("name", name);
	return "hello-template";
	}
}

이 코드대로라면, name을 입력받아서 hello-template를 호출한다.

출처 - 인프런 <스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술> 강의자료 (무료강의)

소스와 이미지를 함께 보며 이해해보자.

name을 변수로 받은 모델이 있다.

컨트롤러가 이 모델에서 name을 호출한다.

그러면 name에 들어온 값인 spring을 return받는다.

리턴받은 값 spring을 컨트롤러가 viewResolver에 던져주면

viewResolver가 hello-template.html을 알아볼 수 있는 형태로 변환하여 출력한다.

참 쉽죠잉?

728x90
반응형

댓글