화면을 담당하는 기술로, 웹 페이지를 하나의 틀로 만들고 여기에 변수를 삽입해 서로 다른 페이지로 보여줌으로서, 사용자마다 화면을 만들어야하는 번거로움을 줄여준다.
MVC 패턴
MVC 패턴은 Model, View, Controller 로 구성되어 있다. Model 은 데이터를 관리하는 역할을 한다. View 는 뷰 템플릿, 즉 웹 페이지를 화면에 보여준다. Controller 는 클라이언트 요청에 따라 서버에서 이를 처리하는 역할을 한다.
MVC 패턴을 활용해 뷰 템플릿 페이지 만들기
뷰 템플릿 페이지 만들기
src/main/resources/templates
경로에 머스테치를 사용하여 파일을 만든다.
컨트롤러 만들고 실행하기
src/main/java/com/example/firstproject
기본 패키지에 controller 패키지를 추가하여 컨트롤러 클래스를 생성한다.
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class FirstController {
@GetMapping("/hi")
public String niceToMeetYou() {
return "greetings";
}
}
@Controller 어노테이션을 선언하여 이 클래스가 컨트롤러임을 선언해준다.
반환형이 문자열인 메서드를 선언하여 페이지를 반환해준다. 이 때 반환값을 뷰 템플릿 파일 이름을 적어주면 서버가 알아서 templates 디렉토리에서 파일을 찾아 웹 브라우저로 전송한다.
@GetMapping 을 사용하여 URL 요청을 접수한다.
❗ 한글 깨짐 현상이 발생하는 경우
src/main/resources/application.properties 에 아래 코드를 추가한다.
server.servlet.encoding.force=true
모델 추가하기
{{변수명}}
일반 html 파일 아닌 뷰 템플릿 파일인 mustache를 사용할 때 머스테치 문법을 사용하여 변수를 삽입할 수 있다.
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class FirstController {
@GetMapping("/hi")
public String niceToMeetYou(Model model) {
model.addAttribute("username", "꼬미");
return "greetings";
}
}
컨트롤러의 메서드에 Model 타입의 model 매개변수를 추가하여, 변수를 등록한다.
모델에서 변수를 등록할 때는 addAttibute() 메서드를 사용한다.
model.addAttibute(”변수명”, 변수값)
MVC의 역할과 실행 흐름 이해하기
웹 서비스는 클라이언트의 요청에 대한 서버의 응답으로 동작한다. 이 때 스프링 부트는 서버의 역할을 한다.
서버는 모델, 뷰, 컨트롤러가 유기적으로 역할을 분담해 클라이언트의 요청을 처리한다.
/hi 페이지의 실행 흐름
클라이언트가 localhost:8080/hi 라고 요청하면 서버 내부에서는 컨트롤러가 요청을 받아 처리한다.
@Controller
public class FristController {
@GetMapping("/hi")
public String niceToMeetYou(Model model){
model.addAttribute("username");
return "greetings";
}
}
컨트롤러인 FirstController 클래스는 @GetMapping(”/hi”) 를 통해 클라이언트의 요청을 받으면, niceToMeetYou() 메서드를 수행한다. 이 때 뷰 템플릿 페이지에서 사용할 변수 username 은 model을 통해 등록하고 메서드의 반환값으로 greetings.mustache 파일을 반환한다.
/bye 페이지의 실행 흐름
@Controller
public class FristController {
@GetMapping("/bye")
public String seeYouNext(Model model) {
model.addAttribute("nickname", "꼬미");
return "goodbye";
}
}
/hi 페이지와 동일하게 @GetMapping(”bye”) 를 통해 클라이언트 요청을 받고, seeYouNext() 메서드를 수행한다. 변수 nickname 은 model 을 통해 등록하고 메서드의 반환 값으로 goodbye.mustache 파일을 반환한다.
뷰 템플릿 페이지에 레이아웃 적용하기
레이아웃 은 화면에 요소를 배치하는 일을 말한다.
/hi, /bye 페이지에 헤더-푸터 레이아웃 적용하기
부트스트랩을 사용하여 레이아웃을 구현한다. 해당 버전 페이지에서 스타터 템플릿을 찾아 복사해서 사용한다. 각각 페이지에서 중복되는 코드를 템플릿화하여 사용한다. 템플릿화 는 코드를 하나의 틀로 만들어 변수화한다는 말이다.
html 파일을 수정한 후에 ctrl+f9 or cmd+f9 를 눌러 프로젝트를 빌드하여 서버에 반영할 수 있다.
머스테치에서 레이아웃 템플릿을 삽입할 때는 원하는 위치에서 아래와 같은 형식으로 작성한다.
