View 템플릿
보통 사이트에 로그인을 하면, "{닉네임}님, 반갑습니다!" 라는 문구가 출력된다.
사람 수에 따라서 웹 페이지가 만들어져 있는 걸까?
View 템플릿을 사용하면 하나의 페이지에서 변수값에 따라 다른 문구가 출력되도록 할 수 있다.
이전 포스팅에서 스프링부트 프로젝트 생성 시 추가했던 Mustache가 이런 View 템플릿을 만드는 도구이다.
MVC 패턴
이렇게 화면을 담당하는 View 템플릿에게는 Controller와 Model 이라는 두 동료가 있다.
Controller는 처리 과정를 담당하고, Model은 데이터를 담당한다.
이렇게 화면, 처리, 데이터 분야를 담당자별로 나누는 기법이 MVC 패턴이다.
프로젝트 실습
View 템플릿 만들기
이전 포스팅 [Spring Boot] Mac 스프링부트 시작하기를 참고해서 프로젝트를 생성하거나, 이전에 만들었다면 해당 프로젝트를 intelliJ에서 열어준다.
그리고 인텔리제이 상단 왼쪽에 있는 intelliJ IDEA 의 Preferences ... 클릭 > 플러그인 > Mustache 검색해서 위 이미지와 같은 플러그인 설치 후 적용 > 확인을 클릭해준다.
이후 프로젝트의 src > resources > template 경로에서 hello.mustach 파일을 생성한다.
그리고 doc 라는 세글자를 입력 후 키보드에서 tab 버트늘 누르면 html 기본 태그가 작성된다.
body 태그안에 이미지처럼 "ㅇㅇ님 반갑습니다." 문구를 적어준다.
그런데 사용자에 따라서 다른 문구가 출력되기를 원한다면, mustache 문법을 사용해 사용자의 닉네임을 변수값으로 받으면 된다. 아래 이미지처럼 mustache 파일 안, 내가 원하는 부분에 {{}} 를 만들고 그 안에 username이라는 임의의 변수를 적으면 View 페이지가 템플릿화 된 것이다.
Controller 만들기
src > main > java > com.example.프로젝트명 경로에 controller 라는 패키지를 생성한다.
controller 패키지 생성 후 해당 패키지 안에 FirstController라는 이름의 자바 클래스 파일을 생성한다.
컨트롤러의 이름은 ~~Controller라고 짓는 것이 관례이다.
파일이 생성되었다면 @Controller 어노테이션을 사용해 컨트롤러 선언을 한다.
그러면 위와 같이 자동으로 Controller가 import 된다. 이후 String을 반환하는 메소드를 생성한 뒤, 위에서 만들었던 view 템플릿 hello.mustache 파일명을 return 값에 적어주면 template 폴더 안의 hello.mustache 파일을 찾아 브라우저로 전송해주는 역할을 한다.
그리고 해당 메소드 위에 @GetMapping() 어노테이션을 추가한다. () 안에는 해당 메소드가 작동할 url 이름을 설정해준다. 이후 자동으로 import GetMapping 이 생기는 것을 확인할 수 있다.
Model 만들기
view 템플릿 hello.mustache에서 지정한 username이라는 변수를 읽기 위해서 Controller 메소드에서 Model 타입의 매개변수를 받아오도록 지정한다. 이 과정에서 Model 을 받아오지 못해 오류가 발생한다면 org.springframework.ui.Model; 을 import 해준다.
그리고 이미지와 같이 addAtribute() 메소드를 사용해서 username 변수를 등록하고 , 로 구분 후 username 이 가질 값을 넣어준다.
서버 재시작 후 localhost:8080/greetings 로 접속하면 위에서 만들었던 hello.mustache 파일이 설정한 username 값대로 반영되어 반환되는 것을 확인할 수 있다.
