[스프링부트와 AWS로 혼자 구현하는 웹 서비스] Mustache로 게시글 등록 화면 만들고 게시글 등록 기능 넣기

세이라·2023년 7월 25일

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

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

목록 보기

13/23

스터디를 통해 스프링부트와 AWS로 혼자 구현하는 웹 서비스(저자 이동욱) 서적을 공부하는 중입니다.

공부/실습한 내용을 정리한 포스팅입니다.
책에 모르는 부분이 있으면 구글링하거나 챗gpt에 물어봐서 보충하였습니다.
(아직 초보라 모르는 부분이 많아 이것저것 다 적었습니다.)

참고한 사이트 출처는 포스팅 맨 하단에 적었습니다.

프론트엔드 라이브러리와 프레임워크

jquery : JavaScript 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 JavaScript 라이브러리.
Bootstrap : 웹 프로젝트 손쉬운 개발을 위한 HTML, CSS, JavaScript 프레임워크.
'프레임워크'라 하는 것은 재사용이 가능한 요소들이 집합되어 있으며, 정해진 구조와 틀 안에서 확장이 가능한 기반 코드로 이루어짐을 뜻함. jQuery는 라이브러리이고 Bootstrap은 프레임워크. 따라서 'Bootstrap 프레임워크에서 jQuery 라이브러리를 사용한다.'라고 봐야 한다.

Bootstrap, jQuery 라이브러리 사용 방법

외부 CDN 다운

CDN(Content Delivery Network) : 데이터 사용량이 많은 애플리케이션의 웹 페이지 로드 속도를 높이는 상호 연결된 서버 네트워크. 콘텐츠 전송 네트워크 또는 콘텐츠 배포 네트워크. 웹 사이트 콘텐츠는 지리적으로 사용자와 가까운 CDN 서버에 저장되며 훨씬 빨리 전송됨.
HTML/JSP/Mustache에 코드만 한 줄 추가하면 되어 굉장히 간단.
실제 서비스에선 이 방법을 잘 사용하지 않음
: 외부서비스에 의존하게 되면, CDN을 서비스하는 곳에서 문제가 생기면 덩달아 같이 문제가 발생하기 때문.

직접 라이브러리를 다운 받아 사용

레이아웃 적용

레이아웃이란

공통 영역을 별도의 파일로 분리하여 필요한 곳에 가져다 쓰는 방식
Bootstrap과 jQuery 라이브러리의 경우, 화면 어디서나 필요하므로 레이아웃 파일을 만들어 추가.

과정

src>main>resources>templates에 layout 디렉토리 생성
header.mustache footer.mustache 생성
header.mustache에 아래와 같이 작성

<html>
<head>
    <title>스프링 부트 웹 서비스</title>
    <meta 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/min.js"></script>
</body>
</html>

index.mustache를 아래와 같이 작성

{{>layout/header}}
<h1>스프링 부트로 시작하는 웹 서비스</h1>
{{>layout/footer}}

설명

CSS와 js 위치가 서로 다른 이유
: 페이지 로딩속도를 높이기 위해 CSS는 header, js는 footer에 둠.
HTML은 위에서부터 코드가 실행되기 때문에 head가 다 실행되고서야 body가 실행. 즉, head가 다 불러지지 않으면 사용자 쪽에선 백지 화면만 노출됨.
js의 용량이 크면 클수록 body 부분의 실행이 늦어지기 때문에 js는 body 하단에 두어 화면이 다 그려진 뒤 호출하는 것이 좋음.
bootstrap.js가 jQuery보다 아래인 이유
: bootstrap.js의 경우 jQuery가 꼭 있어야만 하기 때문.
{{>layout/header}} : 현재 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}}

IndexController.java에 아래의 코드 추가

    @GetMapping("/posts/save")
    public String postsSave() {
        return "posts-save";
    }

posts-save.mustache를 templates 디렉토리 바로 아래에 생성 후 아래의 코드 작성

{{>layout/header}}
<h1>게시글 등록</h1>
<div class="col-md-12">
    <div class="col-md-4">
        <form>
            <div class="form-group">
                <lable for="title"> 제목</lable>
                <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="cotent">내용</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}}

등록 버튼 기능 넣기

과정

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에 index.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/min.js"></script>
<!--index.js 추가-->
<script src="/js/app/index.js"></script>
</body>
</html>

설명

Ajax 요청에서 dataType과 contentType 다른 점
: dataType은 서버에서 어떤 타입을 받을 것인지를 의미. 이를 통해 jQuery에서 success나 done 함수의 파라미터로 받아 처리.
contentType은 보내는 데이터의 타입을 의미. default는 application/x-www-form-urlencoded; charset=utf=8. 서버에 데이터를 보낼 때 사용하는 Content-Type 헤더 값.
window.location.href : 이동 페이지 url을 대입하면 자동으로 해당 페이지로 이동
main 변수를 따로 둬서 function 추가한 이유
: 브라우저의 스코프는 공용 공간으로 쓰이기 때문에 나중에 로딩된 js의 같은 이름의 function이 있으면 먼저 로딩된 js의 function을 덮어씀.
여러 사람이 참여하는 프로젝트에서 함수 이름이 중복되는 경우는 자주 발생.
그러므로 해당 js만의 객체를 따로 만들어 해당 객체에 필요한 모든 function 선언.
JavaScript, CSS, 이미지 등 정적 파일 기본 위치
: src/main/resources/static부터 시작.
js의 경우 src/main/resources/static/js/...
css의 경우 src/main/resources/static/css/...
image의 경우 src/main/resources/static/image/...