Back-End/스프링부트와 AWS로 구현하는 웹서비스

[스프링][Spring] - 7. 서버 템플릿 엔진과 기본 화면 구현

얄루몬 2022. 2. 3. 00:59

📖본 포스팅은 '스프링부트와 aws로 혼자 구현하는 웹서비스 - 이동욱 저자'를 보고 포스팅 되었습니다. 


1. 서버 템플릿 엔진과 머스테치 소개

  • 템플릿 엔진이란?
    • 지정된 템플릿 양식과 데이터가 합쳐져 HTML 문서를 출력하는 소프트웨어를 이야기합니다. 

 

 

 

 

2. 서버 템플릿 엔진과 클라이언트 템플릿 엔진

https://imgzon.tistory.com/97

 

10. 서버/클라이언트 템플릿 엔진의 차이, 머스테치

해당 게시물들은 이동욱 저자님의 "스프링 부트와 AWS로 혼자 구현하는 웹 서비스"를 공부하며 기록한 것입니다.  이번 게시물에서는 템플릿 엔진의 종류 및 서버 템플릿 엔진과 클라이언트 템

imgzon.tistory.com

자바로 쓸 수 있는 템플릿 엔진 중에 머스테치가 있고 이는 간단하게 웹 화면을 구현할 수 있는 서버 템플릿 엔진(JS를 사용할 땐 클라이언트 템플릿 엔진으로 사용한다.)이다. 

 

 

 

3. 기본 페이지 만들기

[build.gradle에 머스테치 사용을 위한 의존성 추가]

    //머스태치 의존성 추가
   implementation('org.springframework.boot:spring-boot-starter-mustache')
  • 이는 플러그인 설치를 했다는 전제로 시작합니다.(설치하지 않았다면 머스테치를 마켓플레이스에서 설치해주세요.)
  • 의존성 추가로 사용할 수 있는 플러그인은 스프링 부트에서 공식지원하는 템플릿 엔진이기에 가능한 일이다.


[디렉토리 현황]

 

[index.mustache 코드]

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UFT-8" />
</head>
<body>
    <h1>스프링 부트로 시작하는 웹 서비스</h1>
</body>
</html>

 

 

 

4. 테스트 코드

package com.yeomyaloo.book.springboot.web.web;

import org.junit.jupiter.api.Test;
import org.junit.jupiter.api.extension.ExtendWith;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.boot.test.web.client.TestRestTemplate;
import org.springframework.test.context.junit.jupiter.SpringExtension;

import static org.assertj.core.api.Assertions.assertThat;
import static org.junit.jupiter.api.Assertions.*;


@ExtendWith(SpringExtension.class)
@SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.RANDOM_PORT)
class IndexControllerTest {

    @Autowired
    private TestRestTemplate restTemplate;

    @Test
    public void 메인페이지_로딩(){
        //when
        String body = this.restTemplate.getForObject("/",String.class);

        //then
        assertThat(body).contains("스프링 부트로 시작하는 웹 서비스");
    }

}

  • 테스트는 성공적입니다. 그러나 오류 구문 이미지를 올린 이유는 인텔리제이가 혹시라도 다른 부분이 있다면 저렇게 친절하게 보여준다는것을 보여주기 위해 올렸습니다.
  • HTML도 결국 규칙이 있는 문자열이기 때문에 우리가 찾는 "스프링 부트로 시작하는 웹 서비스"가 있는지를 찾아달라고 요청하고 우리는 HTML에 이를 포함하고 있기에 성공으로 Test가 끝나게 됩니다.

 

 

 

5. 브라우저 확인

브라우저를 통해 확인하기 위해서 Main을 실행해준 뒤 localhost:/8080으로 접속해주면 위의 화면과 같이 실행이 됩니다.

 

 

 

6. 정리

[템플릿 엔진이란?]
템플릿 엔진 우선 웹 개발에 있어 템플릿 엔진이란, 지정된 템플릿 양식과 데이터가 합쳐져 HTML문서를 출력하는 소프트웨어를 이야기한다. 쉽게 이야기해서, 웹사이트 화면을 어떤 형태로 만들지 도와주는 양식이라고 생각하면 된다

📌출처: https://imgzon.tistory.com/97

 

[서버 템플릿 엔진과 클라이언트 템플릿 엔진]

서버 템플릿 엔진은 Java에서 주로 사용되는 방식으로 서버에서 Java 코드 생성 후 HTML로 변환해서 브라우저로 전달하는 방식입니다.

클라이언트 템플릿 엔진은 JS에서 사용하고 서버가 아닌 브라우저에서 화면을 생성합니다. SPA라고 불리는 이 방식이 클라이언트 템플릿 엔진으로 만들어지고 서버에서 생성하지 않으니 한 번에 불러 온 뒤 화면이 바뀔 때 그때마다 가져온 데이터를 보여주는 방식을 진행하고 있습니다.

 

다음 포스팅에서는 계속해서 화면들을 만들고 이때 그냥 만들면 화면 자체가 단조롭고 심심하니 Bootstrap이란 프레임워크의 도움을 받아 진행하도록 하겠습니다.