2장 : MVC 패턴 이해와 실습

길벗 IT도서에서 주관하는 코딩 자율학습단 8기 : Spring Boot 파트에 참여한 기록입니다 [ 목록 ]

 

2.1 뷰 템플릿과 MVC 패턴

2.1.1 뷰 템플릿이란

• 뷰 템플릿(View Template)은 화면을 담당하는 기술로, 웹 페이지(View)를 하나의 틀(Template)로 만들고 변수를 삽입해 페이지를 보여줌
  • 머스테치(Mustache)가 바로 뷰 만드는 뷰 템플릿 도구

2.1.2 MVC 패턴

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

---

 

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

2.2.1 뷰 템플릿 페이지 만들기

• src > main > resources 에 templates 디렉터리 생성
  • 이전엔 static에 html 파일 만들었는데, 뷰 템플릿은 templates에 생성함
• greetings.mustache 파일 생성
  • .mustache 확장자는 뷰 템플릿 엔진을 의미

 

• mustach 플러그인 설치

 

• greetings.mustache 파일에서 doc 을치고 탭 누르면 형식 생김
  • body에 <h1> 반갑습니다. 환영합니다.</h1> 써주기

 

• 뷰 템플릿 페이지를 만들었으니, 이 페이지를 웹 브라우저에서 보기 위해 컨트롤러와 모델을 만들어야 함

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

• 컨트롤러도 뷰 템플릿과 마찬가지로 위치가 있음
  • src > main > java에 기본 패키지로 만들어진 com.example.firstproject가 존재하는데 여기에 패키지 생성
• controller라는 패키지 만들어서 FirstController 클래스 생성

 

• 만들 어진 클래스에 @Controller 애노테이션 붙여서 컨트롤러임을 표시
• String 반환 메서드 niceToMeetYou() 만들어서 아까 만든 페이지 명 “greetings” 반환

 

💡 애노테이션(annotation)이란 소스 코드에 추가해 사용하는 메타 데이터의 일종이다. 메타 데이터는 프로그램에서 처리해야 할 데이터가 아니라 컴파일 및 실행 과정에서 코드를 어떻게 처리해야 할지 알려주는 추가 정보이다. 자바에서 애노테이션은 앞에 @ 기호를 붙여 사용한다.

 

• 실행시켜서 greetings.mustatche로 접속해 보면 페이지를 찾을 수 없음

 

• static 파일이 아닌, 컨트롤러를 거쳐 뷰 템플릿을 가야 하기 때문
  • 컨트롤러에 url 주소 입력 후 접속

 

• 페이지는 잘 찾는데 한글 깨짐 오류 발생

 

• 프로젝트에서 src > main > resources > application.propertes 열어서 다음 코드 삽입
  • server.servlet.encoding.force=true
  • 코드 삽입 후 재실행하면 잘 실행됨

 

2.2.3 모델 추가하기

• 변수 사용을 위해 두 겹의 중괄호({{ }}) 로 감싸는 문법 사용

 

• 다시 실행하면 username이라는 변수 찾을 수 없어서 오류 발생

 

• Model을 추가해서 “username”이라는 변수 명으로 변수 값 저장

 

• 잘 실행되는 걸 볼 수 있음
  • 다른 값으로 수정해도 잘 반영됨

 

💡 MVC 패턴 실습 요약

1. 뷰 페이지 만들기
2. 컨트롤러 만들기
3. 컨트롤러에서 뷰 페이지 반환하기
4. 뷰 페이지에 변수 삽입하기
5. 컨트롤러에 모델 추가하기
6. 모델에서 변수 등록하기

 

🚀 1분 퀴즈

1. 다음 ㄱ~ㅁ에 들어갈 알맞은 용어를 찾아 쓰세요.
   • ( 4. 뷰 템플릿 )(이)란 웹 페이지를 일종의 틀로 만드는 것이다.
   • ( 2. 컨트롤러 )은/는 클라이언트의 요청을 받아 서버에서 이를 처리하는 역할을 한다.
   • ( 5. 모델 )은/는 뷰 템플릿에서 사용되는 데이터를 관리하는 역할을 한다.
   • ( 1.@Controller )은/는 이 클래스가 컨트롤러임을 선언한다.
   • ( 3.@GetMapping )은/는 클라이언트의 URL 요청을 받아 특정 컨트롤러의 메서드가 처리하게 한다. 

 

---

 

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

웹서비스는 클라이언트의 요청에 대한 서버의 응답으로 동작한다.
이때 스프링 부트는 서버의 역할을 수행한다.
서버는 앞에서 배웠듯이 모델, 뷰, 컨트롤러가 유기적으로 역할을 분담에 클라이언트의 요청을 처리하는데, 각 관점에서 그 과정을 분석해 보자.

2.3.1 /hi 페이지의 실행 흐름

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

2.3.2 /bye 페이지의 실행 흐름

• localhost:8080/bye 요청을 받았을 때 “xx님, 다음에 또 만나요!”를 출력해 보자.
• seeYouNext() 메서드 작성

 

• goodbye.mustache 파일 작성

 

• 컨트롤러에 모델 추가해서 변수 값 저장

 

• 결과가 잘 나타남

 

🚀 1분 퀴즈

1. 다음 설명 중 옳지 않은 것을 고르세요.
   1. 웹 브라우저는 서버로 URL 요청을 보내 결과 뷰 템플릿 페이지를 반환받는다.
   2. 컨트롤러의 메서드는 URL 요청을 받아 처리한 후 결과 뷰 템플릿 페이지를 반환한다.
   3. 컨트롤러의 메서드 반환 값은 뷰 템플릿 페이지의 확장자를 포함해 작성한다.
   4. 뷰 템플릿 페이지에서 변수를 사용하려면 모델에 변수가 등록돼 있어야 한다.

⇒ c. 확장자를 포함하지 않고 파일 명만 반환한다.

 

 

---

 

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

레이아웃(layout)이란 화면에 요소를 배치하는 일을 말함.
헤더-푸터 레이아웃(header-footer layout)은 가장 기본이 되는 레이아웃.
상단의 헤더(header) 영역에는 내비게이션, 하단의 푸터(footer) 영역에는 사이트 정보를 넣음
그리고 두 영역 사이에는 핵심 내용인 콘텐트(content)를 배치

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

• 부트 스트랩(Bootstrap)이란 웹 페이지를 쉽게 만들 수 있도록 작성해 놓은 코드 라이브러리

1. 부트 스트랩 홈페이지에서 v5.0.2 선택 후 스타터 템플릿 복사

 

2. greetings.mustache 파일에 덮어쓰기 후 주석은 모두 지우기

3. 3개 영역으로 나눠서 사용

 

4. 네비바 만들기 위해 부트 스트랩에서 navbar 검색해서 copy

 

5. 하단 footer용 사이트 정보도 꾸며주기

 

6. 컨텐트도 꾸며주기

 

7. 완성 모습

 

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

• /hi 페이지의 내용을 헤더와 푸터로 템플릿 화해서 사용
  • src > main > resources > templates에 layouts 디렉터리 만들기
  • header.mustache와 footer.mustache 파일 생성 후 코드 복사

 

• 코드가 간결해진다

 

• goodbye.mustache도 적용해 주기

 

🚀 1분 퀴즈

1. 다음 ㄱ~ㄷ에 들어갈 알맞은 용어를 찾아 쓰세요.
   • ( ㄱ )(이)란 화면에 요소를 배치하는 것을 말한다. 웹 페이지는 같은 요소로도 어떻게 배치하느냐에 따라 다른 느낌을 줄 수 있다.
   • ( ㄴ )(이)란 웹 페이지를 쉽게 만들 수 있도록 작성해 놓은 코드 모음으로 미리 작성된 HTML/CSS/자바스크립트 코드를 가져다 사용할 수 있다.
   • ( ㄷ )(이)란 코드를 하나의 틀로 만들어 변수 화하는 것을 말한다.

⇒ ㄱ : 레이아웃, ㄴ : 부트 스트랩, ㄷ : 템플릿화

 

---

 

✅ 셀프 체크

• quote.mustache 파일 만들기

 

🏓 더 알아볼 내용

1. MVC 패턴이란

• Model은 애플리케이션이 포함해야 할 데이터가 무엇인지 정의
  • 데이터의 상태가 변경되면 모델은 이를 뷰에게 알림. 또 가끔은 컨트롤러에게 알림
• View는 애플리케이션에서 실제로 보이는 부분
  • 웹 브라우저에서 데이터를 보여주는 방식을 정의한 것
  • View에서 데이터에 따라 동적으로 화면을 다르게 보여주는 것을 뷰 템플릿이라고 함
    • 자바에서 사용하는 대표적인 템플릿 엔진으로는 JSP, Thymleaf(타임리프) 그리고 책에서 사용한 Mustache(머스테치) 등이 있음
• Controller는 사용자의 액션에 응답하는 컴포넌트
  • 모델을 업데이트하고 다른 여러 액션을 수행합니다.

 

• MVC가 적용된 애플리케이션 서버

 

• Spring에 MVC 패턴이 적용 된 Spring MVC

 

2. @Controller

• 위 Spring MVC의 그림을 보면 ②번 화살표가 향하는 곳에 ‘Handler Mapping’이라는 동작이 보임
  • 이때 사용하기 위한 애노테이션이 바로 @Controller
• HandlerMapping은 몇 가지 종류가 존재
  1. BeanNameUrlHandlerMapping: URL 경로와 빈 이름을 맵핑해 요청을 처리할 핸들러 찾기
  2. RequestMappingHandlerMapping: @RequestMapping 애노테이션을 이용해 메서드 단위의 맵핑을 수행
  3. ControllerClassNameHandlerMapping: 컨트롤러 클래스 이름을 기반으로 URL을 매핑
  4. SimpleUrlHandlerMapping: URL과 핸들러를 직접 매핑할 수 있도록 도움
  5. ⇒ 여기서 집중해서 봐야 할 것은 ‘RequestMappingHandlerMapping’
• RequestMappingHandlerMapping은 다음과 같은 역할을 수행
  1. 애노테이션 기반 요청 매핑
  2. URL과 메서드의 연결
  3. 다양한 요청 처리 지원
  4. HandlerExecutionChain의 반환
  • 여기서 1번 ‘애노테이션 기반 요청 매핑’에서 @Controller 애노테이션이 부착된 클래스를 찾게 되고, 그 이후에 @GetMapping과 같은 HTTP 매핑 애노테이션을 찾아 해당 메서드를 실행
  • 그렇기 때문에 @Controller는 단순히 @Component의 역할만 하는 것이 아니라 요청의 진입점을 의미

3. @GetMapping

• GetMapping의 의미를 JavaDoc(자바 공식 문서)에서 찾아보면 아래와 같이 설명
  • Annotation for mapping HTTP GET requests onto specific handler methods.
    Specifically, @GetMapping is a composed annotation that acts as a shortcut for @RequestMapping(method = RequestMethod.GET).
  • ⇒ HTTP GET 요청을 처리하기 위한 애노테이션으로 위에서 알아본 @Controller 애노테이션과 함께 사용된다는 설명

@RequestMapping("/test")
    public class TestController {
        @GetMapping("/hi")
        public String sayHi() {
        return "hi";
    }
}

 

• @GetMapping은 보통 이런 식으로 사용
• 이때 GET /test/hi로 HTTP 요청을 보내면 “hi”라는 응답이 내려감

 

🥕 멘토 TIP

• Mapping에 대해서 좀 더 깊이 있는 이해를 하고 싶다면 RequestMapping을 더 공부해 보세요.

 

🥕 참고

• Spring MVC (https://mirrorofcode.tistory.com/entry/Spring-MVC에-대해서)