1. 머스테치 소개
머스테치는 수많은 언어를 지원하는 가장 심플한 템플릿 엔진이다.
- 문법이 다른 템플릿 엔진보다 심플하다.
- 로직 코드를 사용할 수 없어 View의 역할과 서버의 역할이 명확하게 분리된다.
- 하나의 문법으로 클라이언트/서버 템플릿을 모두 사용 가능하다.
라는 장점이 있다.
2. 머스테치 설치
설치는 플러그인을 다운로드 해주고
머스테치 스타터 의존성을 build.gradle에 등록해준다.
build.gradle
implementation('org.springframework.boot:spring-boot-starter-mustache')3. 기본 페이지 만들기
머스테치 파일의 위치는 src/main/resource/templates에 위치한다. 해당 경로에 index.mustache 파일을 생성해주고 다음 코드를 작성해준다.
index.mustache
<!DOCTYPE html>
<html lang="en">
<head>
<title>스프링 부트 웹 서비스</title>
<meta http-equiv="Content-Type" content="text/html"; charset="UTF-8"/>
</head>
<body>
<h1>스프링 부트로 시작하는 웹 서비스</h1>
</body>
</html>이제 url 매핑을 해줘야하는데 매핑은 controller에서 진행해준다.
IndexController를 생성해주고 다음 코드를 작성해준다.
IndexController
@Controller
public class IndexController {
@GetMapping("/")
public String index(){
return "index";
}
}코드가 완성되었으니 이번에도 테스트 코드를 작성해서 검증을 진행한다.
IndexControllerTest
@RunWith(SpringRunner.class)
@SpringBootTest(webEnvironment = RANDOM_PORT)
public class IndexControllerTest {
@Autowired
private TestRestTemplate restTemplate;
@Test
public void 메인페이지_로딩(){
//when
String body = this.restTemplate.getForObject("/", String.class);
//then
assertThat(body).contains("스프링 부트로 시작하는 웹 서비스");
}
}
결과는 이렇게 정상적으로 출력되는 것을 확인할 수 있다.
실제 화면에서도 잘 나오는지 확인하기 위해
http://localhost:8080 에 접속해보면
이렇게 만든 화면이 정상적으로 출력되는 것을 확인할 수 있다.
4.게시글 등록 페이지 만들기
오픈 소스인 부트스트랩을 이용해서 페이즈를 만들어 볼건데
매번 화면에 부트스트랩을 이용하기 위해 해당 라이브러리를 추가하는 일은 굉장히 번거롭다.
그래서 header, footer를 만들어서 해당 파일에 레이아웃을 만들어 추가한다.
header.mustache
<!DOCTYPE HTML>
<html>
<head>
<title>스프링부트 웹서비스</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>footer.mustache
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>작성한 레이아웃을 index.mustache에 추가해주기 위해 코드를 수정해준다.
index.mustache
{{>layout/header}}
<h1>스프링부트로 시작하는 웹 서비스 Ver.2</h1>
<div class="col-md-12">
<div class="row">
<div class="col-md-6">
<a href="/posts/save" role="button" class="btn btn-primary">글 등록</a>
</div>
</div>
</div>
{{>layout/footer}}- {{>layout/header}} : {{>}}는 현재 머스테치 파일을 기준으로 다른 파일을 가져온다.
-> a 태그로 등록 버튼을 누르면 이동하는 페이지 주소를 "/posts/save"로 지정해주었다.
이 주소에 해당하는 컨트롤러를 생성해줘야하는데 페이지에 관련된 컨트롤러는 IndexController를 사용해준다.
IndexController
@GetMapping("/posts/save")
public String postsSave(){
return "posts-save";
}/posts/save가 호출되면 출력할 수 있는 posts-save.mustache 파일도 생성해준다.
posts-save.mustache
{{>layout/header}}
<h1>게시글 등록</h1>
<div class="col-md-12">
<div class="col-md-4">
<form>
<div class="form-group">
<label for="title">제목</label>
<input type="text" class="form-control" id="title" placeholder="제목을 입력하세요">
</div>
<div class="form-group">
<label for="author"> 작성자 </label>
<input type="text" class="form-control" id="author" placeholder="작성자를 입력하세요">
</div>
<div class="form-group">
<label for="content"> 내용 </label>
<textarea class="form-control" id="content" placeholder="내용을 입력하세요"></textarea>
</div>
</form>
<a href="/" role="button" class="btn btn-secondary">취소</a>
<button type="button" class="btn btn-primary" id="btn-save">등록</button>
</div>
</div>
{{>layout/footer}}페이지가 모두 완성이 되었으니 직접 접속해서 확인을 해볼 것이다.
Application의 main 메소드를 실행시켜주면 되는데
나는 여기서 이슈가 생겼다.
아무리 실행을 시켜도 실행이 되질 않았는데
로그를 파악해보니
The Tomcat connector configured to listen on port 8080 failed to start. The port may already be in use or the connector may be misconfigured.이렇게 이미 포트를 사용하고 있어서 실행이 불가하다라는 에러 로그가 나오고 있었다.
아마 인텔리제이 업데이트를 위해 정상적인 방법으로 종료하지 않고 강제로 종료해서 이러한 에러가 발생한 것 같다.
나는 맥을 사용하고 있기에
터미널에 접속해서
lsof -i:사용하고 있는 포트번호(나는 8080)
kill -9 pid번호 (command 옆에 있는 번호를 입력해주었다.)
다음과 같은 방법으로 8080 포트를 죽이는 방법을 사용하고
다시 run을 눌러서 접속하는 방법을 통해서 해결했다.
다시 등록 버튼을 눌러서 페이지를 확인해보니
이렇게 정상적으로 출력되는 것을 확인할 수 있었다.
