3. 블로그 프로젝트

화면단을 부트스트랩을 이용해 꾸미고 DTO를 추가하고, thymeleaf를 이용하여 메인 화면에 게시글 목록을 렌더링한다.

 

main.js

let createButtonClicked = document.getElementById("createButtonClicked");
let createPost = document.getElementById("createPost");

if (createButtonClicked !== null) {
    createButtonClicked.addEventListener('click', function() {
        window.location.href = "/create"
    });
}

if (createPost !== null) {
    createPost.addEventListener('click', function() {
        let title = document.getElementById("title");
        let content = document.getElementById("content");
        let data = {
            'title' : title.value,
            'content' : content.value
        }
    
        $.ajax({
            type: "POST",
            url: "/api/post",
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8"
        }).done(function() {
            window.location.href = "/"
        }).fail(function(error) {
            alert(error)
        })
    })

}

처음에 작동이 되지 않아 애를 먹었는데, if 문을 설정하지 않으면 null에 addeventlistener를 사용하게 되고 오류를 불러일으키기 때문에 작동하지 않는 것이었다. 맨 위에 getElementById를 불러오는 과정에서, 어떤 페이지에는 해당 엘리먼트가 없을 수도 있다. 따라서 null이 충분히 가능한데 그걸 고려하지 않아 발생한 문제였다. 

 

PostApiController

@AllArgsConstructor
@RestController
public class PostApiController {
    private PostService postService;

    @PostMapping("/api/post")
    public void createPost(@RequestBody PostRequestDto requestDto) {
        postService.createPost(requestDto.getTitle(), requestDto.getContent());
    }

    @PutMapping("/api/post/{id}")
    public void updatePost(@PathVariable Long id, @RequestBody PostRequestDto requestDto) {
        postService.updatePost(requestDto.getTitle(), requestDto.getContent(), id);
    }

    @DeleteMapping("/api/post/{id}")
    public void deletePost(@PathVariable Long id) {
        postService.deletePost(id);
    }
}

기존에 String title, String content를 매개변수로 받던걸 DTO 클래스를 추가하고 @RequestBody로 받도록 수정했다. 위의 자바스크립트 오류를 해결했는데, title과 content가 null로 들어오는 문제가 발생하였다. 알고 보니 그냥 String title 이런식으로는 받을 수 없고, @RequestParam을 추가해야 했고, 애초에 html 파일에서도 name 속성이 따로 있었어야 했다는 사실을 까먹어서 발생한 문제였다. 또한 만약에 Post에 어떤 필드를 추가하게 될때, DTO가 없다면 API의 매개변수 목록을 일일이 수정해야 하지만, DTO 클래스를 만들어 놓으면 그 클래스만 수정하면 되기 때문에 DTO를 추가하였다. 예전에는 필요한 이유를 모르고 그냥 따라써서 필요성을 느끼지 못했지만 이번에는 그 이유를 직접 느끼게 된 경험이었다.