이 글은 '스프링 부트와 AWS로 혼자 구현하는 웹 서비스' 책을 참고하여 작성되었습니다.

1. 레이아웃과 라이브러리 사용하기

일반 HTML로만 화면을 구성하기 보다는 라이브러리를 사용하는편이 좋다. 따라서 프론트엔드 오픈소스인 부트스트랩, jquery를 이용하여 구성해보자. 이 부분은 머스테치 화면마다 사용하게 될 예정이니 레이아웃 방식을 사용하는 것이 좋다. 레이아웃 방식이란 공통 영역을 별도의 파일로 분리하여 필요한 곳에서 가져다 쓰는방식을 말한다.


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

<!DOCTYPE HTML>
<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에 위치한다. head 부분 실행 후 body 부분이 실행되므로 빠르게 실행되어야한다.
  • js: css 보다는 다소 로딩속도가 느리기에 footer에 위치한다.

index.mustache

{{>layout/header}}

    <h1>스프링부트로 시작하는 웹 서비스</h1>

{{>layout/footer}}

레이아웃 사용으로 코드가 굉장히 간결해졌다.

2. 게시글 등록 화면

1) 화면 구성하기

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

a href에 명시된대로 글 등록 시 이동할 페이지의 주소는 /posts/save이다. 이 주소에 해당하는 컨트롤러와 머스테치 파일을 호출할 메서드, 머스테치 파일을 작성해보자.

IndexController.java

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

하지만 api를 호출하는 js가 없기에 등록 버튼이 동작하지않는다. index.js를 작성해보자.

2) js로 버튼 기능 구현하기

index.js를 작성하기 위하여 디렉토리를 만들어야하는데, 평소처럼 static.app.js로 디렉토리를 생성하면 버튼 클릭 시 오류가 생긴다. 이 디렉토리를 생성할때는 static/app/js로 생성해야 정상작동한다. 생성 후 보이는 경로는 static.app.js로 동일하지만 실제로는 다르다. 디렉토리 생성 시 주의하자.


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();
  • $('#btn-save').on('click', function () { ... } ): btn-save라는 id를 가진 버튼 'click' 시 작성된 함수를 실행한다.
  • $.ajax: 필요한 데이터만 웹 서버에 요청하여 받고 이를 클라이언트에서 데이터처리를 하는 비동기적 웹 기법이다. 속도 향상에 큰 도움을 준다. 사용 예시
  • var main = { ... }: 공용 공간으로 쓰이는 브라우저의 스코프에서 함수 충돌을 피하기 위해 index.js만의 유효범위를 만들어서 사용한다.

이제 footer.mustache에 코드를 추가해 index.js를 사용가능하게 하자.

footer.mustache

...

<script src="/js/app/index.js"></script>

</html>
</body>
  • 정적 파일 URL: script src에서 절대 경로 "/"로 바로 시작했는데, src/main/resources/static에 위치한 js, css, 이미지 등의 정적 파일들은 URL에서 /로 설정된다.

직접 글 등록 버튼을 누르고 등록이 되었다면 h2에서도 확인을 해보자. 만약 403 error가 발생한다면 디렉토리 경로 혹은 footer에 코드를 추가하지 않은 오류일 가능성이 높다.

profile
여러가지를 시도하는 학생입니다

0개의 댓글