Back-End/Springboot와 AWS로 혼자 구현하는 웹 서비스

Chapter 04. 머스테치로 화면 구성하기 (3)

yeonx 2022. 3. 15. 23:57
728x90

4.3 게시글 등록 화면 만들기

 

오픈소스인 부트스트랩을 이용하자

 

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

1. 외부 CDN을 사용 

2. 직접 라이브러리를 받아서 사용

 

1번을 사용할 것임. <- 프로젝트에서 직접 내려받아 사용할 필요도 없고, 사용 방법도 HTML/JSP/Mustache에 코드만 한 줄 추가하면 되니 간단 (실제론 안 씀)

 

2개의 라이브러리 부트스트랩과 제이쿼리를 index.mustache에 추가해야 한다. 하지만 바로 추가하지 않고 레이아웃 방식(공통 영역을 별도의 파일로 분리하여 필요한 곳에서 가져다 쓰는 방식)으로 추가해 볼 것이다.

매번 해당 라이브러리를 추가하는 것은 귀찮으니, 레이아웃 파일들을 만들어 추가.

머스테치 레이아웃 구조

header.mustache

<!DOCTYPE HTML>
<html>
<head>
    <title>스프링 부트 웹서비스</title>
    <meta http-equiv="Content-Type" content="test/html; charset=UTF-8"/>

    <link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>

footer.mustache

<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="http://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의 경우 제이쿼리가 꼭 있어야하기 때문에 부트스트랩보다 먼저 호출되도록 코드 작성 (bootstrap.js가 제이쿼리에 의존)

라이브러리를 비롯해 기타 HTML 태그들이 모두 레그아웃에 추가되니 이제 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}}
① {{>layer/header}}
 - {{>}}는 현재 머스테치 파일(index.mustache)을 기준으로 다른 파일을 가져옴
  • <a>태그를 이용해 글 등록 페이지로 이동하는 글 등록 버튼이 생성됨
  • 이동할 페이지 주소는 /posts/save
  • 페이지에 관련된 컨트롤러는 모두 IndexController를 사용

IndexController

@RequiredArgsConstructor
@Controller
public class IndexController {
    ...
    @GetMapping("/posts/save")
    public String postsSave(){
        return "posts-save";
    }
}

위 코드는 index.mustache와 마찬가지로 /posts/save를 호풀하면 posts-save.mustache를 호출하는 메소드가 추가.

 

posts-save.mustache

{{>layout/header}}

<h1>게시글 등록</h1>
<div class="col-md-12">
    <div class="col-md-4">
        <from>
            <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="test" class="form-control" id="author" placeholder="작성자를 입력하세요">
            </div>
            <div class="form-group">
                <label for="content">내용</label>
                <textarea class="form-control" id="content" placeholder="내용을 입력하세요"></textarea>
            </div>
        </from>
        <a href="/" role="button" class="btn btn-secondary">취소</a>
        <button type="button" class="btn btn-primary" id="btn-save">등록</button>
    </div>
</div>
{{>layout/footer}}

글 등록 화면

http://localhost:8080/로 접근 후 "글 등록"을 누르면 위와 같은 화면으로 이동하게 된다

하지만 아직 게시글 등록 화면에 등록 버튼 기능이 없음.

index.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();
① window.location.href='/'
 - 글 등록이 성공하면 메인페이지(/)로 이동

 

index.js의 첫 문장에 var main = {...}라는 코드를 선언한 이유

만약 index.js가 다음과 같이 function을 작성한 상황이면

var init = function(){
		...
	};
	var save = function(){
    	...
    };
    init();

index.mustache에서 a.js가 추가되어 a.js도 a.js만의 init과 save function이 있다면

-> 브라우저의 스코프는 공용 공간으로 쓰이기 때문에 나중에 로딩된 js의 init, save가 먼저 로딩된 js의 function을 덮어쓰게 됨.

이런 문제를 피하려고 index.js만의 유효범위를 만들어 사용

 

방법은 var index이란 객체를 만들어 해당 객체에서 필요한 모든 function을 선언하는 것. 이렇게 하면 index 객체 안에서만 function이 유효하기 때문에 다른 JS와 겹칠 위험이 사라짐

 

생성된 index.js를 머스테치 파일이 쓸 수 있게 footer.mustache에 다음 코드를 추가

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

index.js 호출 코드를 보면 절대 경로(/)로 바로 시작

스프링 부트는 기본적으로 scr/main/resources/static에 위치한 자바스크립트, CSS, 이미지 등 정적 파일들은 URL에서 /로 설정

등록이 되는지 테스트해보기

 

등록화면
등록 성공 Alert

등록된 글이 DB에 있는지 확인

 

localhost:8080/h2-console에 접속해 실제로 DB에 데이터가 등록되었는지도 확인

등록 데이터 베이스 확인

 

출처 : 스프링 부트와 AWS로 혼자 구현하는 웹 서비스 [이동욱 지음]

'Back-End > Springboot와 AWS로 혼자 구현하는 웹 서비스' 카테고리의 다른 글

Chapter 04. 머스테치로 화면 구성하기 (5)  (0) 2022.03.19
Chapter 04. 머스테치로 화면 구성하기 (4)  (0) 2022.03.16
Chapter 04. 머스테치로 화면 구성하기 (2)  (0) 2022.03.15
Chapter 04. 머스테치로 화면 구성하기 (1)  (0) 2022.03.15
Chapter 03. SpringBoot에서 JPA로 데이터베이스 다뤄보자 (5)  (0) 2022.03.14

'Back-End/Springboot와 AWS로 혼자 구현하는 웹 서비스'의 다른글

  • 현재글Chapter 04. 머스테치로 화면 구성하기 (3)

관련글

티스토리툴바