[스프링부트와 AWS로 혼자 구현하는 웹 서비스] 따라하기 - 11

THOVY·2022년 6월 30일

IntelliJ Springboot aws 따라하기 스프링부트와 AWS로 혼자 구현하는 웹서비스 이동욱 책 '스프링부트와 AWS로 혼자 구현하는 웹서비스' 따라하기

따라하기

목록 보기

11/20

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

어제에 이어 오늘은 전체 조회 화면을 만들어 볼 거다.

시작👊

빠밤!

전체 조회 화면 만들기

코드 넣기

우선 전체 조회를 위해 index.mustache 의 UI를 바꿔보자

<!-- index.mustache -->

...

    <br>
    <!-- 목록 출력 영역 -->
    <table class="table table-horizontal table-bordered">
        <thead class="thead-strong">
        <tr>
            <th>게시글번호</th>
            <th>제목</th>
            <th>작성자</th>
            <th>최종수정일</th>
        </tr>
        </thead>
        <tbody id="tbody">
        {{#posts}}
            <tr>
                <td>{{id}}</td>
                <td>{{title}}</td>
                <td>{{author}}</td>
                <td>{{modifiedDate}}</td>
            </tr>
        {{/posts}}
        </tbody>
    </table>

머스테치의 문법이 처음으로 사용됩니다.
{{#posts}} : posts 라는 List 를 순회합니다. for 문과 같다 보면 됩니다.
{{***}} : List 에서 뽑아낸 객체의 필드(***)를 사용합니다.

PostsRepository.java 에 코드 추가

// PostsRepository.java

...

    @Query("SELECT p FROM Posts p ORDER BY p.id DESC")
    List<Posts> findAllDesc();
}

SpringDataJpa 에서 제공하지 않는 메서드는 위처럼 쿼리로 작성해도 되는 것을 보여드리고 @Query 를 작성했습니다. 실제로 위 코드는 SpringDataJpa 에서 제공하는 기본 메서드만으로 해결할 수 있습니다만, @Query 가 훨씬 가독성이 좋으니 선택해서 사용하면 됩니다.

규모가 있는 프로젝트에서의 데이터 조회는 FK 조인 등 복잡한 상황으로 인해 Entity 클래스만으로 처리하기 어려워 조회용 프레임워크를 추가로 사용합니다. 대표적으로 querydsl, jooq, MyBatis 등이 있습니다. 조회는 위 3가지 프레임워크 중 하나를 통해 조회하고, CUD 는 SpringDataJpa 를 통해 진행합니다. 개인적으로 querydsl 을 추천합니다.
그 이유는 타입 안정성이 보장됩니다. 단 순한 문자열로 쿼리를 생성하는 것이 아니라 메서드를 기반으로 생성하기 때문에 쿼리문의 오타가 있거나 존재하지 않는 컬럼명을 적어넣으면 IDE에서 검출됩니다. 이 장점은 jooq 도 지원하지만, MyBatis 는 지원하지 않습니다. 그리고 많은 회사들이 사용중이기 때문에, 많은 레퍼런스가 있다는 것도 장점입니다.

신기하다.

❌ ERROR

Whitlabe Error page ..?

id 가 없어?
왜지.. 왜 없지... 나는 왜 하나하나 되는 게 없지...

아무리 살펴보고 고민해봐도 코드에 문제는 없는 거 같아서 현타왔는데
문득. id가 없어? 자료가 없어서 그런가? 싶었는데 아니다. 자료가 없어도 버튼은 작동해야지.
이해가 안돼. 다시 조회 처음부터 봐야겠다. 생각하고 하나하나보고 고쳤다.
id 가 어디서 어디로 흘러가는지 따라가보니 문제를 찾을 수 있었다.
indexControler 에서 postsService.findAllDesc() 해줘야하는데 postsService 만 해줘서 list 값이 index 로 넘어올 수가 없었다.
나의 실수다.

생각해보면 여태 생긴 오류 모두 내 실수지 당연히; 책은 아무 잘못 없다.

✅ 조회 성공

아 좋습니다.

수정 화면 만들기

마지막으로 수정, 삭제 화면을 만들어 보겠습니다.

마지막..?
아직 책 페이지 300페이지나 남았는데 300페이지는 뭘 하는 거지..?

코드 넣기

게시글 제목을 클릭할 수 있도록 index.mustache 부분을 약간 수정해준다.

                <td><a href="/posts/update/{{id}}">{{title}}</a></td>

이제 클릭하면 update 화면으로 넘어가게 될 거다.

IndexController.java 에 postsUpdate 메서드를 추가해주자.

// IndexController.java

...

    @GetMapping("/posts/update/{id}")
    public String postsUpdate(@PathVariable Long id, Model model) {
        PostsResponseDto dto = postsService.findById(id);
        model.addAttribute("post", dto);

        return "posts-update";
    }

index.js 로 가서 코드를 추가해주자. 여기 역할은 버튼을 눌렀을 때 어떻게 반응하는지 적어놓는 것 같다.

// index.js

init : function(){
  ...
  
          $('#btn-update').on('click', function () {
            _this.update();
        });
},
  
  ...
  
    update : function () {
        var data = {
            title: $('#title').val(),
            content: $('#content').val()
        };

        var id = $('#id').val();

        $.ajax({
            type: 'PUT',
            url: '/api/v1/posts/' + id,
            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));
        });
    }
};

save 코드 아래쪽에 적어준다.

PostsApiController.java 에도 코드를 추가해준다.

// PostsApiController.java

...

    @PutMapping("/api/v1/posts/{id}")
    public Long update(@PathVariable Long id,@RequestBody PostsUpdateRequestDto requestDto){
        return postsService.update(id, requestDto);
    }

    @GetMapping("/api/v1/posts/{id}")
    public PostsResponseDto findById (@PathVariable Long id){
        return postsService.findById(id);
    }

}

게시글을 클릭해서 들어가면 그 게시글이 나오고 거기서 update 하면 그 게시글이 수정된다.

화면을 만들어보자. posts-save.mustache 옆에 posts-update.mustache 를 만들어준다.

<!-- posts-update.mustache -->

{{>layout/header}}

<h1>게시글 수정</h1>

<div class="col-md-12">
    <div class="col-md-4">
        <form>
            <div class="form-group">
                <label for="id">글 번호</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="gorm-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>
    </div>
</div>

{{>layout/footer}}

이렇게 되면 수정 화면이 만들어 진거다.

✅ 수정 성공

제목 위에 마우스를 올리면 밑줄이 생기면서 클릭할 수 있게 된다. 클릭해본다.게시글 수정페이지가 나오며 글 번호와 작성자는 readonly 라고 쓸 수 없게 해놓았으니 저렇게 표시된다.
수정하고 수정 완료 버튼을 누르면
팝업이 뜨며
메인페이지로 오게 된다.

수정된거 확인~

기분좋다. 잘된다.

삭제 기능 만들기

수정 페이지에 들어가면 수정 과 삭제가 가능하게 할 거다.

코드 넣기

이번엔 일단 버튼을 만들어 보자.
posts-update.mustache 에 코드한줄을 추가한다. 수정 완료 버튼 옆에 놓을거니까 수정 완료 버튼 아래에 적어주자.

<!-- posts-update.mustache -->

		...

        <button type="button" class="btn btn-danger" id="btn-delete">삭제</button>

PostsApiController.java 에 delete 코드를 추가해준다.

// PostsApicontroller.java

	...

    @DeleteMapping("api/v1/posts/{id}")
    public Long delete(@PathVariable Long id){
        postsService.delete(id);
        return id;
    }

delete 는 수정 페이지에서만 볼 수 있으므로 IndexController 에는 delete 메서드가 필요없다.

하지만 js 에는 넣어야지. 기능은 해야하므로

index.js 코드에 delete 를 추가해준다.

// index.js

init : function() {
  ...
  
          $('#btn-delete').on('click', function(){
            _this.delete();
        });
	},
 
  ...
  
	},
  
    delete : function () {
        var id = $('#id').val();

        $.ajax({
            type: 'DELETE',
            url: '/api/v1/posts/' + id,
            dataType: 'json',
            contentType:'application/json; charset=utf-8'
        }).done(function() {
            alert('글이 삭제되었습니다.');
            window.location.href ='/';
        }).fail(function (error){
            alert(JSON.stringify(error));
        });
    }
};

PostsService.java 에 코드를 추가해준다.

// PostsService.java

	...

    @Transactional
    public void delete (Long id){
        Posts posts = postsRepository.findById(id)
                .orElseThrow(() -> new IllegalArgumentException("해당 게시글이 없습니다. id = " + id));

        postsRepository.delete(posts);
    }