게시글 등록 화면 만들기

이 책은 오픈소스인 부트스트랩을 이용하여 화면을 만들었다.

부트스트랩, 제이쿼리 등 프론트엔드 라이브러리를 사용할 수 있는 방법은 크게 2가지가 있다.

  • 외부 CDN을 사용하기
  • 직접 라이브러리를 받아서 사용하기

이 책은 외부 CDN을 사용한다. 이 프로젝트는 직접 내려받아 사용할 필요도 없고, 사용 방법도 HTML/JSP/Mustache에 코드만 한 줄 추가하면 되니 굉장히 간단하다.

실제 서비스에서는 외부 CDN 방법을 잘 사용하지 않는다.
외부 서비스에 의존하게 돼버려서, CDN을 서비스하는 곳에 문제가 생기면 덩달아 같이 문제가 생기기 때문이다.

 

부트스트랩, 제이쿼리 추가하기

index.mustache에 추가해줘야 한다. 레이아웃 방식으로 추가한다. 

레이아웃 방식이란 공통 영역을 별도의 파일로 분리하여 필요 한 곳에서 가져다 쓰는 방식이다.

이렇게 templates와 layout에 2개의 mustache 파일을 만들어준다.

  • 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>

css파일은 Header에 js 파일은 footer에 있는 것을 확인할 수 있다. HTML은 위에서부터 코드가 실행되기 때문에 head가 다 실행되고서야 body가 실행된다. 그래서 js의 용량이 크면 클수록 body의 실행이 늦어지므로 js는 body 하단에 두어 화면이 다 그려진 뒤에 호출한다. css는 화면을 그리는 역할이므로 head에서 불러와야 한다.

bootstrap.js의 경우 제이쿼리가 꼭 있어야 한다. 그러므로 먼저 호출해야 한다.

 

글 등록 화면 만들기

이후 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> .... 글 등록 </a>

  • 등록 버튼을 누르면 태그를 이용해 글 등록 페이지로 이동한다. /post/save로 이동

이제 컨트롤러를 생성해야 한다.

  • 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="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}}

이 코드는 이 책에서 제시해 준 코드이다. HTML은 잘 모르기 때문에 읽어보면서 따라서 작성해 봤다.

여기서 아직 등록 버튼이 기능이 없다. API를 호출하는 JS가 없기 때문이다. 

이렇게 index.js를 만들었다.

  • index.js
var main = {
    init : function () {
        var _this = this;
        $('#btn-save').on('click', function () {
            _this.save();
        });

        $('#btn-update').on('click', function () {
            _this.update();
        });

        $('#btn-delete').on('click', function () {
            _this.delete();
        });
    },
    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();

자바 스크립트는 처음 만져본다. 그래서 위 코드들이 어떻게 쓰이는지 알아봤다.

  • init : function()  : 각 버튼을 누르면 어떤 function이 실행되는지 나타낸다.
  • save : function() : var data는 각 data를 받아 설정된다. $.ajax 부터 api를 날릴 준비를 한다. 이렇게 코드를 읽어보니 포스트맨으로 api를 날릴 때와 똑같은 흐름이라는 것을 알 수 있었다.
index.js의 첫 문장에 var main = {}라는 코드를 선언한 이유??
var main = {}이 없다고 가정해보자. 만약 index.mustache에서 a.js가 추가되어 a.js만의 init과 save function이 있다면 브라우저의 스코프는 공용 공간으로 쓰인다. 즉 js의 function이 덮어쓰게 된다. 그러므로 var main = {}은 유효범위를 만들어 준 것이다.

이제 footer 부분에 js를 추가해줘야 한다.

<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>

<!--index.js 추가-->
<script src="/js/app/index.js"></script>
</body>
</html>

이렇게 index.js를 추가해 준다. 

 

실행

잘 추가된 모습을 확인할 수 있다.

 

전체 조회 하면 만들기

전체 조회 하면을 만들기 위해 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>
    <br>
    <!-- 목록 출력 영역 -->
    <table class="table table-horizontal table-bordered">
        <thead class="thead-strong">
        <tr>
            <th>게시글번호</th>
            <th>제목</th>
            <th>작성자</th>
            <th>최종수정일</th>
        </tr>
        </thead>
        <tbody id="tbody">
        {{#posts}}
            <tr>
                <td>{{id}}</td>
                <td>{{title}}</td>
                <td>{{author}}</td>
                <td>{{modifiedDate}}</td>
            </tr>
        {{/posts}}
        </tbody>
    </table>
</div>

{{>layout/footer}}

이렇게 표로 각각 출력해 본다.

머스테치 문법이 사용된다.

{{#posts}} 

  • posts라는 List를 순회한다.
  • Java의 for문과 동일하게 생각하면 된다.

{{id}} 등의 {{변수명}}

  • List에서 뽑아낸 객체의 필드를 사용한다.

 

  • PostsRepository
@Query("select p from Posts p order by p.id desc")
List<Posts> findAllDesc();

Posts라는 테이블에서 모든 요소를 출력하는 것이다. 그때 id를 내림차순으로 출력한다.

  • PostsService
@Transactional(readOnly = true)
public List<PostsListResponseDto> findAllDesc() {
    return postsRepository.findAllDesc().stream()
            .map(PostsListResponseDto::new)
            .collect(Collectors.toList());
}

여기서 Transactional 옵션이 추가되었다. 이것은 트랜잭션 범위는 유지하되, 조회 기능만 남겨두어 조회 속도를 개선시키는 것이다. 위 코드는 이번 방학 동안 진행했던 프로젝트에서도 자주 써 익숙한 모습이다.

  • 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
@GetMapping("/")
public String index(Model model){
    model.addAttribute("posts", postsService.findAllDesc());
    return "index";
}

Model

  • 서버 템플릿 엔진에서 사용할 수 있는 객체를 저장할 수 있다.
  • 여기서는 postsService.findAllDesc()로 가져온 결과를 posts로 index.mustache에 전달한다.

 

실행

아까 등록했던 게시글이 잘 출력된 것을 확인할 수 있다.

'혼자하는 프로젝트 > 스프링 부트로 구현한 웹' 카테고리의 다른 글

스프링 시큐리티와 OAuth2.0으로 로그인 기능 구현하기-구글  (0) 2023.03.08
머스테치로 화면 구성하기(3) 수정, 삭제  (0) 2023.03.03
머스테치로 화면 구성하기(1)  (0) 2023.03.03
JPA를 사용한 게시판 구현(2) - 등록/수정/조회 API 만들기  (1) 2023.02.28
JPA를 사용한 게시판 구현(1)  (1) 2023.02.27

티스토리툴바