뷰 템플릿과 MVC 패턴

뷰 템플릿과 MVC 패턴

 

<MVC 패턴>

 

뷰 템플릿 : 화면 담당하는 기술, 웹 페이지를 하나의 틀로 만들고 변수를 삽입해 서로 다른 페이지로 보여줌

머스테치(mustache) : 뷰 템플릿을 만드는 도구, 뷰 템플릿 엔진

 

컨트롤러 : 클라이언트의 요청에 따라 서버에서 이를 처리하는 역할을 함

모델 : 데이터를 관리하는 역할을 함

뷰 : 웹페이지를 화면에 보여줌

 

 

<인텔리제이 폴더>

 

resources > static html 파일 넣기

resource > templates 뷰 템플릿(mustache) 넣기

 

이 위치에 머스테치 파일을 저장하면 스프링 부트에서 자동으로 로딩한다.

 

 

<greetings.mustache>

 

머스테치 파일 제일 윗줄에 doc을 입력하고 tab키를 누르면 기본 html 코드가 자동 작성됩니다.

=> 뷰 템플릿 페이지 작성 완료

 

뷰 템플릿 페이지를 웹 브라우저에서 확인

=> 컨트롤러와 모델 사용

 

 

<컨트롤러 패키지 안에 자바 클래스 컨트롤러 만들기>

 

import org.springframework.stereotype.Controller; @Controller // 컨트롤러 선언 어노테이션 public class FirstController{    @GetMapping( /hi ) // 자동으로 Getmapping 패키지 임포트    public String niceToMeetYou(){  //뷰 템플릿 greetings.mustache 파일 반환 함수 선언       return "greetings"; // greetings.mustache 파일 반환    } }

 

컨트롤러가 뷰 템플릿 파일을 반환하는 함수를 만든다.

파일 이름 greetings만 적어주면 서버가 알아서 templates 디렉터리에서 greetings.mustache 파일을 찾아 전송해 준다.

localhost:8080/hi로 접속하면 greetings.mustache 파일 찾아 GetMapping이 반환한다.

 

 

<한글 깨짐 현상 해결>

 

src > main > resources > application > properites 파일에서 아래 코드 추가

server.servlet.encoding.force=true

 

 

<일반 html 파일과 뷰 템플릿 파일의 차이>

 

{{ 변수명 }} : 머스테치 문법을 사용해 뷰 템플릿 페이지에 변수를 삽입하기

뷰 템플릿 파일에 사용될 변수들은 모델을 이용한다.

모델은 MVC 패턴에서 데이터를 관리하는 역할을 한다.

 

 

<모델 Model 클래스 활용>

 

모델은 컨트롤러의 메서드에서 매개변수로 받아 온다.

import org.springframework.stereotype.Controller; import org.springframework.ui.Model; // Model 클래스 패키지 자동 임포트 @Controller // 컨트롤러 선언 어노테이션 public class FirstController{    @GetMapping( "/hi" ) // 자동으로 Getmapping 패키지 임포트    public String niceToMeetYou(Model model){  // Model 객체 받아오기       return "greetings"; // greetings.mustache 파일 반환    } }

 

 

<Model 클래스에 변수 등록하기>

 

모델에서 변수를 등록할 때는 addAttribute() 메서드 사용하기

model.addAttribute("변수명", 변숫값)  // 변숫값을 "변수명"이라는 이름으로 추가

 

 

- greetings.mustache

<h1> {{username}} 님, 반갑습니다 </h1>  // 이름을 변수로 변경

 

-controller/FirstController.java

import org.springframework.stereotype.Controller; import org.springframework.ui.Model; // Model 클래스 패키지 자동 임포트 @Controller // 컨트롤러 선언 어노테이션 public class FirstController{    @GetMapping( "/hi" ) // 자동으로 Getmapping 패키지 임포트    public String niceToMeetYou(Model model){  // Model 객체 받아오기       model.addAttribute("username", "홍팍");  // Model 사용 뷰 템플릿 변수 바꾸기       return "greetings"; // greetings.mustache 파일 반환    } }

 

 

 

<MVC의 역할과 실행 흐름 이해하기>

 

컨트롤러 : 클라이언트의 요청받기

뷰 : 최종 페이지 만들기

모델 : 최종 페이지에 쓰일 데이터 뷰에 전달

 

 

<컨트롤러에 GetMapping 어노테이션 추가하기>

 

localhost:8080/bye로 요청받았을 때 동작을 실행시키기 

@GetMapping("/hi") public String niceToMeetYou(Model model){ } @GetMapping("/bye") public String seeYouNext(){    return "goodbye"; // goodbye 뷰 템플릿 파일 추가 생성하기, 이하 동일 }

 

 

<템플릿화>

 

템플릿화 : 코드를 하나의 틀로 만들어 변수 화한다는 말, 가독성을 높여준다

뷰 템플릿 파일 불러오기 {{>파일명}}

 

{{>header}} : 헤더의 템플릿화, 헤더를 템플릿 파일로 만들어주기, header.mustache 파일 생성

{{>footer}} : 푸터의 템플릿화, 푸터를 템플릿 파일로 만들어주기, footer.mustache 파일 생성

 

layouts 디렉터리 안에 header.mustache 파일

{{>layouts/header}}

 

layouts 디렉터리 안에 footer.mustache 파일

{{>layouts/footer}}