14. 스프링부트와 AWS - 머스테치 설정하기 및 index 만들기

지금까지는 기본적인 데이터 베이스 읽기, 쓰기, 수정하기 기능을 만들어봤다.

 

이제는 해당 기능을 바탕으로 화면 구현을 하도록 하자.

템플릿 엔진이란?

특정 템플릿 양식과 데이터 베이스에서 불러온 데이터를 합성해 결과물을 만드는 소프트웨어.

템플릿 엔진의 종류

크게 서버 사이드 템플릿 엔진과 클라이언트 사이드 템플릿 엔진으로 나뉜다.

 

서버 템플릿 엔진은 서버에서 결과물을 만들어서 브라우저를 통해 사용자에게 전달한다.

 

반면 클라이언트 템플릿 엔진은 서버에서는 Json, xml 형식의 데이터만 브라우저에 전달한다.

 

그리고 브라우저에서 고객이 요청한 내용대로 결과물을 만들어서 전달하는 역할을 한다.

 

흔히 스프링과 함께 배우는 JSP같은 경우는 서버 템플릿 엔진으로 볼 수 있다.

머스테치란?

머스테치는 템플릿 엔진의 일종으로서 서버 템플릿, 클라이언트 템플릿 양쪽 모두 이용이 가능하다.

 

Java에서 쓸 때는 서버 템플릿으로 JavaScript에서 쓸 때는 클라이언트 템플릿으로 이용 가능하다.

 

문법이 심플하고 인텔리제이 커뮤니티 버전에서도 사용이 가능하다.

머스테치 플러그인 설치하기

 

우선 인텔리제이 화면에서 "Ctrl+Shift+A"를 눌러준다.

 

검색창에 "plugins"를 입력한다.

 

 

 

Plugins가 뜨면 검색어에 "mustache"를 치고 위에 선택된 플러그인을 깔아준다.

 

플러그인 설치가 완료되면 인텔리제이를 재시작해준다.

 

 

 

 

재시작한 후에는 build.gradle로 이동해서 위와 같이 의존성을 추가해준다.

 

 

 

의존성을 추가한 다음은 "/src/main/resources" 경로에 templates 폴더를 추가해준다.

 

여기에 mustache 파일을 넣어두면 스프링 부트가 이를 인식한다.

index페이지 만들기 및 실행하기

 

 

위와 같이 템플릿 폴더 안에 index.mustache파일을 만들어준다.

 

정상적으로 만들었다면 콧수염 모양의 아이콘을 가진 파일이 생성된 것을 확인할 수 있다.

 

 

 

만들어진 index 파일에 위와 같이 코드를 입력한다.

 

 

 

코드를 입력했으면 이제 "/src/main/java/com/my/practice00/springboot/controller/"

 

경로에 IndexController 클래스를 생성한다.

 

 

 

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class IndexController {

    @GetMapping("/")
    public String index(){
        return "index";
    }
}

 

해당 클래스에는 위와 같이 코드를 입력한다.

 

가장 기본 URL로 들어오면 위에서 만든 index.mustache 파일이 보이도록 설정한 내용이다.

 

index() 메서드를 보면 문자열(String)으로 된 "index"란 단어를 반환하는 것을 볼 수 있다.

 

이것은 우리가 앞서 만든 템플릿 폴더 경로에 있는 "index.mustache"란 파일을 실행하란 의미다.

IndexControllerTest 만들기

이제 기본적인 것들은 모두 만들었으니 실제로 화면에 나타나는지 테스트를 해보자

 

 

"/src/test/java/com/my/practice00/springboot/controller" 폴더에 "IndexControllerTest"를 만든다.

 

 

 

import org.junit.Test;
import org.junit.runner.RunWith;
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.junit4.SpringRunner;

import static org.assertj.core.api.Assertions.assertThat;
import static org.springframework.boot.test.context.SpringBootTest.WebEnvironment.RANDOM_PORT;

@RunWith(SpringRunner.class)
@SpringBootTest(webEnvironment = RANDOM_PORT)
public class IndexControllerTest {

    @Autowired
    private TestRestTemplate restTemplate;

    @Test
    public void main_로딩(){

        String body = this.restTemplate.getForObject("/", String.class);

        assertThat(body).contains("AWS+스프링부트 게시판");

    }

}

 

만든 클래스 파일에 위와 같이 코드를 입력한다.

 

 

 

참고로 assertThat(body).contains("");에서 contains 안에 들어갈 말은

 

위와 같이 이전에 index.musatche에 입력한 제목을 넣으면 된다.

 

 

 

이대로 테스트하면 성공한 결과물을 볼 수 있다.

실제 브라우저 확인 화면 보기

 

 

이제 Application 클래스로 돌아가서 main 메서드를 실행한다.

 

 

메인 메서드가 실행되고 브라우저로 간다.

 

주소창에 "http://localhost:8080"를 입력하면 이전에 만든 mustache화면을 볼 수 있다.