MVC 패턴 이해와 실습

1. 뷰 템플릿

웹 페이지를 하나의 틀로 만들고 여기에 변수를 삽입해 서로 다른 페이지를 보여 주는 기술이다.

 

2. MVC 패턴

웹 페이지를 화면에 보여주고(View),  클라이언트의 요청을 받아 처리하고(Controller), 데이터를 관리하는(Model) 역할을 영역별로 나누어 하는 기법을 말한다.

 

3. 뷰 템플릿 생성 위치

뷰 템플릿은 src > main > resources > templates 디렉토리에 만든다. 머스테치 뷰 템플릿의 확장자는 .mustache이다.

 

4. 컨트롤러 생성 위치

컨트롤러는 src > main > java > 기본 패키지 안에 컨트롤러 패키지를 만든 후 자바 클래스 파일을 생성하는 방식으로 만든다. 이때 확장자는 .java 이다.

 

5. 모델을 통해 변수 등록하는 방법

모델은 컨트롤러의 메서드에서 매개변수로 받아 온다. 모델에서 변수를 등록할 때는 addAttribute() 메서드를 사용한다.

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

 

6. 헤더-푸터 레이아웃

가장 기본이 되는 레이아웃으로 헤더 영역에는 사이트 안내를 위한 네비게이션을 넣고, 푸터 영역에는 사이트 정보 등을 넣는다. 그리고 두 영역 사이에 콘텐트 영역에는 사용자가 볼 핵심 내용을 배치한다.

 

7. 부트스트랩

웹 페이지를 쉽게 만들 수 있도록 각종 레이아웃, 버튼, 입력창 등 디자인을 미리 만들어 놓은 것이다. 사용자는 코드를 가져와 사용하기만 하면 되므로 편리하게 웹 페이지를 만들 수 있다.

 

8. 레이아웃 템플릿 생성과 적용

① 레이아웃 템플릿 파일은 src > main > resource > templates 디렉터리에 만든다.

② 머스테치 템플릿 파일의 확장자는 .mustache 이다.

③ 레이아웃 템플리을 삽입할 때는 원하는 위치에 {{/파일경로/파일명}} 형식으로 작성한다.

 

 

한글 깨짐 해결
application.properties

server.servlet.encoding.force=true

 

 

결과

 

 

firstContoroller

package com.example.firstproject.controller;

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 객체 받아오기
        model.addAttribute("username","YHJ");
        return "greeting";
    }

    @GetMapping("/bye")
    public String seeYouNext(Model model){
        model.addAttribute("nickname","YHJ");
        return "goodbye";
    }

}

 

 

greeting.mustache

{{>header}}

<h1 class="bg-dark text-white p-5">{{username}}님, 반갑습니다!</h1>

{{>footer}}