2.2.1 MVC 란 ?
MVC 는 Model View Controller 를 의미한다.
과거에는 View와 Controller가 통합되어 있어, View에서 모두 접근하였지만 (Model1 방식),
View 파일이 너무 거대해진다는 단점이 있다.
따라서 다음과 같이 작업을 나누어 수행하도록 하였다.
- View : 화면에 관련된 작업만 수행
- Controller / Model : 내부적인 것을 처리하거나, 비즈니스 모델 관련 작업 수행
최근에는 이러한 MVC 컨셉을 주로 사용한다.
섹션 2.1 의 정적 컨텐츠에서는 서버에서의 변형이 불가능했지만,
MVC 와 템플릿 엔진을 사용하면, html을 동적으로 바꿀 수 있다.
2.2.2 HelloController.java 작성하기
앞서 섹션 1.3에서 작성한 HelloController파일의 HelloController 클래스에 다음의 코드를 작성하였다.
( hello.hellospring > hello.hellospring.controller 패키지 > HelloController.java)
@GetMapping("hello-mvc")
public String helloMvc(@RequestParam("name") String name, Model model){
model.addAttribute("name", name);
return "hello-template";
}
코드에 대해 하나씩 자세히 살펴보자.
@GetMapping("hello-mvc")
http://localhost:8080/hello-mvc 를 통해 접속할 수 있다.
@RequestParam("name") String name, Model model
- @RequestParam 을 통해 파라미터를 받을 수 있다.
- key 값은 "name" 이 된다.
- Model 에 담으면, 외부에서 렌더링할 때 사용된다.
return "hello-template"
리턴 값에 해당하는 html 파일로 넘어간다.
즉, hello-template.html 로 넘어가게 된다.
2.2.3 hello-template.html 작성하기
templates 폴더에 hello-template.html 을 생성하고 다음과 같이 작성하였다.
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<p th:text="'hello ' + ${name}" >hello! empty</p>
</body>
</html>
코드를 하나씩 살펴보자.
<html xmlns : th = "http://www.thymeleaf.org">
thymeleaf 를 사용하여, html을 변경할 수 있도록 한다.
${name}
${name} 는 앞서 파라미터를 통해 전달받은 name key의 value 값으로 치환된다.
예를들어, name 값을 spring 으로 주면
Controller 의 name 이 spring 으로 변한 되고, model 에 담긴다.
이후, html 파일은 model 의 key = name 인 값을 찾고 치환한다.
hello! empty
템플릿 엔진으로 동작하면, hello + ${name} 의 값이 치환되어 화면에 표시되는데,
hello! empty 는 어떤 기능을 수행할까?
thymeleaf 템플릿의 장점은 파일의 path를 복사한 후, 경로를 열면
서버 없이 html 파일을 열어 볼 수 있다는 것이다.
따라서 서버 없이 html 을 확인할 때 필요한 내용을 사이에 적어 넣을 수 있다.
실제로 경로를 복사한 후, 경로를 열면 다음과 같은 화면을 볼 수 있다.
2.2.4 파라미터 값 전달받기
단순히 http://localhost:8080/hello-mvc 로 접속하면 다음과 같은 에러 화면이 나타난다.
IntelliJ 의 경고 메시지를 확인하면,
Required request parameter 'name' for method parameter type String is not present
라고 뜨는 것을 확인 할 수 있다.
이는 앞서 작성한 @RequestParam 의 required 의 디폴트가 true 이지만,
파라미터 값을 넘기지 않아 생기는 오류이다.
따라서, http://localhost:8080/hello-mvc?name=spring! 과 같이
? name = (넣을 값) 을 덧붙여 접속해야 한다.
정적 컨텐츠에서는 변환 없이, 단순히 html 파일을 표시하는 것 과는 달리,
thymeleaf 템플릿 엔진에 의해 값이 동적으로 변환되어 넘어가는 것을 볼 수 있다.
실제 페이지 소스를 확인해보면, 값이 변환되었음을 알 수 있다.
<!DOCTYPE HTML>
<html>
<body>
<p >hello spring!</p>
</body>
</html>
2.2.5 MVC와 템플릿 엔진 동작 원리
1) 웹 브라우저에서 localhost:8080/hello-mvc?name=spring! 에 접속
2) 톰캣 내장 서버가 요청을 받음
3) Spring 에게 넘어가고, Controller 에 mapping 되어 있음을 확인
4) model 과 return 값을 확인
- model -> name : spring! 이 담겨져 있음.
- return -> hello-template.html
5) ViewResolver 는 View 를 찾고, thymeleaf 템플릿 엔진을 연결
6) ViewResolver 는 templates/hello-template.html 을 찾고,
템플릿 엔진이 값을 변환한 html 을 웹 브라우저에 넘김
김영한 '스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술' 강의를 기반으로 작성하였습니다.
'SPRING 입문 [ 코드로 배우는 스프링 부트 ]' 카테고리의 다른 글
| [스프링 입문] 섹션 3.1 회원 관리 예제 (비즈니스 요구사항 정리) (0) | 2023.01.09 |
|---|---|
| [스프링 입문] 섹션 2.3 스프링 웹 개발 기초 (API) (0) | 2023.01.09 |
| [스프링 입문] 섹션 2.1 스프링 웹 개발 기초 (정적 컨텐츠) (0) | 2023.01.07 |
| [스프링 입문] 섹션 1.4 프로젝트 환경설정 (빌드하고 실행하기) (0) | 2023.01.07 |
| [스프링 입문] 섹션 1.3 프로젝트 환경설정 (View 환경설정) (0) | 2023.01.07 |