[ Part 1 - 2장 ] MVC 패턴 이해와 실습 - 1

✅ 뷰 템플릿과 MVC 패턴

💠 뷰 템플릿( View Template )이란

• 화면을 담당하는 기술
• 웹 페이지(View) 를  하나의 틀(Template)로 만들고 변수를 삽입해 서로 다른 페이지 실행 
• Mustache : 뷰 템플릿을 만드는 도구

💠 MVC 패턴

Model : 데이터를 관리

View : 웹 페이지를 화면에 보여주고

Controller : 클라이언트의 요청을 받아 처리

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

💠 뷰 템플릿 페이지 만들기

• src > main > resources > template

• 파일명 greetings.mustache 생성
• 확장자 mustache : 뷰 템플릿을 만드는 도구 ▶ 뷰 템플릿 엔진을 의미

• mustache 파일을 지원하는 플러그인 설치 ▶ OK 클릭

• doc 입력 ▶ TAB 클릭 ▶ 기본 HTML 코드 자동 작성

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

• src > main > java > com.example.firstproject

• com.example.firstproject.controller 생성

• controller 패키지에 자바 클래스 생성

• 클래스명 FirstController 입력

 

• 이 클래스가 컨트롤러임을 선언하는 @Contoller 어노테이션을 작성 ▶ Controller 클래스 패키지 (org.springframwork.stereotype.Controller) 자동 임포트
• 반환현 문자열 niceToMeetYou() 메서드 선언
• 공백 문자열 (" ")을 반환 하도록 return " "; 문 ▶ 추가 greetings mustache 페이지 반환
• 어노테이션
• 소스코드에 추가해 사용하는 메타 데이터의 일종
• 앞에 @ 기호를 붙여 사용
  • 메타 데이터
    • 프로그램에서 처리해야 할 데이터가 아니라 컴파일 및 실행 과정에서 코드를 어떻게 처리해야 할지 알려 주는 추가 정보

 

• niceToMeetYou() 메서드로 greetings.mustache 페이지 반환 ▶ 파일 이름 greetings만 반환값으로 입력
• 서버가 알아서 templates 디렉터리에서 greetings.mustache 파일을 찾아 웹 브라우저로 전송

 

• 메인 메서드가 있는 FirstprojectApplication.java 에서 서버 실행 후 페이지 접속

• 페이지(greetings.mustache) 반환 URL 요청 접수 부분이 누락
• niceToMeetYou() 메서드 앞에 @GetMapping()을 추가 ▶ 자동으로org.springframework.web.bind.annotation.GetMapping 패키지 임포트
• @GetMapping 괄호 안에 URL 주소 "/hi" 입력

 

웹 브라우저에서 localhost:8080/hi로 접속하면 greetings.mustache 파일을 찾아 반환하라

컨트롤러 선언(@Controller) ▶ 반환값 페이지 이름입력(return "greetings";) ▶ URL 요청 접수(@GetMapping("/hi"))

• 서버 재시작 localhost:8080/hi 접속

• src > main > resource  > application.properties 아래 코드 추가 후 재시작

server.servlet.encoding.force=true

💠 모델 추가하기

• Ssoon 이름을 다른 이름으로 변경하고 싶으면 ▶ 머스테치 문법을 사용해 뷰 템플릿 페이지에 변수 삽입

{{변수명}}

 

• greetings.mustache 에서 Ssoon 을 {{username}} 님으로 수정 ▶ 변숫값에 따라 결과가 다르게 출력 ▶ 뷰 페이지가 템플릿화 

• 서버 재시작 후 접속하면username 변수를 찾을 수 없어 에러 발생

• 모델은 컨트롤러의 메서드에서 매개변수로 받아 옴
• FirstController 에서 nicceToMeetYou() 메서드에 Model 타입의 model 매개변수 추가 ▶ Model 클래스패키지가 자동을 임포트

• 모델 변수 등록 ▶ addAttribute() 메서드 사용

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

• niceToMeeYou() 내부에 model.addAtribute("username", "Ssoon2"); 코드 추가

• 변경 내용을 반영하기 위해 서버 재시작 후 재접속