[Spring Boot] 00장. 뷰 템플릿과 MVC 패턴

🌱   Mission : MVC 패턴을 활용한, 템플릿 페이지를 만드시오.

🌱   뷰 템플릿의 필요성과 머스테치

• 웹페이지의 변수를 활용하는 뷰 템플릿과 분야별 담당자를 나누는 MVC 패턴
• 사용자 수마다 생성되는 페이지 ? → 화면을 담당하는 기술인 뷰 템플릿을 통해 극복
• 뷰 템플릿 : 웹 페이지를 하나의 틀로 만들고 변수를 삽입해 틀이 되는 페이지가 변수의 값에 따라서 수많은 페이지로 변화 
• 스프링 부트의 머스테치 (Mustache) : 뷰 템플릿을 만드는 도구
• 뷰 템플릿에는 처리 과정을 담당하는 Controller와 데이터를 관리하는 Model가 존재
• MVC 패턴 : 화면, 처리, 데이터를 각 담당자 별로 나누는 기법

MVC 패턴

🌱   뷰 템플릿의 위치

• 프로젝트명 - src - main - resources - templates 에 greeting.mustache 생성

🌱   머스테치 플러그인 설치

• 머스테치 : 뷰 템플릿을 만들어주는 도구, 뷰 템플릿 엔진
• Help - Find Action - plugins 검색 - Marketplace에 mustache 검색 후 Install

🌱   뷰 페이지 작성

• greeting.mustache 생성 (mustache ≒ html)

greeting.mustache

🌱   컨트롤러 만들기

• 프로젝트명 - src - main - java - 기본 패키지 - 'controller' package 생성 -' FirstController' Java Class 생성
• 컨트롤러를 통해 뷰 템플릿 페이지를 반환하도록 작성

1. 컨트롤러 선언 : @Controller
2. 응답 페이지 설정 : return "페이지명"; → 페이지명의 파일을 찾아서 브라우저로 전송
3. URL 요청 연결 : @GetMapping
4. 서버 재시작 : 변경 코드 반영
5. 메인 메소드 실행
6. localhost:8080/hi 접근 
7. 뷰 템플릿 페이지인 greeting.mustache 가 나오게 된 것을 확인 가능

hi 입력 시, controller 코드가 greeting.mustache를 찾아서 반환

FirstController.java

localhost:8080/hi

🌱   페이지에 변수 삽입 + 템플릿 변수를 활용하기 위해 모델을 사용하기

• 여러 가지 변수를 통해 값을 변화시키고 싶음 → mustache 문법 사용

1. {{variable}} : 뷰 페이지에 변수 삽입 → 뷰 페이지가 템플릿화
2. Controller에 Model 받아오기 : 파라미터에 추가
3. Model을 통해 변수 등록 : addAttribute() → model 객체가 홍팍이라는 값을 username에 연결시켜서 보내주는 것
4. 서버 재시작 : 변경 코드 반영

greeting.mustache - 뷰 페이지에 변수 삽입

FirstController.java - Controller에 model 파라미터

localhost:8080/hi

🌱   전체 흐름 요약

Controller의 model 객체가 값을 username에 연결시켜서 보내줌 → greeting.mustache에 변수로 삽입되어 출력

 

참조 사이트

https://youtu.be/Y_gkH0nLMY8