코드네임 JY

[스프링 입문] 정적 컨텐츠, MVC & 템플릿 엔진 본문

백엔드 공부

[스프링 입문] 정적 컨텐츠, MVC & 템플릿 엔진

영재임재영 2022. 12. 5. 23:09

미리보기

✅ 서버와 웹 브라우저 간 상호작용
✅ 정적 컨텐츠에 대하여 알아보자!
✅ MVC & 템플릿 엔진에 대하여 알아보자!

🍿 서버와 웹 브라우저 간 상호작용

'서버' 는 실제 화면 뒤에서 동작하는 Back-end 부분이고,
'브라우저' 는 클라이언트가 직접 보는 Front-end 부분이다.

 

서버가 브라우저가 상호작용 할 때, 크게 두 가지 방식으로 나눌 수 있다.

1️⃣ 서버가 완성된 HTML을 브라우저에 전달
2️⃣ 서버가 브라우저에 필요한 순수한 데이터만 전달

 

1번 방법에서는 Model, View, Controller, 그리고 템플릿 엔진을 활용할 수 있고,
2번 방법에서는 API 방식을 활용할 수 있다.

 

따라서 이번 포스팅에는 1번 방법을, 다음 포스팅에 2번 방식을 다룰 것이다.

🍩 정적 컨텐츠

정적 컨텐츠는 파일 그대로 웹 브라우저에 내려주는 방식이다.

 

정적 컨텐츠는 /static 디렉토리에서 다루면 된다.

밑에 있는 /templates 는 동적으로 페이지를 렌더링하고 싶을 때 사용하면 된다!

🍭 MVC & 템플릿 엔진

Model, View, Controller와 템플릿 엔진을 사용하여 HTML을 서버에서 동적으로 내리는 방식이다.

MVC (Model & View & Controller)

천천히 하나씩 살펴보자. 가장 쉬운 단어를 찾으라면 View 라는 단어가 보일텐데,
View 는 말 그대로 보이는 것, 화면을 그리는 데에 모든 것을 집중한다.

<html xmlns:th="http://www.thymeleaf.org">
<body>
    <p th:text="'hello ' + ${name}">hello! empty</p>
</body>
</html>

위 HTML 코드가 View 라고 보면 된다!
그런 View 부분을 다루는 것이 바로 Controller 부분이다.

@Controller  // 1️⃣
public class HelloController {
	
    @GetMapping("hello-template")  // 2️⃣
    public String helloTemplate(@RequestParam("name") String name, Model model) {
    	model.addAttribute("name", name);  // 3️⃣
        return "hello-template";  // 4️⃣
    }
}

1️⃣ : Controller 선언은 @Controller 를 작성하면 된다.
2️⃣ : localhost 주소 뒤에 /hello-template 링크를 붙여 연결되는 메소드라는 의미이다.
3️⃣ : Model 은 조금 이따 설명. Model model 을 파라미터로 선언해주어야 한다.
4️⃣ : hello-template.html 로 넘겨서 렌더링하라는 의미이다.

 

결론적으로, Controller 는 서버 내부적인 로직을 처리하는데 집중한다!
위에서 설명한 View 와 Controller 사이에서 데이터를 전달해주는 매개체가 바로 Model 이다.

 

Model 은 위 코드에서 살펴보았듯이

  ✔️ Model model 을 파라미터로 선언해주어야 하고,

  ✔️ .addAttribute() 메소드를 사용하여 값을 담을 수 있다.

 

결국 MVC 를 사용하는 전체적인 과정을 한 문장으로 정리하면,

Controller로 받은 데이터를, Model에 담아서, View에 전달되어 보여주는 것이다!

 

템플릿 엔진 (Template Engine)

템플릿 엔진(Template Engine) 의미를 살펴보려고 구글링하면,

"서버에서 DB 혹은 API에서 가져온 데이터를 미리 정의된 Template에 넣어 Html을 그려서 클라이언트에 전달해주는 역할"

 

라고 많은 블로그에서 정의되어 있다. 실제로 HTML 코드에서 어떻게 사용되냐면,
(참고로 Thymeleaf 라는 서버 사이드 템플릿 엔진을 사용하였다.)

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Template Example</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
	<p th:text="'당신의 이름은 ' + ${name}" ></p>
</body>
</html>

<p> 태그 부분을 보면 ${name} 처럼 쓰여진 부분이 있는데,
이 부분이 바로 데이터에 따라 동적으로 변화되는 부분이다.

 

예를 들어, Model 에 name(key):jaeyoung(value) 라고 저장되어 있다면

당신의 이름은 jaeyoung

이라는 결과가 나올 것이다!

 

정리

김영한 강사님의 '스프링 입문' 강의를 들으며 스프링 공부를 하고 있는데
교재의 한 부분에 사진을 가져와서 설명을 한 번 해보려고 한다!

 

1️⃣ localhost 링크 뒤에 hello-mvc 라는 링크를 붙이면,
2️⃣ "Controller" 안에 @GetMapping 되어 있는 메소드에 연결되고,
3️⃣ "Model" 안에 name(key):spring(value) 형태로 담아서 hello-template.html 로 넘기면,
4️⃣ hello-template.html 라는 "View" 에 맞춰서 넘겨진 데이터들이 들어가게 되고,
5️⃣ "템플릿 엔진" 에 의해 변환된 HTML이 웹 브라우저로 넘어가게 된다!

 
저작자표시 (새창열림)

'백엔드 공부' 카테고리의 다른 글

[스프링 입문] Controller, Service, Repository  (0) 2022.12.06
[스프링 입문] API  (0) 2022.12.05
[스프링 입문] 프로젝트 환경설정  (0) 2022.12.05
[Meteor] parent 함수의 개념 / Meteor 서버 상에서의 보안  (0) 2020.02.21
[Meteor] HTML에서 Session의 사용  (0) 2020.02.17
'백엔드 공부' Related Articles more
Comments