1. 서버 템플릿 엔진
템플릿 엔진 : 지정된 템플릿 양식 + 데이터 = HTML문서를 출력하는 소프트웨어
Ex) JSP, Freemarker, React, Vue의 View파일
서버 템플릿 엔진 : JSP, Freemarker
클라이언트 템플릿 엔진 : React, Vue
★자바스크립트에서 JSP나 Freemarker처럼 자바 코드를 사용할 순 없나요?
<script type="text/javascript>
$(document).ready(function(){
if(a=="1"){
<%
System.out.println("test");
%>
}
});
이 코드는 if문과 관계없이 무조건 test를 콘솔에 출력한다.
이유
- 프론트엔드의 자바스크립트가 작동하는 영역과 JSP가 작동하는 영역이 다르기 때문
- JSP를 비롯한 서버 템플릿 엔진은 서버에서 구동된다.
- JSP는 명확하게는 서버 템플릿 엔진은 아닙니다만, View의 역할만 하도록 구성할 때는 템플릿 엔진으로써 사용 가능. 이 경우에는 Spring + JSP로 사용한 경우
서버 템플릿 엔진
- 서버에서 Java 코드로 문자열을 만든 뒤 이 문자열을 HTML로 변환하여 브라우저에 전달
- 고로, 이 때의 자바스크립트 코드는 단순한 문자열일 뿐
반면에 자바스크립트는 브라우저 위에서 작동
앞에서 작성된 자바스크립트 코드가 실행되는 장소는 서버가 아닌 브라우저
즉, 브라우저에서 작동될 때는 서버 템플릿 엔진의 손을 벗어나 제어할 수 없다.
클라이언트 템플릿 엔진
- 흔히 이야기하는 Vue.js, React.js를 이용한 SPA(Single Page Application)는 브라우저에서 화면을 생성
- 서버에서 이미 코드가 벗어난 경우
- 서버에서는 Json 혹은 Xml 형식의 데이터만 전달하고 클라이언트에서 조립
2. 머스테치
머스테치란?
- 수많은 언어를 지원하는 가장 심플한 템플릿 엔진
- 플러인을 통해 설치
장점?
- 문법이 다른 템플릿 엔진보다 심플
- 로직 코드를 사용할 수 없어 View의 역활과 서버의 역할이 명확하게 분리
- Mustache.js, Mustache.java 2가지가 다 있어, 하나의 문법으로 클라이언트/서버 템플릿을 모두 사용 가능
3. 기본 페이지 만들기
머스테치 스타터 의존성 build.gradle에 등록
머스테치의 파일 위치는 기본적으로 src/main/resources/templates 이다
Index.mustache 작성
<!DOCTYPE HTML>
<html>
<head>
<title>스트링 부트 웹서비스</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
</head>
<body>
<h1>스프링 부트로 시작하는 웹 서비스</h1>
</body>
</html>
IndexController 작성
테스트 코드 IndexControllerTest 작성
@RunWith(Spring.Runner.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("스프링 부트로 시작하는 웹 서비스");
}
}
URL 호출 시 페이지의 내용이 제대로 호출되는지에 대한 테스트
HTML도 결국 규칙이 있는 문자열
TestRestTemplate를 통해 "/"로 호출 했을 때 index.mustache에 포함된 코드들이 있는지 확인하면 된다.
테스트 코드 성공!
페이지가 실제로 서버에서 보여지는지 확인하고 싶다면 Application.java main 실행 후
http://localhost:포트/ 입력
메인 페이지를 만들었다. 게시글을 등록하는 화면을 만들어보자
부트스트랩과 제이쿼리를 사용해서 이쁘게 화면을 꾸며볼 것이다.
scr/main/resources/templates 디렉토리 아래 layout 디렉토리를 추가로 생성
footer.mustache, header.mustache 파일 생성
hearder.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-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>css와 js의 위치가 다른 이유?
- 페이지 로딩 속도를 높이기 위해 css는 header에 js는 footer에
- HTML은 위에서부터 코드가 실행되기 때문에 head가 다 실행되고서야 body가 실행된다
- js의 용량이 크면 클수록 body 부분의 실행이 늦어지기 때문에 js는 body 하단에 두어 화면이 다 그려진 뒤에 호출하는 것이 좋다.
- css는 화면을 그리는 역할이므로 head에서 불러오는 것이 좋다. 그렇지 않으면 css가 적용되지 않은 깨진 화면을 사용자가 볼 수 있기 때문
- bootstrap.js의 경우 제이쿼리가 꼭 있어야만 하기 때문에 부트스트랩보다 먼저 호출되도록 코드 작성.
index.mustche 파일은 다음과 같이 변경
{{>layout/header}}
<h1>스프링 부트로 시작하는 웹 서비스</h1>
{{>layout/footer}}
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}}
이동할 페이지의 주소는 /posts/save
이 주소에 맞는 Controller를 만들어 주어야 한다.
IndexController에 추가해주자.
@GetMapping("/posts/save")
public String postsSave()
{return "posts-save";}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="title">내용</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}}
아직 게시글 등록 화면에 등록 버튼 기능이 없다.
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();이 index.js를 머스테치 파일이 쓸 수 있게 footer.mustache 파일에 추가
<!-- index.js 추가 -->
<script src="/js/app/index.js"></script>index.js 호출 코드를 보면 절대경로(/)로 바로 시작
스프링 부트는 기본적으로 src/main/resources/static에 위치한 자바스크립트, CSS, 이미지 등 정적 파일들은 URL에서 /로 설정
그래서 다음과 같이 파일이 위치하면 위치에 맞게 호출이 가능하다.
- src/main/resources/static/js/....
- src/main/resources/static/css/...
- src/main/resources/static/images/...
코드가 완성되었다.
등록 기능을 브라우저에서 직접 테스트 해보자.
잘 들어갔다.
전체 조회하는 화면을 만들어보자
전체 조회를 위해 index.mustache의 UI를 변경
{{>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>
<br>
<!-- 목록 출력 영역 -->
<table class="table table-horizontal table-bordered">
<thead class="thead-strong">
<tr>
<td>게시글번호</td>
<td>제목</td>
<td>작성자</td>
<td>최종수정일</td>
</tr>
</thead>
<tbody id="tbody">
{{#posts}}
<tr>
<td>{{id}}</td>
<td><a href="/posts/update/{{id}}">{{title}}</a></td>
<td>{{author}}</td>
<td>{{modifiedDate}}</td>
</tr>
{{/posts}}
</tbody>
</table>
</div>
{{>layout/footer}}
리스트를 index.mustache에 보내주기 위해 Controller, Service, Repository 코드를 작성해야 한다.
Repository부터 시작
public interface PostsRepository extends JpaRepository<Posts,Long> {
@Query("Select p FROM Posts p ORDER BY p.id DESC")
List<Posts> findAllDesc();
}
SpringDataJpa에서 제공하지 않는 메소드는 위처럼 쿼리로 작성해도 된다.
이 코드는 사실 기존 JPA에서 제공해준다.
@Query가 가독성이 좋으니 선택해서 사용하자
PostsService 코드 추가
@RequiredArgsConstructor
@Service
public class PostsService {
private final PostsRepository postsRepository;
@Transactional(readOnly = true)
public List<PostsListResponseDto> findAllDesc(){
return postsRepository.findAllDesc().stream()
.map(PostsListResponseDto::new)
.collect(Collectors.toList());
}findAllDesc 메소드의 트랜잭션 어노테이션에 옵션이 하나 추가(readOnly=true)
-> 트랜잭션 범위는 유지, 조회 기능만 남겨두어 조회 속도가 개선되기 때문에 등록, 수정, 삭제 기능이 전혀 없는 서비스 메소드에 사용하는 것을 추천
.map(PostsListResponseDto::new)
.collect(Collectors.toList());이 부분은 postsRepository 결과로 넘어온 Posts의 Stream을 map을 통해 PostsListResponseDto로 변환 -> List로 반환하는 메소드이다.
PostsListResponseDto가 없기에 만들어 주어야 한다
@Getter
public class PostsListResponseDto {
private Long id;
private String title;
private String author;
private LocalDateTime modifiedDate;
public PostsListResponseDto(Posts entity){
this.id = entity.getId();
this.title = entity.getTitle();
this.author = entity.getAuthor();
this.modifiedDate = entity.getModifiedDate();
}
}
마지막으로 IndexController를 변경한다.
public class IndexController {
@Autowired
private final PostsService postsService;
@GetMapping("/")
public String index(Model model){
model.addAttribute("posts", postsService.findAllDesc());
return "index";
}postService.findAllDesc()로 리스트를 받아와서
Model이라는 객체를 view에 전달시켜주는 클래스를 생성해
그 리스트를 posts라는 이름으로 적재시킨다.
게시글 수정, 삭제 화면 만들기
게시글 수정 API는 미리 만들어 두었다.
@PostMapping("/api/v1/posts/{id}")
public Long update(@PathVariable Long id, @RequestBody PostsUpdateRequestDto requestDto) {
return postsService.update(id, requestDto);
}
수정 머스테치 파일 생성 posts-update
{{>layout/header}}
<h1>게시글 수정</h1>
<div class="col-md-12">
<div class="col-md-4">
<form>
<div class="form-group">
<label for="id">글 번호</label>
<input type="text" class="form-control"id="id" value="{{post.id}}" readonly>
</div>
<div class="form-group">
<label for="title">제목</label>
<input type="text" class="form-control"id="title" value="{{post.title}}">
</div>
<div class="form-group">
<label for="author">작성자</label>
<input type="text" class="form-control"id="author" value="{{post.author}}" readonly>
</div>
<div class="form-group">
<label for="content">내용</label>
<textarea type="text" class="form-control"id="content">{{post.content}}</textarea>
</div>
</form>
<a href="/" role="button" class="btn btn-secondary">취소</a>
<button type="button" class="btn btn-primary" id="btn-update">수정 완료</button>
<button type="button" class="btn btn-danger" id="btn-delete">삭제</button>
</div>
</div>
{{>layout/footer}}
btn-update 버튼을 클릭하면 update 기능을 호출할 수 있게 index.js 파일에도 update function을 하나 추가한다.
$('#btn-update').on('click', function(){
_this.update();
});update : function(){
var data = {
title : $('#title').val(),
content : $('#content').val()
};
var id = $('#id').val();
$.ajax({
type : 'POST',
url : '/api/v1/posts/' + id,
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));
})
}화면쪽 작업 끝
Controller 작성(수정, 삭제 페이지)
IndexController
@GetMapping("/posts/update/{id}")
public String postsUpdate(@PathVariable Long id, Model model){
PostsResponseDto dto = postsService.findById(id);
model.addAttribute("post", dto);
return "posts-update";
}
수정 성공!
삭제 기능을 넣어보자.
위에 삭제 버튼을 미리 만들어 두었기 때문에 index.js에 delete 부분을 만들어주자.
$('#btn-delete').on('click', function () {
_this.delete();
});delete : function () {
var id = $('#id').val();
$.ajax({
type: 'DELETE',
url: '/api/v1/posts/'+id,
dataType: 'json',
contentType:'application/json; charset=utf-8'
}).done(function() {
alert('글이 삭제되었습니다.');
window.location.href = '/';
}).fail(function (error) {
alert(JSON.stringify(error));
});
}
삭제 API를 만들어야 한다.
PostService
@Transactional
public void delete (Long id){
Posts posts = postsRepository.findById(id).orElseThrow(()->new
IllegalArgumentException("해당 게시글이 없습니다. id="+ id));
postsRepository.delete(posts);
}PostsApiController
@DeleteMapping("/api/v1/posts/{id}")
public Long delete(@PathVariable Long id){
postsService.delete(id);
return id;
}
수정/삭제 기능 완성!..
'스프링부트와 AWS로 혼자 구현하는 웹 서비스' 카테고리의 다른 글
| 8. 등록/수정/조회 API 만들기 (0) | 2022.01.19 |
|---|---|
| 7. 요구사항 분석 (0) | 2022.01.18 |
| 6. JPA로 데이터베이스 다뤄보자 (0) | 2022.01.18 |
| 5. Hello Controller 테스트 코드 작성하기 (0) | 2022.01.17 |
| 4. 스프링부트에서 테스트 코드를 작성하자 (0) | 2022.01.17 |
