뷰 템플릿과 MVC 패턴
뷰 템플릿이란,
화면을 담당하는 기술로 웹 페이지를 하나의 틀로 만들고 여기에 변수를 삽입해 서로 다른 페이지로 보여줌.
MVC 패턴이란 모델, 뷰, 컨트롤러의 약자를 따서 만든 패턴.
모델(Model)은 데이터를 관리하는 역할.
뷰(View)는 웹 페이지를 화면에 보여주는 역할.
컨트롤러(Controller)는 클라이언트의 요청에 따라 서버에서 이를 처리하는 역할.
MVC 패턴을 활용해 뷰 템플릿 만들기
1장에서 hello.html 파일은 static 디렉터리에 만들었다면 뷰 템플릿은 templates 디렉터리에 생성.
확장자 mustache는 뷰 템플릿을 만드는 도구, 즉 뷰 템플릿 엔진을 의미.
생성한 greetings.mustache 파일에 doc을 입력한 후 tab키를 누른 후 자동 생성된 html 코드 확인 후,
body 부분에 h1 태그로 본문 내용 추가.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>홍팍님, 반갑습니다!</h1>
</body>
</html>이제 컨트롤러 만들기로 넘어가서 src > main > java 디렉터리 기본 패키지 아래 컨트롤러 패키지 먼저 만들어주고,
컨트롤러 패키지에 'FirstController' 새 자바 클래스 파일 하나 만들어주기.
그다음 이 클래스가 컨트롤러라고 알려주기 위해 컨트롤러 어노테이션 추가해 주고,
우리가 만든 페이지를 반환하기 위해 새 메서드 하나 만들어주기.
메서드에게 페이지를 반환할 url 요청 접수를 위해서 메서드 앞에 @GetMapping()을 추가해 주고 URL까지 지정.
이제 모델을 추가하는 작업을 진행해보려고 한다.
앞서 출력한 문구에서 '홍팍' 대신 다른 이름으로 바꾸고 싶다면 뷰 템플릿 페이지에 변수를 삽입해 준다.
머스테치 문법으로 변수를 삽입하는 것은 {{ 변수명 }} 의 형태로 하면 된다.
머스테치 파일의 h1 태그 부분을 아래와 같이 수정을 먼저 해 준다.
<h1>{{username}}님, 반갑습니다!</h1>그다음 여기서 모델을 사용할 것인데 모델은 컨트롤러에 메서드에서 매개변수로 받아온다.
모델에서 변수를 등록할 때는 addAttribute() 메서드를 사용한다.
지금까지의 과정을 정리하면 아래와 같이 도식화하여 나타낼 수 있다.
MVC의 역할과 실행 흐름 이해하기
우리가 앞서 만들었던 /hi 페이지의 요청 흐름을 다시 한번 확인해 보기.
- 컨트롤러가 @GetMapping("hi")를 통해 클라이언트의 요청을 받음
- niceToMeetYou() 메서드 수행
- 이때 뷰 템플릿 페이지에서 사용할 변수는 모델을 통해 등록하고 메서드의 반환값으로 greetings.mustache 파일 반환
/bye 페이지를 만들고 실행 흐름 알아보기
- 앞서 만들 FirstController에다가 아래 코드 추가
@GetMapping("/bye")
public String seeYouNext(Model model) {
model.addAttribute("nickname", "hongpark");
return "goodbye";
}- template 디렉터리에 goodbye 머스테치 파일 만들고 코드 작성
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>{{nickname}}님, 다음에 또 만나요!</h1>
</body>
</html>- 서버 실행 후 'localhost:8080/bye'로 잘 실행되는지 확인
뷰 템플릿 페이지에 레이아웃 적용하기
레이아웃이란 화면에 요소를 배치하는 일을 말하는데 헤더-푸터 레이아웃은 가장 기본이 되는 레이아웃.
상단 헤더 영역에는 사이트 안내를 위한 내비게이션을 넣고,
하단의 푸터 영역에는 사이트 정보를 넣고,
헤더-푸터 사이에 사용자가 볼 핵심 내용인 콘텐트를 배치.
페이지를 쉽고 빠르게 꾸미기 위해 부트스트랩을 사용해 볼 것인데,
부트스트이란 웹 페이지를 쉽게 만들 수 있도록 버튼, 레이아웃, 입력창 등을 미리 구현해 놓은 코드 모음.
'https://getbootstrap.com' 사이트로 접속 후 스타터 템플릿 코드 복사해서 greetings.mustache에 붙여넣기.
부트스트랩을 활용해서 header, content, footer 생성해주면 아래와 같은 화면을 볼 수 있다.
이제 /bye 페이지에도 동일하게 적용해보려고 하는데 같은 방법을 사용하면 비효율적이니 /hi 페이지를 템플릿화 해서 사용.
'템플릿화한다'는 말은 코드를 하나의 틀로 만들어 변수화한다는 말.
헤더와 푸터 모두 변수로 만드는 방법은 앞서 사용한 것 처럼 {{ }}로 처리 가능하고 각각 템플릿 파일로 만들어주기.
만들어진 템플릿파일을 변수화해서 'greeting.mustache'에 적용하면 이 파일의 코드가 아래와 같이 간결해진다.
{{>layouts/header}}
<!-- content start-->
<div class="p-5 m-2 bg-dark bg-gradient text-white" >
<h1>{{username}}님, 반갑습니다!</h1>
</div>
<!-- content end-->
{{>layouts/footer}}'goodbye.mustache' 파일도 적절하게 수정해주면 아래와 같이 나오는 것 확인할 수 있다.
'Backend' 카테고리의 다른 글
| 코딩자율학습단 스프링부트_4장 (0) | 2024.08.10 |
|---|---|
| 코딩자율학습단 스프링부트_3장 (0) | 2024.08.06 |
| 코딩자율학습단 스프링부트_1장 (1) | 2024.08.03 |
| 스프링 DB 데이터 접근 활용 기술_04 (0) | 2024.01.10 |
| 스프링 DB 데이터 접근 활용 기술_03 (0) | 2024.01.10 |