axios 통신 시 params 붙여서 GET 방식 통신하기

일간 두더지 탈출기 (부제. 삽질 멈춰!…)
HappyHouse 프로젝트를 진행하며 발생한 에러를 정리합니다.

문제 상황

문제가 발생한 배경은 다음과 같다.

게시판 서비스를 구현하던 중 특정 태그들이 포함된 게시글을 조회하고자 했다. “조회” 목적이기때문에 요청 메서드는 GET 방식으로 보내야 했고, 태그 리스트를 함께 보내야하므로 @RequestBody로 보내려고 했다.

근데, 아무리 프론트에서 태그 리스트를 바디에 포함해서 보내도 백엔드 서버에서는 바디가 없다고 하는거다!! URI가 충돌하는 줄 알고 경로도 바꿔보고 이것 저것 다해봤는데 알고보니 GET + Body가 불가능했던 것…

stackoverflow

stackoverflow 글을 대충 요약해보면, axios로 요청을 보낼 때 GET + Body를 보내면 상태코드 400번대 에러가 뜨면서 요청이 잘못됐다고 한다. 이건 비단 axios만의 문제는 아니고 Http 프로토콜 자체가 Body는 GET 방식으로 보낼 수 없게 만들어뒀다고 한다.(PUT, POST, DELETE, and PATCH 요청만 가능)

** 그런데, 재밌는 사실은 axio가 아닌 다른 통신 라이브러리의 경우 종종 GET + Body를 지원하기도 한다고 한다. 쉽게 테스트해보려면 Postmap API Platform에서 해보면 된다. 포스트맨에서는 GET + Body 통신이 가능하다.. ㅎㅎ

아무튼 본론으로 돌아와서, GET + Body는 권장하지 않는 방법이니 GET + @RequestParam 방식을 이용해야하는데, @RequestParam과 같은 경우에는 URI의 쿼리스트링에 데이터를 붙여 보내기때문에 전송하는 데이터의 길이에 제한이 있고 보안에 주의해야한다는 문제가 있다. 지금 구현하는 부분에서 전송하는 데이터는 게시글 태그이기때문에 보안에는 문제가 없고, 데이터 길이 문제 역시 선택 태그 개수를 제한한다면 큰 문제가 없을 것이라 판단하여 GET + @RequestParam 방식을 사용하기로 했다!

프론트에서 태그 리스트를 params로 보내기

Wrong Case

/**
 * [GET] 백엔드 서버에서 태그로 게시글 조회
 * @param {int} tagList - 태그 리스트
 * @param {function} success - 게시글 조회 성공
 * @param {function} fail - 게시글 조회 실패
 */
function getPostsByTags(tagList, success, fail) {
    api.get(`/board/hashtags`, { params: tagList })
        .then(success).catch(fail);
}

지금까지 params 붙여서 보내는건 많이 해봤으니까! 😙 는 역시 두더지 같은 소리였다 ㅎ

위와 같이 태그 리스트 객체 { tag: [] } 를 tagList 파라미터로 보냈는데 백에서는 여전히 받지 못했다. 좀 더 찾아보니 리스트 객체를 보내는 방식은 조금 다르더라!

Correct Case

import qs from "qs";

/**
 * [GET] 백엔드 서버에서 태그로 게시글 조회
 * @param {int} tagList - 태그 리스트
 * @param {function} success - 게시글 조회 성공
 * @param {function} fail - 게시글 조회 실패
 */
function getPostsByTags(tagList, success, fail) {
    api.get(`/board/hashtags`, {
            params: tagList,
            paramsSerializer: params => {
                return qs.stringify(params, { arrayFormat : 'brackets' })
            }
        })
        .then(success).catch(fail);
}

태그 리스트 안에 포함된 [] 괄호 문자를 제대로 인식하여 배열을 인덱싱하여 보내기 위해서는 qs라는 라이브러리를 이용해야 한다. 태그 리스트 내용을 for문 돌면서 문자열로 붙여 직접 쿼리스트링을 만들 수도 있겠지만 좀 더 영리한 방법을 쓰고싶다면 위와 같이 해보자!

다음과 같이 예쁘게 쿼리스트링을 만들어서 요청 파라미터를 보내준다.

"http://happyhouse/board/hashtag/tag[0]=apt&tag[1]=rent"

아 그리고 qs 라이브러리를 이용하기 위해서는 프로젝트 경로에서 npm install qs 한 뒤 axios 통신 메서드가 포함된 파일 상단에 import qs from "qs"; 해야함을 잊지 말자!

npm qs

백에서 태그 리스트를 params로 받기

여기까지 하면 다인 줄 알았는데 백에서는 여전히 파라미터를 못받았다… GET + Params를 찾아봐도 거의 다 프론트엔드에서 보내는 방식만 설명해두고 백엔드에서 받는 방식은 정리가 안되어있더라. 이건 너무 기본이라 그런걸까…? 두더지는 오늘도 새롭게 배웁니다..🥲

백엔드에서 GET 메서드로 온 RequestParam을 받기 위해서는 다음과 같이 해줘야 한다. 참고로 백엔드 서버는 Spring Boot 환경으로 구현중이다.

@GetMapping("/hashtags")
public ResponseEntity<List<Post>> retrievePostByHashtag(@RequestParam(value="tag[]") String[] hashtagList) {
    List<Post> posts = postService.retrievePostsByHashtag(hashtagList);
    if (posts.size()!=0) return ResponseEntity.ok(posts);
    else return ResponseEntity.noContent().build();
}

컨트롤러에서 매개변수로 String 타입의 배열을 바로 받을 수 있는데, @RequestParam(value="tag[]") 어노테이션을 잘 붙여줘야 한다.

value=“params 배열을 value으로 갖는 객체에서 key이름[]”
{ tag: [] } 에서 “tag”를 value의 값부분에 넣어주고 바로 뒤에 배열을 표현하는 ”[]“을 붙여준다

이렇게하면 GET 메서드를 통해 보낸 파라미터 배열 객체를 배열로 받아 사용할 수 있다!

진짜 끗!