게시글 등록 화면 만들기

박지운·2023년 2월 17일

스프링 부트와 AWS로 혼자 구현하는 웹 서비스

목록 보기

7/7

'스프링 부트와 AWS로 혼자 구현하는 웹 서비스' 를 읽고 공부하며 정리한 내용입니다. 오류 해결부분은 틀린 내용이 있을 수 있습니다.🤐

부트스트랩 이용하기

외부 CDN이나 직접 라이브러리를 받는 두 가지 방법이 있다. 책에서는 외부 CDN을 이용하지만 실제 서비스에서는 외부 서비스에 의존하는 셈이 되기 때문에 잘 사용하지 않는다.

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

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

페이지 로딩속도를 높이기 위해 css는 header에, js는 footer에 두어야한다.
HTML은 위에서부터 코드가 실행되기 때문에 head가 다 실행되고서야 body가 실행된다.
즉 js 의 용량이 커 body의 실행이 늦어지면 크만큼 사용자에게 백지화면이 노출되는 시간이 길어진다.

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

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();