[팜팜 리팩토링] Ajax를 Axios로 리팩토링

✔  Ajax를 왜 Axios로 리팩토링 했나?

팜팜 프로젝트 중 코드리뷰를 하면서 Axios의 방법을 알게되었습니다. 그러나 당시에는 어떤 코드인지 정확히 이해가 가지 않았고, 시간에 쫓겨 Axios가 아닌 Ajax 방식으로 코드를 작성했습니다.

 

요즘은 Axios를 많이 사용한다는 이야기를 들어서 프로젝트가 끝나고 리팩토링을 해보자는 생각이 들었습니다.

RESTful API로 수정 후 일부 Ajax 코드를 Axios로 수정해보게 되었습니다.

 

Axios를 왜 많이 사용하나요?

1. HTTP 통신 라이브러리로 간단하고 직관적인 API를 제공
2. 개발자가 JSON 데이터를 파싱하지 않아도 되므로 코드의 가독성과 유지보수성 향상
3. 유연한 비동기 통신 처리가 가능해져 개발자가 더욱 효율적으로 개발 가능

 

---

✔ Axios로 리팩토링을 해봅시다!

 

< 답글 등록 수정 전 코드 >

    $.ajax({
        url : "/board/comment/insert",
        data : {"boardNo" : boardNo,
                "memberNo" : memberNo,
                "commentContent" : commentContent,
                "commentParent" : parentNo,
                "checkok" : checkok},
        type : "post",
        success : result=>{
            if(result>0){

                ringCommentNotify('comment', 202, parentNo, commentContent, result);

                messageModalOpen("답글이 등록됐습니다.");
                selectCommentList();
            }else{
                alert("답글 등록에 실패했습니다.");
            }
        },
        error : ()=>{
            alert("답글 ajax 통신 오류ㅠ");
        }
    });

 

< 답글 등록 수정 후 코드>

    axios.post('/comments', {
        "boardNo" : boardNo,
        "memberNo" : memberNo,
        "commentContent" : commentContent,
        "commentParent" : parentNo,
        "checkok" : checkok
    })
    .then(function (response) {
        if(response.data > 0){
            ringCommentNotify('comment', 202, parentNo, commentContent, response.data);
            
            messageModalOpen("답글이 등록되었습니다.");
            selectCommentList(); // 다시 ajax로 불러오기
            
        }else{
            alert("답글 등록에 실패했습니다.");
        }

    }).catch(function(error) {
        console.log("답글 등록 통신오류");
    })

}

 

이 전의 Ajax 코드에서는 url, data, type을 다 적어줬어야 했습니다. 

 

그러나 Axios 코드에서는 훨씬 간단해진 것을 볼 수 있습니다. 

 

RESTful API로 리팩토링 하면서 "/board/comment/insert"로 작성한 주소를 "/comments" 수정해줬었습니다.

댓글을 등록하는 코드라 POST로 요청을 보내 통신을 했습니다.

후에 통신이 성공한다면 .then() 메서드를 실행하고 실패하면 .catch() 메서드를 실행해 에러를 출력해줍니다.

 

 

< 댓글 삭제 수정 전 코드 >

        $.ajax({
            url : "/board/comment",
            type : 'delete',
            data : {"commentNo" : commentNo,
            "authority" : loginAuth},
            success : result=>{
                if(result>0){
                    messageModalOpen("댓글이 삭제되었습니다.");
                    selectCommentList();
                }else{
                    alert("댓글 삭제 실패");
                }
            },
            error : (req, status, error)=>{
                alert("댓글 삭제 ajax 통신 실패")
            }
        })

 

< 댓글 삭제 수정 후 코드 >

        axios.patch('/comments/'+commentNo)
            .then(function (response) {
                console.log(response);
                if(response.data > 0){
                    messageModalOpen("댓글이 삭제되었습니다.");
                    selectCommentList();
                }else{
                    alert("삭제 실패 했습니다.");
                }
            }).catch(function(error) {
                console.log("게시글 삭제 통신 오류");
            })

 

댓글 삭제도 RESTful API로 리팩토링 해주면서 주소를 "/board/comment"에서 " '/comments/' + commentNo " 수정해줬습니다. 댓글 삭제 시 해당 댓글 번호만 넘겨주면 되어서 data에 값을 넘기는 것이 아니라 pathVariable에 담아서 PATCH 요청을 보내 통신을 했습니다.

 

보통 삭제 시 DELETE 요청을 보내지만 저는 댓글을 삭제하는 것이 아니라 deleteFlag를 'N'에서 'Y'로 수정만 해주는 코드를 작성해 PATCH 요청을 보냈습니다. 

(이에 대해서 PATCH 요청을 보내야하나 DELETE 요청을 보내야 하나 고민이 많았지만 이 코드는 단순히 DB의 값 하나만 수정해주는 코드라 PATCH 요청을 보냈습니다. )

 

✔ 회고

직접 코드를 작성해보면서 Ajax보다 Axios가 훨씬 코드가 간단하고 쉬운걸 체감할 수 있었습니다.

 

axios.put / axios.patch 이런 식으로 요청 방식을 적어줌으로써 어떤 요청에 대한 코드인지 식별하기 쉬웠습니다.

ajax에선 url에 통신할 주소를 적어주었지만 ()안에 주소를 넣어줌으로써 ajax에선 3줄 이상으로 작성할 코드가 한 줄로 짧아짐을 보면서 코드가 간결해짐을 보았습니다. 

 

전반적으로 Axios로 리팩토링을 해보면서 매우 유익한 시간을 가졌습니다.

코드가 간결해진 걸 보면서 이래서 리팩토링을 꾸준히 하면서 클린 코드를 작성해 나가는 구나를 깨닫게 되었습니다.

 

앞으로도 리팩토링에 대한 공부를 하면서 가독성이 좋으며 훨씬 더 깔끔한 클린 코드를 작성할 수 있도록 성장해나갈 것 입니다!