[Spring Boot 3] MVC 패턴 과 View 탬플릿

MVC 패턴

웹을 구성하는 것들은 무엇들이 있을까?

1. 화면 (View)
2. 데이터를 관리(Model)
3. 유저가 요청하는 기능을 처리해줄 api(Controller)

크게 이 3가지가 있다. 우리는 이것들을 합쳐 MVC 라 칭한다.

Model

Model 은 데이터를 관리하는 클래스 이다.
Repository가 db에서 데이터를 받아오면 Model 클래스 에 저장하게 된다.
그럼 Model 클래스 는 view 탬플릿에서 불러올수 있다.

헷갈리지 말아야할게 Model 클래스는 dto 도 아니고 db 도 아니다.
음.. 리액트 에서 use effect로 받아온 데이터를 usestate 에 저장해놓고 꺼내서 띄우듯이 , Model 클래스는 스프링의 state hook 이라고 생각하면 될듯하다.

아래는 articleList 라는 model 을 불러와 띄우는 뷰의 예시다.

{{#articleList}}

{{id}}
{{title}}
{{content}}

{{/articleList}}

주의할점

위 코드를 보면 두 메소드가 모두 Model 클래스를 받아오고 있는데 엄연히 둘이 다른 매개변수임을 기억하자.

View Template

path : /src/main/resource/template

뷰 탬플릿 이 없을시 만약 사이트에 접속한 사람이 100 명 이면 100개의 page가 필요하다, 하지만 각 유저 마다 100개의 페이지를 다 만드는건 매우 귀찮은 일이기에 이를 자동화 할 무언가가 필요하다.

그것이 View탬플릿 이다. 사이트의 화면을 담당하는 역활이며 필요한 페이지를 하나의 틀로 만들고 각기 다른 변수를 대입시켜 유저에 띄워 주는 역활을 한다.

스프링 에선 프론트 의 역활을 하게 되며 이를 위한 모듈로 mustache 를 사용하게 된다. 그렇다고 모든 프론트 페이지를 mustache로 만드는것은 추천하지 않는다. 기본적으로 Spring은 stateless 기반 이기에 상태관리 가 불가능하다.
또한 mustache는 동적 페이지 생성 모듈이다. 프론트 프레임 워크와 협업하면 csr 구축이 가능하겠지만 mustache만으로는 ssr 밖에 구현 하지 못한다.
그럼에도 mustache로 구현 하겠다면 next.js 처럼 seo에 유용 할 수는 있겠다마는 서버의 부담이 가중 될것이다.

ex)
{{>layouts/header}}

<form action="/articles/create" class="container" method="post">
    <div class="mb-3">
        <label class="form-label">제목</label>
        <input type="text" class="form-control" name="title">
    </div>
    <div class="mb-3">
        <label class="form-label">내용</label>
        <textarea class="form-control" rows="3" name="content"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Summit</button>
    <a href="/articles">Back</a>

</form>

{{>layouts/footer}}

Controller

path : /src/java/com.example.[projectname]/Controller

컨트롤러는 유저가 요청한 기능을 수행하는 api이다 .
dto,Entity,Repository등 도 수행을 시켜줄 Controller가없다면 무용지물인 것이다.

위와 같이 클래스 상단에 @Controller 어노테이션을 사용하여 해당 클래스가 Controller임을 알려주자.

그리고 클래스 안에 메소드를 생성하고 @GetMapping()을 하여 어떤 url 을 통해 접속시 해당 메소드 가 실행될지 알려 준다. 그리고 return"template 경로" 를 통해 매소드 를 반환한다.

나중 포스트에서 자세히 다루겠지만 @Controller 어노테이션 말고도 @RestController 어노테이션이 있다. 필자가 참고 한 책에서는 두 어노테이션의 차이를 @Controller는 뷰템플릿을 반환하고 @RestController는 값을 반환한다고 한다.

하지만 결국 두 어노테이션 모두 결국 api의 역활을 수행하고 값을 반환 하는데 문제가 없다. 기존에는 @Controller 와 ResponesEntity 클래스 만 존재했기에 Controller를 통해 값을 반환하고자 한다면 별도로 ResponesEntity 클래스로 데이터를 감싸주어야 했다. 이를 보완 하고자 @Controller 와 ResponesEntity 클래스 를 합친게 @RestController 이다.

다만 AOP를 통한 예외 처리를 하려면 @RestControllerAdvice를 사용해야한다.

MVC 패턴의 유기적 역활 분담

출처 : 저자: 홍팍 , 스프링 부트 3 자바 백엔드 개발 입문 2.3장
위의 내용들을 종합하여 MVC의 역활을정리 하자면 위의 사진과 같다 .
클라이언트는 url 을통해 컨트롤러에 요청을 하고 컨트롤러는 각 메소드의 역활에 따라 데이터를 처리하고 Model 클래스에 저장하여 뷰템플릿에서 해당 모델 객체의 데이터를 활용할수 있게 해준다. 그렇다고 모든 메소드가 뷰템플릿을 반환하는것은 아니다 .

경우에 다라 redirect:url 을 하는 경우도 있고 폼에서 Entity를 받아와 데이터 베이스에 저장하기도 한다.

데이터 베이스에 관련한 내용은 crud 포스트 에서 자세히 다룰 예정이다.