Back-end/Spring boot

MVC 역할과 실행흐름, 뷰 템플릿과 레이아웃

Coding Kitsune 2022. 6. 23. 14:12

 

 

Server => Model / View / Controller 의 유기적 역할을 한다.

 

Controller -> Client 로부터 요청을 받고,

 

View -> 최종 페이지를 만들어주고,

 

Model -> 최종 페이지에 쓰일 데이터들을 뷰에게 전달한다.

 

 

 

결국 요청을 컨트롤러가 받고(GetMapping 을 통해) 메서드를 수행하면서 보여줄 페이지를

 

리턴한다. 보여줄 페이지에서 사용할 변수는 모델을 통해서 등록한다.

 

 

 

뷰 템플릿은 보통  header / content / footer  로 이루어져있고,

 

 

스프링 부트에서는 이를

 

{{>layouts/header}}
<form class="container" action="/articles/create" method="post">
    <div class="mb-3">
        <label class="form-label">titles</label>
        <input type="text" class="form-control" name="title">
    </div>
    <div class="mb-3">
        <label class="form-label">bodys...</label>
        <textarea class="form-control" rows="3" name="content"></textarea>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>
{{>layouts/footer}}

 

이렇게 표현할 수 있다.

 

여기서 {{}}  안에 파일명을 채워주면 그 파일 전체를 불러오는 구조이며,(템플릿화 라고 한다)

 

각각 위 아래에서 header.mustache와 footer.mustache를 가져온다.

 

안에 content 의 코드는 https://getbootstrap.com/ 에서 필요한 구조에 맞게 복사해서

 

가져온뒤, 수정해서 사용하면 된다.