2-2. MVC와 템플릿 엔진

이번에는 두 번째 스프링 웹 개발 방법인 MVC와 템플릿 엔진 사용에 대해 살펴보았다.

 

MVC는 Model, View, Controller의 약자이다.

 

Model은 데이터관리를 위한 모델(데이터베이스 수업시간에 배운 것)

View는 화면에 무엇이 어떻게 보일 것이냐에 집중하는 부분,

Controller는 데이터의 움직임 등 웹사이트 내부에서 어떤 일이 일어날 것인지를 관리하는 부분이라고 이해했다.

 

 

 

Resolver? Converter?

 

Resolver와 Converter라는 이름에 익숙해져야 할 듯하다!

스프링 프로젝트 내부에 있는 여러 구성요소를 뒤져서, 그 중 어떤 놈을 선택하여 결과물에 반영할지 정하고 나면

그놈을 가지고 결과물을 빚어내는 역할을 하는 것이 이 Resolver와 Converter인 것 같다.

MVC와 템플릿 엔진으로 개발할 때에는 viewResolver가 일을 하고, 

API로 개발할 때에는 세부사항에 따라 JsonConverter(객체를 다룸) 혹은 StringConverter(문자열을 다룸)가 일을 한다.

Resolver와 Converter들은 모두 라이브러리에 들어있는데, 각자 구체적으로 이름이 무엇인지 강의자료에 나와있으나 지금은 외우려 해봐야 소용없으니 일단 이런 것이 있다는 사실만 기억하고 넘어가야겠다. 다음에 관련된 내용을 자세히 다룰 때 다시 설명해주신다고 했다.

 

 

 

 

강사님의 옛날 썰

강사님께서 뷰와 컨트롤러가 쪼개지기 전의 상황에 대하여 썰을 풀어주셨다.

 

10여 년 전에 일하셨던 회사에서 프로젝트 코드의 유지보수를 딱 한 명이 도맡아서 하길래 궁금해서 엿보았더니, 수천 줄이 넘는 하나의 뷰 코드를 사용하기 때문에 그 코드를 잘 알고 있는 그 사람이 아니면 유지보수를 할 수 없는 상황이었다고 한다. 웹에서 필요한 모든 분야의 작업이 뷰 하나에 몰려있어서 그랬다고 한다.

지금은 세분화가 잘 되어서 훨씬 편하고 분업도 편리하다는 것이다.

 

 

 

여기까지 이야기하고 다음으로는 MVC와 템플릿 엔진을 사용하는 간단한 실습을 진행했다.

 

 

 

Controller 코드 작성

 

먼저 컨트롤러를 만들어준다.

MVC를 사용한 웹 개발에서는 무조건 컨트롤러를 먼저 만들어주는 것 같다!

 

 

저번에 hello 함수를 만들었던 코드파일 내에, mvcEx라는 함수를 하나 추가했다.

강사님의 강의자료를 참고하여 작성했다.

URL에 "MVC-ex"의 경로가 붙었을 때 요청된다.

그런데 함수의 매개변수 중에, 처음 보는

@RequestParam()이라는 표현이 있다.

이것은 웹 브라우저 상에서 name이라는 이름의 매개변수를 얻어오겠다는 것이다.

장고를 배울 때 보았던

www.exampleurl.com?name=Jake&age=1000

이렇게 GET 요청 시 데이터 전달을 위해 ? 이하에 붙어 &로 구별되는 것들도 여기서 말하는 브라우저 상에서 전달되는 변수이다.

그리고 @RequestParam("name") 뒤에 String name이 붙었으므로 요청시 전달된 name이라는 변수는 문자열의 형태로 함수 내에서 name이라는 이름으로 사용될 것임을 알 수있다.

 

그러므로 이 @RequestParam("name")이 포함된 컨트롤러를 사용하려고 요청을 보낼 때에는 꼭! name이라는 이름의 문자열 데이터를 제공해주어야 한다!

 

RequestParam을 import해주는 것도 잊지 말자!

 

 

 

 

View 코드 작성

 

그 다음에는 View 역할을 해줄 html 코드를 써준다. 여기서 저번처럼 템플릿 엔진인 Thymeleaf가 쓰인다.

 

저번에 hello 함수와 연결되는 hello.html을 만들었던 template 레포지토리에 이번에도 html 파일을 만들어준다.

mvcEx 함수와 연결되도록 mvcEx 함수의 리턴값과 일치하게 mvcEx.html이라는 이름으로 만든다.

 

내용은 강의자료에서 복붙했다.

 

전달된  name 값이 "hello " 뒤에 붙어 출력되도록 하였다.

 

여기서 강사님이 자투리 지식을 또 하나 알려주셨다.

p 태그의 내용으로 들어간 hello! empty는 어차피 text로 대체되어 사용자에겐 절대 보여지지 않을 텐데 왜 써놓은 건지 의문이 들었었다. 그런데 강사님이 기가 막히게 딱 그 이유를 알려주셨다.

사용자가 경험할 일반적인 경로로 이 파일을 열어보는 것이 아니라, html 관리 목적 등으로 파일의 raw한 내용을 까서 브라우저 상에서 볼 때 이 내용이 뜬다고 한다. 그 때는 text를 이룰 name 파라미터가 전달되지 못하는 상황이므로 우리가 적어준 hello! empty가 일종의 default 값의 역할을 해준다는 것이다.

내 PC 상에서 이 html 파일이 위치한 디렉토리 주소를 복붙하여 브라우저 주소창에 넣으면 hello! empty가 뜨는 것을 확인할 수 있다!

 

 

 

 

실행해보기

 

이제 Run 중인 프로세스를 멈췄다가 다시 실행해주고 사이트에 접속해본다.

 

localhost:8080/MVC-ex로 접속하면 되는데, @RequestParam("name")이 있으므로 꼭 URL 뒤에 ?name=(이름 값)을 붙여 주어야 한다!

 

name의 값으로 "Conan"을 전달한 결과이다.