template engine 이란? Spring과 Spring Boot의 차이

Spring

template engine 이란? Spring과 Spring Boot의 차이

hwlee9905 2023. 12. 26. 01:15

Spring

Enterprise 용
Application Framework
Opensoruce

Spring Boot

Spring은 기존 백엔드 기술의 복잡성을 줄이기 위해 나온 framework이지만 여전히 초반 설정 부분이 매우 복잡하고 어려웠다. 그래서 나온것이 Spring Boot이다 Spring Boot는 Spring으로 애플리케이션을 만들 때에 필요한 설정을 간편하게 처리해주는 별도의 프레임워크이다.

필자도 처음에 Spring과 Spring Boot가 이름이 비슷하여 굉장히 헷갈렸는데(java와 javascript도 헷갈렸던 것 처럼..), 이에 대해 차이점을 분명히짚고 가야한다. 밀접한 관련이 있지만 결국엔 Spring Boot는 Spring을 기반으로 하고 Spring Boot는 Spring을 쉽게 쓰기 위한 framework다 라는 것 정도만 일단 알고가자.

https://start.spring.io/ 에 들어가 Dependencies로 Spring web과 Thymeleaf를 설정하고 generate 해서 나오는 zip파일의 build.gradle을 Intellij로 open해보자 어렵지 않게 Spring을 시작할 수 있다.

Project로 Gradle과 Maven을 선택할 수 있는데

Gradle은 뭐고 Maven은 뭘까?

Gradle

Gradle은 CI/CD (Continuous Integration/Continuous Delivery) 를 위한 task(목차로 소개하는)들을 자동화 시켜주는 build tool이다 여기서 CI란, 형상관리 툴을 이용하여 여러 개발자가 동시에 개발을 할때 새로운 코드 변경사항이 정기적으로 build, test되어 Shared Repository에 통합하는 것을 얘기하고, CD는 CI가 사용자에게까지 전달되는 것을 의미한다.(개발자의 변경사항이 사용자의 환경까지 전달되는 것)

Complie
Test
Packaging
Deploy & Run

Packaging의 경우 Spring에서는 Spring code를 packaging해서 jar와 war 파일로 만들어준다(배포 가능한 형식으로 묶는 과정).

Mavan도 비슷한 일을 하지만 Gradle은 그루비(Groovy) DSL(Domain Specific Language) 또는 Kotlin DSL을 사용하여 빌드 스크립트를 작성하고 Maven은 xml형식의 pom.xml 파일을 사용한다는 것만 알아두자

MVC

Spirng framework를 사용해 개발을 할때는 MVC 패턴을 많이 사용 하는데,

MVC 패턴은 애플리케이션을 개발할 때 사용하는 디자인 패턴이다.

애플리케이션의 개발 영역을 MVC(Model, View, Controller)로 구분하여 각 역할에 맞게 코드를 작성하는 개발 방식이다.

Model은 쉽게 말해 data인데, Client의 reqeust를 받아 response로 돌려주는 data를 Model이라고 한다.

클라이언트의 요청사항을 구현하기 위한 영역을 Service layer이라고 하고 요청사항을 처리하기 위해 실제로 구현한 코드를 business logic이라고 한다.

View는 Model을 이용하여 웹 브라우저등에 보여주기 위한 화면에 보이는 리소스를 제공하는 역할을 한다. html과 같은 페이지를 보내주는 역할을 한다고 보면 된다.

Controller 는 Model과 View의 interface와 같은 역할을 하는 부분이다. 비즈니스 로직을 거쳐 Model이 만들어지면 이 Model 을 View 에 보내주는 역할을 한다.

정적페이지와 Template Engine

개발을 처음 시작했을때 html과 css를 배워봤을텐데, 그때 한번쯤은 만들어 보는 것이 자기소개 웹페이지다. 그냥 자기이름이나 소개같은것이 써있는 웹페이지를 만들어 보는 것인데, 이것이 정적페이지의 예이다.

사용자는 서버에 저장된 웹페이지가 변경되지 않는한 고정된 페이지를 보게된다.

정적 페이지에서는 클라이언트 측(웹 브라우저)에서 콘텐츠를 변경할 수 없다. 예를 들어, 자기소개 페이지에서 이름을 변경하더라도 이 변경사항은 웹 브라우저에서만 일시적으로 반영되며, 새로고침하면 서버에 저장된 원래 페이지가 다시 로드된다.

사용자의 요청에 따라 달라지는 동적인 웹페이지를 만들기 위해서 사용하는 것이 Template Engine이다

Template Engine은 템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 합성하여 결과 문서를 출력하는 소프트웨어 또는 소프트웨어 컴포넌트를 말한다. 특히, 웹 템플릿 엔진은 웹 문서가 출력되는 템플릿 엔진을 말한다.

서버 사이드 Template Engine은 서버에서 DB 혹은 API에서 가져온 데이터를 미리 정의된 템플릿(Template)에 넣어 HTML 문서를 만들어 클라이언트에 전달해주는 역할을 한다.

즉, HTML 코드에서 고정적으로 사용되는 부분은 템플릿으로 만들어두고 동적으로 생성되는 부분만 템플릿의 특정 부분에 끼워 넣는 방식으로 동작한다.
이러한 서버 사이드 템플릿 엔진으로는 JSP, Thymeleaf, Velocity, Freemarker 등이 있다.

이제 Spring Boot에서 Dependency로 추가한 Thymeleaf 를 활용해보자.

Welcome Page 만들기

자기소개 웹페이지와 같은 정적 페이지를 Spring에서 띄우기 위해 resources - static에서 index.html 파일을 만들어보자

이것이 스프링 부트가 제공하는 Welcome page 기능이다.

Run을 하고 웹 브라우저 주소창에서 http://localhost:{portnumber}를 입력하여 index.html 화면이 나오는지 확인해보자

동적 페이지를 위한 Thymeleaf 활용

hello/hellospring/HelloController

@Controller
public class HelloController {
     @GetMapping("hello")
     public String hello(Model model) {
         model.addAttribute("data", "hello!!");
         return "hello";
     }
}

resources/templates/hello.html

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>Hello</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>
    <body>
        <p th:text="'안녕하세요. ' + ${data}" >안녕하세요. 손님</p>
    </body>
</html>

MVC 패턴을 활용하여 동적인 웹페이지를 만들기 위한 예제이다. 또한 html 코드는 Thymeleaf(템플릿엔진)를 활용한 html 코드이다.

일단 @GetMapping의 parameter는 서버의 리소스를 조회하기 위한 경로변수이다 주소에 localhost:portnumber/(parameter)를 입력하면 hello.html이 나올것이다.

위의 코드를 해석하자면 다음과 같다 localhost:portnumber/(parameter)로 request가 들어오면 hello method를 실행하고

model의 key로 'data', value로 'hello!' 속성값으로 추가한 다음 hello.html을 response 할 것이다.

그러면 Spring이 자동으로 src/main/resouces의 templates에서 hello라는 이름의 View를 찾아서 반환해 줄 것이다.

일어나는 일의 순서는 다음과 같다.

클라이언트(웹 브라우저 등)가 "/hello" 경로로 HTTP GET 요청을 한다.
해당 요청을 처리하기 위해 HelloController 클래스의 hello 메서드가 실행된다.
hello 메서드는 Model 객체를 매개변수로 받아와서 "data"라는 이름의 속성에 "hello!!"라는 값을 추가한다.
hello 메서드는 문자열 "hello"을 반환한다.
Spring은 반환된 문자열 "hello"를 뷰의 이름으로 인식하고, 설정된 템플릿 엔진(예: Thymeleaf)을 사용하여 해당 뷰를 렌더링한다.
뷰 템플릿(hello.html)에서는 Thymeleaf의 문법을 사용하여 ${data}를 통해 "hello!!" 값을 가져와서 "안녕하세요. 손님" 문자열을 생성한다.
최종적으로 클라이언트에게는 "안녕하세요. 손님" 문자열이 포함된 HTML이 응답으로 전달된다.

그림과 같이 static에 들어가는 정적 contents들은 따로 controller가 없어도 알아서 찾아준다.

정확히는 스프링 컨테이너에 해당 이름을 사용하는(GetMapping 해주는) 컨트롤러가 없다면 static에서 찾도록 설계되어있다.

컨트롤러에서 리턴 값으로 문자를 반환하면 viewResolver가 화면을 찾아서 처리한다.

참고: spring-boot-devtools 라이브러리를 추가하면, html 파일을 컴파일만 해주면 서버 재시작 없이 View 파일 변경이 가능하다.

API방식을 활용한 ResponseBody 문자 반환

지금까지 MVC패턴을 활용해 view를 클라이언트에게 response 해보았는데, 뭔가 불필요하다고 생각이 들 것이다. 왜냐하면 서버에서 반환하는 데이터는 사실 model에 들어있는 hello!! 값인데 이 model을 포함한 많은 html코드, 그러니까 view자체를 반환하는 것이 마음에 들지 않는다면 data만 반환할 수 있다. 이것을 API 방식이라고 한다.

@Controller
public class HelloController {
    @GetMapping("hello-string")
    @ResponseBody
    public String helloString(@RequestParam("name") String name) {
        return "hello " + name;
    }
}

@ResponeBody annotation을 추가해주자, 이러면 view를 반환하는 것이아닌 data만 반환 할 수 있다.

또한, RequestParam은 사용자가 url에 포함하여 서버에 값을 보내줄 수 있게 한다.

http://localhost:8080/hello-string?name=spring 이런식으로 웹 브라우저에서 요청한다면 hello spring이 뜨는 것을 볼 수 있을것이다. 또한 페이지 소스를 보면,

API 방식이므로 data만 반환 했기 때문에 페이지 소스에서도 html 코드를 찾을 수 없는 것을 볼 수 있다.

출처

https://ittrue.tistory.com/234

[Spring MVC] 스프링 MVC란 무엇인가? - 스프링 MVC 구조 이해

본 내용은 온라인 강의 사이트 인프런의 김영한 님의 강의 내용이 포함되어 있습니다. '스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술' 스프링 MVC 1편 - 백엔드 웹 개발 핵심 기술 - 인프런 | 강의 웹

ittrue.tistory.com

https://kotlinworld.com/311

Gradle이란 무엇인가? 하는 일, 강점, 빌드 속도가 빠른 이유에 대해 알아보자.

Gradle은 무엇을 하는가? Gradle은 CI/CD를 위한 아래 Task들을 자동화 시켜주는 Build Tool이다. Compile Test Packaging Deploy & Run 안드로이드를 기준으로 Compile은 Kotlin 파일이나 Java파일을 바이트 코드로 변환

kotlinworld.com

https://www.inflearn.com/course/%EC%8A%A4%ED%94%84%EB%A7%81-%EC%9E%85%EB%AC%B8-%EC%8A%A4%ED%94%84%EB%A7%81%EB%B6%80%ED%8A%B8/dashboard

[지금 무료] 스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술 강의 - 인프런

스프링 입문자가 예제를 만들어가면서 스프링 웹 애플리케이션 개발 전반을 빠르게 학습할 수 있습니다., 스프링 학습 첫 길잡이! 개발 공부의 길을 잃지 않도록 도와드립니다. 📣 확인해주세

www.inflearn.com

https://artist-developer.tistory.com/24

CI/CD란 무엇인가 (Feat. DevOps 엔지니어)

안녕하세요. 개발자의 용어를 쉽고 명확하게 설명해드리는 개발자 김모씨입니다. CI/CD ?! 개발자로 밥먹고 사시는 분들이시라면, 혹은 IT서비스 업계에 종사하시는 분들이라면, 한 번 쯤은 들어

artist-developer.tistory.com

https://code-lab1.tistory.com/211

[Web] 템플릿 엔진, JSP, Thymeleaf란? 서버 사이드 템플릿 엔진 vs 클라이언트 사이드 템플릿 엔진

템플릿 엔진이란? 템플릿 엔진은 템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 합성하여 결과 문서를 출력하는 소프트웨어 또는 소프트웨어 컴포넌트를 말한다. 특히, 웹 템플릿 엔진은

code-lab1.tistory.com

https://coding-nyan.tistory.com/71

[spring] @Controller와 @GetMapping

이번에는 mapping을 통해서 간단한 html 페이지를 보여주도록 하겠습니다. 처리 과정 일반적으로 사용자의 요청을 처리하는 과정은 다음 그림과 같습니다. 우리는 매핑을 통해 Controller가 특정 View

coding-nyan.tistory.com