03/24(Wed) @Transactional과 @RequestBody

🚩 어제까진 CR만 만들었고 오늘은 UD를 마저 만들어보자

 

@Transactional과 @RequestBody를 빼먹고 코드를 작성했을 때 어떤 일이 일어나는지 알아보자.

자주 빼먹고 작성하는 바람에 어떤 일이 일어났는지 이미 알고 있지만 정리 하고 넘어가야겠다.

 

 

📕 Update와 Delete

 

수정, 삭제를 추가한 detail.html

 

 

 

📑 코드 흐름

1. 삭제 기능

삭제는 간단하다. 삭제 버튼을 눌렀을 때 게시글이 없어지면 되니까 클라이언트 -> 컨트롤러 매핑을 해보자.

 

function addBoardHTML(id, title, username, createdAt, contents) {
            let tempHtml = `<div class="card board">
                                <div class="card-header title-area">
                                    <div class="one-title">${title}</div>
                                    <footer class="blockquote-footer">${username} &nbsp;|
                                        <cite title="Source Title"> ${createdAt} &nbsp;| </cite>
                                        <span id="${id}-board-edit" class="board-edit" onclick="location.href='rewrite.html?id=${id}'">수정 &nbsp;|</span>
                                        <span id="${id}-board-del" class="board-del" onclick="delBoard(${id})">삭제</span>
                                    </footer>
                                </div>
                                <div class="card-body">
                                    <blockquote class="blockquote mb-0 content-area">
                                        <p class="one-content">${contents}</p>
                                    </blockquote>
                                </div>
                            </div>`
            $('#boards-box').append(tempHtml);
        }

 

detail.html에서 삭제 버튼을 클릭하면 delBoard(id) 함수를 호출하게 된다.

 

delBoard(id)함수는 아래와 같다.

function delBoard(id) {
            $.ajax({
                type: "DELETE",
                url: `/api/boards/${id}`,

                success: function (response) {
                    alert("삭제 되었습니다.")
                    window.location.assign("index.html");
                }
            })
        }

클라이언트에서 요청을 했으니 컨트롤러를 살펴보면 아래와 같다.

 

@DeleteMapping("api/boards/{id}")
    public Long deleteOneBoard(@PathVariable Long id) {
        boardRepository.deleteById(id);
        return id;
    }

 

repository에서 deleteById(id) 메서드를 호출하면 끝이다.

 

삭제 버튼을 클릭하면 저 코드들이 실행이 되고 다시 클라이언트에게 응답을 전해주는데, 뷰에서는 삭제 되었다는 alert창이 뜨고 index.html 페이지로 이동하게 된다.

 

1) 테스트

 

게시글을 2개를 작성해 보았다. 제일 위에 있는 글을 삭제 해보자.

index.html

 

 

게시글을 클릭하고 detail.html 페이지로 들어와서 삭제 버튼을 누르니 삭제가 되었다고 한다.

 

detail.html

 

제일 위에 있던 글이 없어진 걸 확인할 수 있다.

 

삭제 후 이동한 index.html

 

 

 

2. 수정 기능

 

detail.html 에서 수정 버튼을 클릭했을 때 rewrite.html 페이지로 이동하게 만들었다.

이동하면서 url에 쿼리로 아이디를 같이 보낸다.

 

페이지는 이렇게 구성해놨고, 수정 기능은 만들면서 실수를 많이 해서 애먹은 부분 중심으로 정리해보려고 한다.

 

먼저 클라이언트에서 컨트롤러로 요청하는 부분 코드는 아래와 같다.

$.ajax({
                type: "PUT",
                url: `/api/boards/${id}`,

                contentType: "application/json",
                data: JSON.stringify(data),
                success: function (response) {
                    alert("수정 되었습니다.");
                    window.location.href="index.html";
                }
            })

컨트롤러 코드를 살펴보자.

@PutMapping("api/boards/{id}")
    public Long updateBoard(@PathVariable Long id, @RequestBody BoardRequestDto boardRequestDto) {
        boardService.update(id, boardRequestDto);
        return id;
    }

여기서 등장하는 @RequestBody.

처음에 @RequestBody를 빼먹고 코드를 작성한 채로 코드를 돌렸다. 이렇게 서버를 돌리면 어떤 일이 일어날까? 이미 겪어봤지만 다시 한 번 알아보자.

 

 

 

1) @RequestBody

 

수정, 삭제를 추가한 detail.html

 

 

수정 버튼을 클릭하면 rewrite.html 페이지로 이동하게 되고, rewrite.html의 페이지는 아래와 같다.

 

edit 버튼을 클릭해도 아무 일도 일어나지 않는다.

인텔리제이 콘솔을 살펴보자.

 

인텔리제이 콘솔

난리가 났다.

다시 @RequestBody를 작성해주고 서버를 돌려보자.

 

rewrite.html

 

 

index.html

detail.html

 

index.html,  rewrite.html,  detail.html 페이지 모두 유기적으로 잘 연결돼서 결과물이 나온다.

 

 

@RequestBody가 도대체 뭐길래... 라는 생각을 안할 수가 없다.

@RequestBody는 HTTP body안에 JSON 형식으로 넘어온 데이터를 Java Object타입으로 변환시켜주는 역할을 한다.

 

클라이언트 코드를 다시 보자.

function rewriteBoard(id) {
            let title = $('#inputTitle-re').val();
            let username = $('#inputUsername-re').val();
            let contents = $('#inputContents-re').val();

            let data = {'title':title, 'username':username, 'contents':contents};

            $.ajax({
                type: "PUT",
                url: `/api/boards/${id}`,

                contentType: "application/json",
                data: JSON.stringify(data),
                success: function (response) {
                    console.log(response)
                    alert("수정 되었습니다.");
                    window.location.href="index.html";
                }
            })

        }

 

클라이언트에서 컨트롤러에게 data를 제이슨 형식으로 넘겨줬다.

컨트롤러는 이 데이터를 받아야 하는데, 이를 java에서 받으려면 java object로 변환을 해줘야 한다.

이런 작업을 해주는 것이 @RequestBody이다. 

요약하자면 @RequestBody는 http 요청 내용을 자바 객체로 매핑하는 역할을 한다.

 

@PutMapping("api/boards/{id}")
    public Long updateBoard(@PathVariable Long id, @RequestBody BoardRequestDto boardRequestDto) {
        boardService.update(id, boardRequestDto);
        return id;
    }

 

@PathVariable 적어주는 건 안까먹는데, @RequestBody는 몇 번 빼먹고 적어서 오류가 많이 났다.

잊지말자.

 

 

 

2) @Transactional

@Transactional을 달아주지 않았을 땐 어떤 일이 발생할까..?

 

BoardService.java 파일에서 @Transactional 어노테이션을 빼버리고 서버를 다시 돌려보자.

 

게시글을 하나 등록했다.

index.html

 

게시글을 수정해보자.

 

rewrite.html

 

게시글이 수정되었다고 한다. 수정되었다는 alert창이 떴고, 확인 버튼을 누르면 다시 index.html 페이지로 돌아가게 될 것이다. 

 

게시글 수정 후 이동한 index.html

 

...?

분명히 수정이 됐다고 했는데, 이동한 index.html 페이지에는 수정 전 글이 그대로 보인다.

@Transactional 어노테이션을 빼먹은 대가이다.

 

@Transactional 이란 뭘까? 왜 수정 글이 반영이 안되는 걸까?

구글링하면서 공부해보니 트랜잭션을 먼저 알아야 하는데, 트랜잭션이란 데이터베이스의 상태를 변경시키는 작업 또는 한번에 수행되어야 하는 연산들을 의미한다고 한다.

 

@Transactional은 선언적 트랜잭션이라고 하는데, xml파일에서 설정해주거나 이렇게 어노테이션을 달아서 사용하면 된다.

그리고 Spring에서 JPA 기술을 쓸 때 빼놓을 수 없는 기능 중 하나가 @Transactional이라고 하는데, transaction begin, commit을 자동으로 수행해주고, 예외가 발생되면 rollback처리를 자동으로 수행해준다고 한다.

 

 

public Long update(Long id, BoardRequestDto boardRequestDto) {
        Board board = boardRepository.findById(id).orElseThrow(
                () -> new IllegalArgumentException("아이디가 존재 하지 않는다. 익셉션 터짐")
        );
        board.update(boardRequestDto);
        return board.getId();
    }

@Transactional 어노테이션을 달지 않고 코드를 작성하니 이 메서드는 데이터베이스와 아무런 관련이 없는 메서드가 돼니, 저 코드가 실행이 돼도 db에는 아무런 영향을 못미쳐서 업데이트가 되지 않았던 건가...?

아니면 실행은 됐는데 commit을 안해줘서 업데이트가 안된 건가..? 이 부분은 잘 모르겠다.

(아시는 분 계시면 댓글로 알려주시면 감사하겠습니다.)

강의 자료에는 @Transactional은 SQL 쿼리가 일어나야 함을 스프링에게 알려준다고 돼있는데, 이 부분은 좀 더 파봐야겠다.

 

 

@Transactional을 달고 서버 재시작하니 수정이 잘 되고, 반영도 잘 된다.

 @Transactional
    public Long update(Long id, BoardRequestDto boardRequestDto) {
        Board board = boardRepository.findById(id).orElseThrow(
                () -> new IllegalArgumentException("아이디가 존재 하지 않는다. 익셉션 터짐")
        );
        board.update(boardRequestDto);
        return board.getId();
    }