[스프링 부트 개요] 2장 | MVC 패턴 이해와 실습

2.1 뷰 템플릿과 MVC 패턴

웹 페이지를 하나의 틀로 보고 변수에 따라 서로 다르게 출력하는 뷰 탬플릿 만들고,
뷰 템플릿 실행 위해 역할을 분담해 동작하는 기법인 MVC 패턴 알아보기

2.1.1 뷰 템플릿이란(View Template, 뷰)

화면 담당 기술 - 웹 페이지(view)를 하나의 틀(Template)로 만들고 여기에 변수를 삽입해 서로 다른 페이지로 보여준다

📍 스프링부트 프로젝트 만들 때 추가한 도구 중 하나인 머스테치가 뷰 템플릿을 만드는 도구

2.1.2 MVC 패턴

1. 컨트롤러(Controller) : 클라이언트의 요청에 따라 서버에서 처리하는 역할
2. 모델(Model) : 데이터 관리 역할
3. 뷰(View)

➡️ MVC 패턴(Model-View-Controller pattern)

---

2.2 MVC 패턴을 활용해 뷰 템플릿 페이지 만들기

2.2.1 뷰 템플릿 페이지 만들기(뷰 페이지)

뷰 템플릿은 templates 디렉토리에 만든다. 

✔️ mustache 확장자 : 뷰 템플릿을 만드는 도구(= 뷰 템플릿 엔진)

여기서 엔진은 특정한 기능을 자동으로 처리하는 소프트웨어 구성 요소

머스테치 외에는 Thymeleaf, JSP가 있다. 

 

뷰 템플릿 페이지를 웹 브라우저에서 보려면 컨트롤러와 모델이 필요하다. 

2.2.2 컨트롤러 만들고 실행하기

컨트롤러는 src > main> java 의 com.example.firstproject에 하나의 패키지로 만든다

• 일반적으로 컨트롤러 이름은 000Controller이다. 
• 자동 생성된 코드 앞에 컨트롤러임을 선언하기 위해 @Controller 어노테이션 작성하면 Controller 클래스 패키지가 자동 임포트
  • 어노테이션 : 메타 데이터의 일종(처리해야 할 데이터가 아니라 컴파일하거나 실행할 때 코드를 어떻게 처리할지 알려준다. 

1. 컨트롤러 선언(@Controller)
2. 반환값으로 보여 줄 페이지의 이름만 따서 적기 (return "greetings";)
3. URL 요청 접수(@GetMapping("/hi")) 

➡️ localhost:8080/hi 로 접속시 뷰 템플릿 페이지가 나온다. 

2.2.3 모델 추가하기

홍팍 대신 username 변수 통해 다르게 나오게 하려면?

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

컨트롤러 메서드에서 모델을 매개변수로 받아 오면 Model클래스 패키지가 임포트되면 모델 통해 변수 등록할 수 있다. 

모델이 최종 페이지에 쓰일 데이터를 뷰에 전달한다. 

model.addAttribute("변수명", 변숫값)

플로우 정리

1. 뷰 페이지 만들기 - greetings.mustache
2. 컨트롤러 만들기 - FirstController.java
3. 컨트롤러에서 뷰 페이지 반환하기 - return "greetings";
4. 뷰 페이지에 변수 삽입하기 - {{username}}
5. 컨트롤러에 모델 추가하기 - niceToMeetYou(Model model)
6. 모델에서 변수 등록하기 - model.addAttribute("username", "홍팍");

---

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

2.3.1 /hi 페이지의 실행 흐름

컨트롤러 동작 이해하기 with FirstController.java

1. 파일이 컨트롤러임을 선언
2. URL 요청 접수
3. /hi 요청 받음과 동시에 niceToMeetYou() 메서드 수행
4. 뷰 템플릿 페이지에서 사용할 변수를 등록하기 위해 모델 객체를 매개변수로 가져옴
5. 모델에서 사용할 변수 등록
6. 메서드 수행 결과로 greetings.mustache 파일 반환

2.4 뷰 템플릿 페이지에 레이아웃 적용하기

2.4.1 /hi 페이지에 헤더-푸터 레이아웃 적용하기

부트스트랩(Bootstrap)

웹 페이지를 쉽게 만들 수 있도록 작성해 놓은 코드 모음

https://getbootstrap.com/

Bootstrap

레이아웃 템플릿 파일 만들고 적용하기

1. templates 디렉토리에 header.mustache, footer.mustache 파일 만든다
2. contents 제외 위 아래 복붙한다. 

파일 관리 편하게 하기 위해 layouts 디렉토리를 추가한다
레이아웃 템플릿의 확장자는 .mustache이다.

// layouts : 디렉토리 명
{{>layouts/header}}

>를 추가해 파일명으로 작성한다. (파일 경로 포함해야 함)

➡️ 파일의 길이가 짧아지고, 어디가 중요한 부분인지 한눈에 볼 수 있다. 

📌 셀프체크

랜덤으로 명언이 나오는 페이지 만들기