16. 스프링부트와 AWS - 게시글 등록 화면 만들기

15. 스프링부트와 AWS - 부트스트랩과 제이쿼리

이전 글에서 레이아웃 방식을 통해 header, footer를 따로 만들어줬다.

 

이제 본격적으로 이걸 이용해서 게시판 화면을 구현해보자.

 

우선 포스트에서는 등록 화면부터 만들어보도록 하자.

 

화면 영역의 경우 기본 코드가 길기 때문에 일일이 치는건 무리가 있다.

 

jojoldu/freelec-springboot2-webservice

 

그러므로 위의 깃허브에 접속해서 화면 영역의 코드는 다운 받아서 쓰는게 낫다.

posts-save, posts-update 파일 만들기

 

 

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

 

 

{{>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="id" value="{{post.id}}" readonly>
            </div>
            <div class="form-group">
                <label for="title">제목</label>
                <input type="text" class="form-control" id="title" value="{{post.title}}">
            </div>
            <div class="form-group">
                <label for="author"> 작성자 </label>
                <input type="text" class="form-control" id="author" value="{{post.author}}" readonly>
            </div>
            <div class="form-group">
                <label for="content"> 내용 </label>
                <textarea class="form-control" id="content">{{post.content}}</textarea>
            </div>
        </form>
        <a href="/" role="button" class="btn btn-secondary">취소</a>
        <button type="button" class="btn btn-primary" id="btn-update">수정 완료</button>
        <button type="button" class="btn btn-danger" id="btn-delete">삭제</button>
    </div>
</div>

{{>layout/footer}}

 

위와 같이 posts-save와 posts-update파일을 두개 만든다.

 

그리고 깃허브에 접속해서 위처럼 각각의 코드를 복사 붙여넣기한다.

 

파일명처럼 만약 글쓰기를 한다면 posts-save.mustache가 화면으로 출력될 것이고

 

글수정을 한다면 posts-update가 화면으로 출력될 것이다.

 

이제 본격적으로 게시글 등록 화면을 위한 작업을 해보자.

게시글 등록 작업

우선 index.mustache를 수정하자.

 

 

{{>layout/header}}
    <h1> AWS+스프링부트 게시판 </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}}

 

index.mustache 파일을 열고 위와 같이 글 등록용 버튼을 추가해준다.

 

 

 

 

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class IndexController {

    @GetMapping("/")
    public String index(){
        return "index";
    }

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

 

이제 IndexController로 가서 위와 같이 postsSave() 메서드를 추가해준다.

 

 

 

이제 메서드를 추가하고 Application에서 main 메서드를 실행해보자.

 

 

main 메서드를 실행한 뒤 "htttp://localhost:8080"으로 접속해보자.

 

접속하면 아까 index.mustache에 추가한 버튼을 볼 수 있다.

 

 

버튼을 누르면 위와 같이 게시글 등록할 수 있는 화면이 뜨는 것을 볼 수 있다.

 

하지만 실제로 글을 등록하려고 버튼을 누르면 아무런 작동도 하지 않은 것을 볼 수 있다.

 

당연하게도 버튼은 작동하지 않는다.

 

왜냐면 우리가 만든 버튼은 index.mustache에서만 작동하는 버튼이었다.

 

게시글 등록 화면에서 버튼이 작동하도록 만들진 않았기 때문이다.

저장 버튼 자바스크립트 처리하기

 

이제 등록 버튼을 누르면 이전에 만든 PostsApiController의 save메서드가 실행되도록 만들어야 한다.

 

 

"/src/main/resources/" 경로에 "static/js/app" 경로로 폴더를 만들어준다.

 

그 뒤에 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();

 

index.js 안에 위와 같이 코드를 입력해준다.

 

코드를 간단히 설명하면 다음과 같다.

 

- 자바스크립트가 실행되면 main.init() 메서드를 실행한다.

 

- '#btn-save' 버튼이 눌리면 save() 메서드가 실행된다.

 

- save() 메서드가 실행되면 제목, 내용, 글쓴이 칸에 있는 내용을 '/api/v1/posts'로 전달한다.

 

- 내용이 잘 전달되면 "글이 등록되었습니다." 메시지가 팝업창으로 뜨고 게시글 조회화면으로 이동한다.

 

- 만약 전달이 되지 않았다면 에러 메시지가 팝업창으로 뜬다.

 

이때 주의할 점이 있다.

 

내용을 보면 알겠지만 굳이 불편하게 메서드들을 var main이란 변수 안에 집어넣었다.

 

이는 추후에 다른 자바스크립트 파일이 추가되어 중복되는 함수 이름으로 인한 오류를 없애기 위함이다.

 

만약 두 개의 JS 파일을 로딩한다고 가정해보자.

 

첫번째 JS 파일이 로딩되고 나서 두번째 JS파일이 로딩됐을 때 만약 함수명이 같을 수 있다.

 

이럴 경우 두번째 JS파일이 첫번째 JS파일을 덮어버리기 때문에 함수가 작동하지 않는다.

 

그래서 var main이란 객체를 만들어서 그 안에 메서드들을 집어넣는 것이다.

 

이렇게 할 경우 main 객체 안에서만 메서드가 유효하므로 다른 JS파일과 겹칠 위험이 사라진다.

 

 

 

이제 생성된 index.js를 mustache 파일이 사용할 수 있도록 footer.mustache에 코드를 추가해준다.

 

이때 경로를 보면 앞은 "/js/app/index.js"의 앞 경로는 전부 생략된 것을 볼 수 있다.

 

이는 스프링부트는 CSS, JS, 이미지 파일 경로를 자동으로 "src/main/resources/static"으로

 

설정하기 때문이다.

 

즉 실제 경로는 src/main/resources/static/js/app/index.js로 굉장히 길다.

 

하지만 앞부분인 src/main/resources/static/은 자동 경로 설정이 된다.

 

/js/app/index.js만으로도 충분한 경로 설정이 되는 것이다.

글쓰기 저장 테스트해보기

이제 main 메서드를 다시 작동 시킨 뒤에 "http://localhost:8080"으로 접속하고 글등록 버튼을 누른다.

 

 

 

게시글 내용을 채우고 등록 버튼을 누르면 글 등록이 성공되고 위처럼 팝업창이 뜨는 것을 볼 수 있다.

 

 

 

이전에 테스트했던 H2Database로 posts 테이블의 내용을 조회해보자.

 

코드가 잘 입력됐다면 위에서처럼 등록한 내용이 테이블에 들어가있는 것을 볼 수 있다.