👨🏫 View Templates과 MVC 패턴이란 ?
View Templates이란 화면을 담당하는 기술이다. 웹 페이지를 하나의 틀로 만들고 변수를 삽입하게 한다. 즉, 틀이 되는 페이지가 변수의 값에 따라서 수많은 페이지로 바뀔 수 있다. 예를 들어, 아래의 그림을 봐보자.
빨간 박스가 변수이다. 수많은 사용자들의 정보는 각각 다르기 때문에 사용자마다 페이지를 만든다는 건 매우 힘든 일이다. 따라서 View Templates을 이용해 변수를 바꾸어 여러 사용자에 따른 페이지들을 제공할 수 있다. Spring Boot에서 가져온 도구 중 Mustache가 바로 View Templates을 만드는 도구이다.
View Templates에는 Controller와 Model이라는 두 동료가 있다. Controller는 logic을 담당하고, Model은 data 관리를 담당한다. 이렇게 화면, logic, data 관리를 각 담당자 별로 나누는 기법을 MVC 패턴이라고 한다.
👨💻 MVC 패턴을 활용한 뷰 템플릿 페이지 만들기
1. mustache 파일 생성하기
먼저 Intellij를 실행시켜 저번 시간에 만든 project1을 오픈하자.
우리가 이번에 만들 뷰 템플릿 페이지는 project1 -> src -> main -> resources 밑에 templates라는 디렉토리에서 만들 것이다. templates을 우클릭하여 NEW -> File을 눌러 확장자가 mustache인 "greetings.mustache" 파일을 생성시키자.
이때 mustache 파일을 찾을 수 없다고 뜬다면 mustache plugin을 설치한다.
상단에 Help -> Find Action을 누르면 위와 같은 창이 뜨는데, 여기에 plugins를 검색하여 클릭한다.
Marketplace로 이동 후 mustache를 검색하여 Handlebars/Mustache를 설치한다.
이제 에러없이 정상적으로 파일이 만들어진 것을 확인할 수 있다.
2. 뷰 템플릿 페이지 작성하기
이제 뷰 템플릿 페이지를 작성해보자.
위와 같이 간단하게 코드를 작성한다. 참고로, doc + Tab을 하면 기본 HTML 코드가 나타난다.
3. 컨트롤러 만들기
이제 뷰 템플릿 페이지를 보기 위해 컨트롤러를 만들어보도록 한다.
먼저 project1 -> src -> main -> java 밑에 com.eample.project1이라는 디폴트 페이지에 "com.example.project1.controller"이라는 Package를 만들어준다.
controller에 "FirstController"이라는 Java Class를 생성한다.
(이때 Java Class명은 "~~Controller" 라고 짓는 게 관례이다.)
이제 컨트롤러라는 동료를 통해 앞에서 만든 greetings.mustache 페이지를 볼 수 있게 연결시켜주는 코드를 작성해보도록 한다.
- 컨트롤러를 선언한다.
- 뷰 템플릿 페이지(greetings.mustache), 즉 보여줄 페이지를 반환하는 메소드를 선언한다. 이때 응답 페이지를 설정할 땐
return "페이지명";이라고 적어준다. - URL 요청 연결을 한다. 이때 GetMapping 안에 접속할 URL 주소를 적어준다.
예를 들어 GetMapping("/hi")라고 적어주면, 사용자가 localhost:8080/hi에 접속했을 때 컨트롤러는 greetings.mustache를 반환해준다.
sever를 실행하기 위해 project1Application 안의 메인 메소드를 실행하고, http://localhost:8080/hi 에 접속하여 잘 동작하는지 확인한다.
✔ 만약 한글 깨짐이 발생한다면 인텔리제이 한글 깨짐을 참고한다. 그래도 안된다면 build.gradle에서 id 'org.springframework.boot' version '2.7.x' 부분을 id 'org.springframework.boot' version '2.6.8'로 변경한 다음 우측에 있는 코끼리 모양 아이콘을 누르면 해결된다.
✔ 변경된 코드를 반영하기 위해선 server을 재시작해야한다는 사실을 잊지말자. 나중에 재시작을 하지않고도 빠르게 확인하는 방법을 배울 것이다.
4. Model 사용하기
이쯤이면 "템플릿인데 HTML과 다른 점이 뭐지?" 라는 의문이 들 것이다. 이제부터 또다른 동료인 Model을 가지고 템플릿을 활용하는 방법에 대해 알아볼 것이다.
우리는 "지은님, 반갑습니다!"에서 "지은"을 여러가지 값으로 변환시키고 싶다. 즉, "지은" 자리를 변수로 설정하여 원하는 값으로 바뀔 수 있게끔 하려고 한다. 이때 우리는 아래의 뷰 페이지에 변수를 삽입하는 mustache 문법을 사용한다.
{{변수명(variable)}}
뷰 페이지에 변수를 적용한다.
이제 변수를 사용하기 위해 model을 활용해보자. model은 컨트롤러(FirstController)에서 작성한 메소드 niceToMeetYou에 파라미터로 받아온다.
model을 파라미터로 추가하면 다음과 같이 오류가 뜨는데 이때 "클래스 가져오기"를 눌러 org.springframework.ui.Model를 import해준다. (누르기만 해도 자동으로 import될 것이다.)
model을 통해 addAttribute() 메소드로 변수를 등록한다. "지은2"(value)라는 이름을 username(key)에 연결시켜 model이 템플릿에게 보내준다.
변수의 값에 따라 결과가 다르게 나오는 것을 확인할 수 있다.
참고: Youtube 홍팍 스프링 부트 입문 04
