springboot_MVC 패턴 이해와 실습

2.1 뷰 템플릿과 MVC 패턴

2.1.1 뷰 템플릿이란

• 뷰 템플릿
  • 화면을 담당하는 기술
  • 웹 페이지를 하나의 틀로 만들고 여기에 변수를 삽입해 서로 다른 페이지로 보여줌
  • Mustache : 뷰 템플릿을 만드는 도구 (1장에서 도구 추가함)

2.1.2 MVC 패턴

• 뷰 템플릿 (= 뷰)
  • 컨트롤러 : 클라이언트의 요청에 따라 서버에서 이를 처리하는 역할
  • 모델 : 데이터를 관리하는 역할
• MVC 패턴 : 보여주고 처리하고 관리하는 역할을 나누는 기법
  • 웹 페이지를 화면에 보여주고 = View
  • 클라이언트의 요청을 받아 처리하고 = Controller
  • 데이터를 관리하는 = Model

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

2.2.1 뷰 템플릿 페이지 만들기

• 뷰 템플릿은 templates 디렉터리에 제작
  • 확장자를 mustache로 설정하게 되는데 mustache는 뷰 템플릿을 만드는 도구, 즉 뷰 템플릿 엔진을 의미함
    • 머스테치 파일의 기본 위치 : src > main > resources > templates(이 위치에 저장 시 스프링 부트에서 자동으로 로딩)
• doc 입력 시 Tab키를 누르면 기본 HTML 코드 자동 작성

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

• 프로젝트 탐색기에서 src > main > java 디렉터리에 기본 패키지인 com.example.~에 하나의 패키지로 제작(확장자명 : .controller)
• controller 패키지에 자바 클래스 제작
  • @Controller 어노테이션 작성
    • 이 클래스가 컨트롤러임을 선언
    • 이렇게 하면 Controller클래스 패키지(org.springframework.stereotype.Controller)가 자동 임포트
  • 반환형이 문자열인 ~() 메서드 선언 : ~.mustache 페이지 반환 용도
    • return "mustache 파일명"; : ~.mustache 파일을 찾아 웹브라우저로 전송
• 페이지(~.mustache) 반환 URL 요청 접수
  • ~()메서드 앞 @GetMapping() 추가
    • org.springframework.web.bind.annotation.GetMapping 패키지 자동 임포트
    • @GetMapping 괄호 안에 URL 주소 입력(ex_/hi)
      • 웹 브라우저에서 localhost:8080/hi로 접속하면 ~.mustache파일을 찾아 반환하라는 뜻

어노테이션

• 소스 코드에 추가해 사용하는 메타 데이터의 일종
  
• 자바에서 앞에 ‘@’ 기호를 붙여 사용
  
• 메타 데이터 : 컴파일 및 실행 과정에서 코드를 어떻게 처리해야 할지 알려 주는 추가 정보
  

한글 깨짐 현상

• src > main > resources > application.properties 파일 열어 코드 추가 후 서버 재시작 : server.servlet.encoding.force=true

2.2.3 모델 추가하기

• 모델 : MVC 패턴에서 데이터 관리자
  • 컨트롤러의 메서드에서 매개변수로 받아옴
• 머스테치 문법을 사용해 뷰 템플릿 페이지에 변수 삽입
  • `````` : 변숫값에 따라 결과가 그때그때 다르게 출력(= 템플릿화)
• 메서드에 Model 타입의 model 매개변수를 추가하면 Model 클래스 패키지 자동 임포트 : import org.springframework.ui.Model
  • 임포트 후 모델을 통해 변수 등록 : addAttribute() 메서드 사용
    • 형식 : model.addAttribute("변수명",변숫값) (변숫값을 “변수명”이라는 이름으로 추가)

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

• 웹 서비스 : 클라이언트의 요청에 대한 서버의 응답으로 동작
  • 스프링 부트 : 서버의 역할
• 서버 : 모델, 뷰, 컨트롤러가 유기적으로 역할을 분담해 클라이언트의 요청 처리
  • 컨트롤러 : 클라이언트의 요청 받기
  • 뷰 : 최종 페이지 제작
  • 모델 : 최종 페이지에 쓰일 데이터를 뷰에 전달

2.3.1 /hi 페이지의 실행 흐름

• 클라이언트가 lacalhost:8080/hi라고 요청하면 서버 내부에서는 컨트롤러가 요청을 받아 처리
• 컨트롤러의 동작
  • 콘트롤러임을 선언
  • 클라이언트로부터 “/hi”라는 요청 받아 접수
  • “/hi”라는 요청을 받음과 동시에 niceToMeetYou() 메서드 수행
  • 뷰 템플릿 페이지에서 사용할 변수를 등록하기 위해 모델 객체를 매개변수로 가져옴
  • 모델에서 사용할 변수 등록. 변숫값에 따라 서로 다른 뷰 템플릿 페이지 출력
  • 메서드를 수행한 결과로 greetings.mustache 파일 반환. 이 때 return 문에는 파일 이름만 작성(return “greetings”;). 그러면 서버가 알아서 templates 디렉터리에 있는 해당 뷰 템플릿 페이지를 찾아 웹 브라우저로 전송

컨트롤러가 @GetMapping("/hi")를 통해 클라이언트의 요청을 받으면 niceToMeetYou()메서드 수행
이때 뷰 템플릿 페이지에서 사용할 변수(username)는 모델을 통해 등록하고 메서드의 반환값으로 greeting.mustache파일 반환

2.3.2 /bye 페이지의 실행 흐름

• @GetMapping("/bye")어노테이션 추가
  • /bye 요청을 처리할 seeYouNext() 메서드 생성
  • 반환값은 요청에 따라 보여 줄 뷰 템플릿 페이지로 작성
• 컨트롤러는 그대로 사용해도 뷰 템플릿 페이지는 새로 작성
  • templates 디렉터리에 mustache 파일 제작
• 사용자 이름 변수처리
• 페이지를 반환하는 컨트롤러의 메서드에 변수를 모델을 통해 등록

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

• 레이아웃 : 화면에 요소를 배치하는 일
  • 헤더 - 푸터 레이아웃 : 헤더, 콘텐츠, 푸터 구성으로 가장 기본

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

• 부트스트랩 : 웹 페이지를 쉽게 만들 수 있도록 작성해 놓은 코드(HTML, CSS, 자바스크립트 코드) 모음
  • 각종 레이아웃, 버튼, 입력창 등 디자인을 미리 구현해 놓은 것(클래스로 불러오게 됨)
  • 부트스트랩
  • 스타터 템플릿 : 기본 뼈대

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

• /hi 페이지를 템플릿화 하여 /bye 페이지에 동일 적용
  • 템플릿화 : 코드를 하나의 틀로 만들어 변수화한다는 말
    (ex_헤더 영역과 푸터 영역 변수화)
  • {{>파일명}}: 뷰 템플릿 파일 불러올 때 일반 변수 작성법
    • 파일 경로를 포함해 작성 (ex_{{>layouts/header}})