Template Engine 과 Restful API, MVC 란 ?

⚙️ Template Engine

템플릿 엔진은 동적인 웹 페이지를 생성하기 위해 사용되는 도구로, 웹 애플리케이션에서 데이터와 표현을 분리하고, 템플릿을 사용하여 웹 페이지를 동적으로 생성하는 데 사용됩니다. 이를 통해 개발자는 비즈니스 로직을 작성하고, 디자이너는 디자인을 담당할 수 있으며, 결과적으로 웹 애플리케이션의 유지 보수성과 재사용성을 향상시킵니다. 템플릿 엔진은 다양한 문법과 기능을 제공하여 템플릿 작성을 더욱 효율적으로 만들어주며, 최적화된 렌더링 알고리즘을 사용하여 빠른 웹 페이지 생성을 지원합니다.

 

저번글에서 정적컨텐츠에 대해 간단하게 다루었는데.

 

Template Engine 은 정적컨텐츠랑 관련이 있습니다.

 

https://kingmusung.tistory.com/27

Spring 기본 세팅 및 기본 프로젝트 구조 파악

 

위 글을 다시 인용하여 동적컨텐츠에대해 다시 상기하자면.

 

📗 resource/templates

동적파일들을 저장하는 디렉터리고. 동적파일이라 하면 클라이언트의 요청에따라 파일 구조가 바뀔 수 있는파일을 이야기 하는데. 예를 들어 웹페이지의 내용이 데이터 베이스에서 가지고 와야하는 정보를 포함한다면 데이터 베이스의 어떤 정보가 올지모른다 이러한 이유로 정적파일을 이용하여 미리 만들어놓을 수 없기 떄문에 이런 경우 동적파일을 사용하는것이다.

---

 

즉 동적컨텐츠는 클라이언트의 요청에 따라 파일의 구조가 바뀔 수 있는데,

 

일반적으로 HTML코드를 사용하여 "손님" 이라는 문구를 출력하고 싶으면 아래와 같이 할 것 입니다.

 

<p>손님</p>

 

이 부분은 고정이 되어 있으므로. 정적인 파일입니다

 

손님이라는 문자 대신 클라이언트의 요청에 따라 동적으로 변화를 주고싶다면? -> 템플릿엔진을 사용!!

 

 

Template Engine을 사용한 .HTML(예시)

//생략
<p th:text=" ${data}" + '님' </p>
//생략

 

일반적인 HTML코드와 조금 다른점이 있는데, ${data} 이 부분은 백엔드로부터 값을 전달받음으로 수시로 변할 수 있습니다.

 

예시로 ${data}, data="손" 이라는 변수가 들어왔고, HTML 코드를 실행시켜보면 아래와 같은 화면이 나옵니다.

 

그럼 이 파일은 무엇이다? 맞습니다. 동적컨텐츠 입니다. 템플릿엔진을 사용하여 HTML파일을 동적으로 바꾼겁니다.

 

템플릿엔진에는 여러가지가 있지만. 영한님 강의에서는 Thymeleaf를 사용 합니다.

 

Template Engine의 특징

데이터와 렌더링의 분리: 

템플릿 엔진을 사용하면 데이터와 표현 로직이 분리됩니다. 이는 개발자가 비즈니스 로직을 작성하고 디자이너가 디자인을 담당하는 데 도움이 됩니다. 

재사용성: 

템플릿 엔진은 템플릿을 사용하여 여러 페이지를 생성할 수 있습니다. 이는 코드의 재사용성을 높이고 유지 보수를 용이하게 만듭니다. 

동적 콘텐츠 생성: 

템플릿 엔진은 동적 콘텐츠를 생성하는 데 사용됩니다. 예를 들어 사용자가 제공한 데이터를 바탕으로 웹 페이지를 동적으로 생성하거나 다양한 조건에 따라 다른 콘텐츠를 표시할 수 있습니다. 템플릿 상속 및 레이아웃 관리: 많은 템플릿 엔진은 템플릿 상속을 지원하여 레이아웃을 쉽게 관리할 수 있습니다. 이를 통해 웹 애플리케이션의 일관된 디자인을 유지할 수 있습니다. 

---

👨‍👩‍👦 Backend에서 Template Engine 과 상호작용

 

그러면 템플릿엔진에 변수는 어떻게 넘어오는거고 어떤식으로 진행이 되는지 요약을 해보겠습니다.

 

Model

Model model 이라는 부분을 앞으로 보게돨텐데 간략하게 요약을 하자면,

 

" data = "손" " 이라고 백엔드에서 값을 넣어주면 이걸 그냥 템플릿엔진으로 뱉어주는게 아니라 model 의 힘을 빌려서 전달해줍니다.

 

model이라는 객체를 트럭이라 생각하고, 트럭에 데이터들을 싣고 템플릿엔진에 전달해준다하고 생각하면 좋을것같습니다.

Model model{
    data="손"
}

(이해를 위한 예시일 뿐이며 실제로 이런 형태로 전달되지는 않습니다)

---

 

전달하는 방법들

@ResponseBody 라는 어노테이션의 유무에 따라 전달하는 방법이 달라집니다.

 

기본적으로

@ResponseBody라는 어노테이션이 없으면, return 값에 있는 경로의 템플릿파일을 찾아서 이동을 하게 되고

@ResponseBody라는 어노테이션이 존재하면, HTTP Body 부분에 데이터를 넣어서 클라이언트에게 보여주게 됩니다.

 

@ResponseBody 존재하지 않음.

return "hello";

 

이경우는 hello.html이라는 파일을 찾아서 실행을 시키고 클라이언트에게 보여주게 됩니다.

 

기본적으로 어노테이션이 없으면, static -> resource 순으로 탐색을 해서 일치하는 파일을 보여줍니다.

 

@ResponseBody 존재

두가지 경우 모두 Response Body 부분에 데이터를 그대로 넣어서 사용자에게 보여주는데.

return "손"+ name; 
// name ="님"

"손님" 이라는 데이터를 그대로 보내 줄 것 이고

return diary;
//Diary diary, 객체를 반환하는거임

위 경우는 객체를 반환하게 되는데 이 경우는 기본적으로 Json 형식으로 데이터를 반환하게 됩니다.

(장고에서는 시리얼라이저를 통해 Json형태로 직렬화를 하고 응답을 보내주었는데, 스프링은 자동으로 변환을 해주니 너무 편한 것 같다.)

---

🌐 MVC 패턴

Model View Controller 의 약자를 MVC패턴이라고 하는데, 장고로 개발을 하던, 스프링으로 하던 무의식 중에도 이 방식으로 개발을 하고 있었다.

 

모델(Model): 

모델은 데이터를 담당해요. 예를 들어, 만약 우리가 어떤 게임을 만든다면, 게임의 캐릭터나 아이템과 같은 데이터가 모델에 해당합니다. 모델은 데이터를 정리하고 관리하는 역할을 합니다. 

뷰(View):

 뷰는 사용자가 보는 화면을 만들어요. 예를 들어, 우리가 만든 게임에서는 캐릭터가 화면에 어떻게 나타나는지, 배경은 무엇인지 등을 뷰가 결정합니다.

컨트롤러(Controller): 

컨트롤러는 데이터와 화면을 연결해 주는 역할을 합니다. 사용자가 어떤 행동을 할 때(예: 버튼을 클릭하거나 키를 누를 때), 그에 맞는 데이터를 찾아 모델에게 요청하고, 그 데이터를 뷰에게 전달하여 화면에 보여주게 됩니다.

 

MVC패턴을 모른상태에서도 자연스럽게 MVC패턴들을 사용하고 있었다.

(컨트롤러를 사용하여 model에 데이터를 싣고 뷰에 전달을하는과정)

 

---

📟 Restful API

 

RESTful API(Representational State Transferful API)는 웹 애플리케이션에서 자원을 표현하고 그 상태를 전송하기 위한 아키텍처

스타일입니다. RESTful API는 HTTP를 기반으로 하며, 클라이언트와 서버 간의 통신을 위한 규칙을 정의합니다.

 

자원(RESOURCE): 모든 자원은 고유한 URI(Uniform Resource Identifier)로 표현됩니다.

API를 요청할떄 /diaries, /calendar, /calendar/links 를 사용하는 것 처럼, 필요한 자원을 얻기위한 행위를 URL로 요청을 한다는 뜻이다.

 

행위(VERB): HTTP 메서드를 사용하여 자원에 대한 행위를 정의합니다.

GET(조회), POST(생성), PUT(수정), DELETE(삭제)가 있습니다.

 

표현(REPRESENTATIONS): 클라이언트와 서버 간의 데이터 교환은 주로 JSON 혹은 XML 형식의 데이터로 이루어집니다. 이러한 데이터 형식을 사용하여 자원의 상태를 전송합니다.

주로 요즘에는 Json 형식의 반환값을 사용한다, tmi로는 자바에서는 Jackson이라는 라이브러리를 사용하여 Json형식으로 파싱을 해준다.

 

상태(Stateless): RESTful API는 상태를 저장하지 않고, 각 요청은 클라이언트의 전체 정보를 포함하고 있어야 합니다. 이를 통해 서버는 클라이언트의 상태를 알 필요가 없으며, 각 요청은 독립적으로 처리될 수 있습니다.

즉 상태유지를 하고싶다면 세션,쿠키등을 사용하여 상태유지를 해야합니다.

 

연결(Uniform Interface): RESTful API는 통일된 인터페이스를 제공하여 서비스의 확장성을 향상시킵니다. 이를 통해 클라이언트와 서버 간의 상호작용을 단순화하고, 서비스의 변경을 용이하게 합니다.