rest api 활용하기

ajax를 이용하여 POST, PUT, DELETE는 어렵지 않게 구현할 수 있다. 그러나 항상 GET으로 json을 받아와서 화면에 어떻게 뿌리는 지 잘 몰라 thymeleaf를 이용하여 렌더링 하곤 했었다. 이를 제이쿼리를 통해 해결했다(물론 자바스크립트만으로도 가능하다)

$(function() {
        $.ajax({
            url: '/api/board',
            method: 'GET',
            dataType: 'json'
        }).done(function(json) {
            let boardBody = document.getElementById('boardBody');

            for (const key in json) {
                boardBody.innerHTML +=
                    '<tr>' +
                    '<td>' + json[key].id + '</td>' +
                    '<td><a href="/' + json[key].id + '">' + json[key].title + '</a></td>' +
                    '<td>' + json[key].content + '</td>' +
                    '<td>' + json[key].writer + '</td>' +
                    '</tr>';
            }
        })
    })

.done은 function을 필요로 하는데, 이때 function에 매개변수를 지정해 두면 서버에서 보낸 json 데이터를 받을 수 있다.

하지만 이렇게 하면 모든 페이지에서 get을 실행하여 데이터를 받아온다는 문제가 생긴다. 이는 다음과 같이 해결할 수 있다.

 

if (document.getElementById("boardBody") !== null) {
    $(function() {
        $.ajax({
            url: '/api/board',
            method: 'GET',
            dataType: 'json'
        }).done(function(json) {
            let boardBody = document.getElementById('boardBody');

            for (const key in json) {
                boardBody.innerHTML +=
                    '<tr>' +
                    '<td>' + json[key].id + '</td>' +
                    '<td><a href="/' + json[key].id + '">' + json[key].title + '</a></td>' +
                    '<td>' + json[key].content + '</td>' +
                    '<td>' + json[key].writer + '</td>' +
                    '</tr>';
            }
        })
    })
}

처음에 조건문으로 특정 id를 찾고, 있으면 그 때 데이터를 받아오게 한다. 이렇게 하면 다른 페이지에서는 이 코드가 작동하지 않는다.