[Project] mini1 - Ajax DB 통신과 fail 처리

이 글은 향로님의 [스프링부트로 웹 서비스 출시하기]를 참고하며 프로젝트를 만들며 정리한 글입니다.

3) 스프링부트로 웹 서비스 출시하기 - 3. SpringBoot & Handlebars로 화면 만들기

 

 

👉 기본 환경

- Language: Java

- DB: MySQL

- IDE: IntelliJ

 

 

🤔 Ajax로 1시간 넘게 해매다가 정리해봅니다.

이 사건이 발생했던 이유는

    - 게시글이 18년도이고, 지금은 23년이므로 5년의 격차가 있습니다.

    - 그래서 BootStrap이 작동을 하지 않아서, Official_Docs에서 기본 폼을 퍼오고 비교하느라 약간 😐 이 표정이 되었고,

    - RestController와 Controller를 구분해서 진행을 하는 부분을 놓쳤습니다.

 

    - Controller에서 api 주소를 남모르게 바꿔서 진행하고 있었기 때문에 코드 복붙만으로 해결할 순 없었습니다.

    - 그래서 처음에 문제를 해결한 줄 알고 좋아하다 더 잘못된게 분명 없다며 스스로 우기다가 늦었습니다.

 

    - Front 쪽으로 디버깅을 많이 안해봐서 🌄 먼 산을 좀 바라봤습니다.

 

 

고친 김에 정리해봅시다.

 

 

main.js

var main = {
    init : function () {
        var _this = this;
        $('#btn-save').on('click', function () {
            _this.save();
        });
    },
    save : function () {
        var data = {
            title: $('#title').val(),
            content: $('#content').val(),
            author: $('#author').val()
        };
 
        $.ajax({
            type: 'POST',
            url: '/post',
            dataType: 'json',
            contentType:'application/json; charset=utf-8',
            data: JSON.stringify(data)
        }).done(function(res) {
            alert('글이 등록되었습니다.');
            location.reload();
        }).fail(function (error) {
            console.log(err);
        });
    }
 
};
 
main.init();
 

문제는 POST 방식으로 post를 통해 데이터가 저장이 되는데 fail로 연결되었습니다.

 

 

post를 호출해서 200 OK가 반환이 되므로, DB에도 저장이 됩니다.

 

하지만, done에서 alert 창이 발생하지 않고, console.log에 err이 defined가 되지 않았다는 메세지만 나옵니다.

 

(+ err가 not defined인 이유

서버가 200 OK 상태 코드를 반환했음에도 불구하고 fail() 콜백 함수가 호출되었다면,  err 매개변수는 undefined로 남게 될 수 있다고 합니다. )

 

문제는 Controller에 있습니다.

@Controller
@RequiredArgsConstructor
public class WebController {
 
    private final PostService postService;
 
    @GetMapping("/")
    public String main() {
        return "main";
    }
 
    @PostMapping("/post")
    public void savePost(@RequestBody PostSaveDTO postSaveDTO){
        postService.savePost(postSaveDTO);
    }
 
}
 

1개의 Controller로 진행을 하다가 @ResponseBody를 savePost에 선언하는 것을 잊어버렸습니다.

🚨 그래서 추가를 했지만, 그래도 상황은 관성의 법칙에 따라 그대로였습니다.

 

사실 void에서 @ResponseBody를 선언해도 큰 의미가 없는 것이 return 값을 view가 아닌 문자로 인식시켜 JSON으로 만들어주는 역할을 하는데, void는 return 값이 없습니다.

 

그리고 문제는 이 void입니다.

 

Controller는 Ajax 요청을 받아서 처리를 하고 이에 대한 결과를 리턴해야합니다.

이 때, 응답값이 없다면 에러가 발생합니다.

 

그래서 Controller를 변경해야합니다.

그리고 이 참에 게시글과 동일하게 RestController와 Controller를 분리했습니다.

@RestController
@RequiredArgsConstructor
public class WebRestController {
 
    private final PostService postService;
 
    @GetMapping("/hello")
    public String hello(){
        return "Hello, IT World!";
    }
 
    @PostMapping("/post")
    public Long savePost(@RequestBody PostSaveDTO postSaveDTO){
        return postService.savePost(postSaveDTO);
    }
 
}
 

입력 데이터의 id(PK)를 반환시켜서 return하는 것으로 수정했습니다.

 

 

🤹 결과 확인

 

 

 

🔗 소스 코드

GitHub - HJ0216/mini1: SpringBoot+JPA Board Mini Project

 

📚 참고 자료

실행은 되는데 ajax 404 에러가 날때