공통 코드
게시글 등록 화면에 앞서 부트스트랩과 제이쿼리 라이브러리를 추가하겠다.
이 라이브러리들은 mustache 화면 어디서나 들어가는 공통 코드들이니 별도로 레이아웃 파일을 추가하겠다.
본 프로젝트는 간단한 규모이니 외부 CDN을 사용한다.
하지만 실무에서는 이 방법을 사용하면 CDN 서비스하는 곳에 문제 생기면 CDN을 사용한 화면에서도 덩달아 문제가 생겨버리니 잘 쓰지 않고, 직접 라이브러리를 받아서 사용한다.
src/main/resources/templates/layout에 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>
위 코드를 보면 header에 css, footer에 js 파일이 추가되었다.
html은 기본적으로 위에서 아래로 코드가 실행되므로 head가 다 실행된 후에 body가 실행된다.
즉, head가 다 불러지지 않으면 사용자 쪽에선 백지 화면만 노출되고 js 파일의 용량이 클수록 body 부분의 실행이 늦어지기 때문에 js는 body 하단에 두어 화면이 다 그려진 뒤에 호출하는 것이 좋다.
반면 css는 화면을 그리는 역할이기 때문에 head에서 불러온다.
footer에서 bootstrap보다 jquery를 먼저 부른 이유는 bootstrap이 jquery에 의존적이기 때문이다.
jquery가 있어야만 실행되기에 먼저 호출되도록 했다.
시작 페이지
이제 index.mustache의 코드를 수정해보자.
글 등록 버튼 코드도 추가했다.
{{>layout/header}}
<h1>스프링 부트로 시작하는 웹 서비스</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}}
- 현재 mustache 파일을 기준으로 다른 파일을 가져온다. (layout폴더 안의 header.mustache)
<a>
- 버튼을 누르면 /posts/save 페이지로 이동
이제 /posts/save에 해당하는 컨트롤러를 생성해보자.
페이지에 관한 컨트롤러는 IndexController를 사용한다.
...
@GetMapping("/posts/save")
public String postsSave() {
return "posts-save";
}
...postsSave()
- /posts/save를 호출하면 posts-save.mustache를 호출하는 메소드
등록 페이지
src/main/resources/templates에 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을 실행하고 localhost:8080으로 접속한다.
아직 등록 버튼에 기능을 추가하지 않았으므로 눌러도 아무 일도 일어나지 않는다.
js 추가
src/main/resources/static/js/app에 index.js를 생성한다.
var main = {
init : function() {
var _this = this;
$('#btn-save').on('click',function() {
_this.save();
});
},
save : function() {
var data = {
title: $('#title').val(),
author: $('#author').val(),
content: $('#content').val()
};
$.ajax({
type: 'POST',
url: '/api/v1/posts',
dataType: 'json',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(data)
}).done(function() {
alert('글이 등록되었습니다.');
window.location.href = '/';
}).fail(function (error) {
alert(JSON.stringify(error));
})
}
};
main.init();footer.mustache에도 다음 코드를 추가한다.
<script src="/js/app/index.js"></script>
이제 브라우저에서 테스트해본 뒤 db도 확인하면 데이터가 무사히 등록된 것을 확인할 수 있다.
해당 게시글은 [ 스프링 부트와 AWS로 혼자 구현하는 웹 서비스 / 이동욱 ] 책을 따라한 것을 정리하기 위한 게시글입니다. 요약, 생략한 부분이 많으니 보다 자세한 설명은 책 구매를 권장합니다.
'Clone Coding > 스프링 부트와 AWS' 카테고리의 다른 글
| [OAuth 2] 구글 로그인 연동하기 (0) | 2021.01.21 |
|---|---|
| [Mustache & Spring] 전체 조회 화면 만들기 (0) | 2021.01.19 |
| [Mustache] 화면 구성 (0) | 2021.01.18 |
| [JPA Auditing] 생성/수정시간 자동화 (0) | 2021.01.18 |
| [Spring] 등록 API 만들기 (+h2 웹 콘솔 이용하기) (0) | 2021.01.15 |
