axios요청중 만난 undefined

상황

평화롭게(?) 프로젝트를 진행하던 도중, 문제가 발생하였다...

게시글 이미지를 수정하는 api통신을 하는 도중 나타난 404 error때문에 당황했다.

고민

무엇이 문제인가 해서 구글링 해보는게 나에게 쓸만한 정보는 찾지 못했다.
내 코드에서는 분명 end-point를 명확하게 입력해주었는데 뭐가 문제지? 라는 생각을 했다.

//이미지 업로드 api [patch요청]
const BOARDS = {
  path = "/boards",
  async modifyImg(image: FormData, boardId: number): Promise<any> {
    try {
      const result: AxiosResponse = await instance.patch(
        `${BOARDS.path}/images`,
        image,
        {
          params: {
            boardId: boardId,
          },
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        },
      );
      return result;
    } catch (err) {
      Promise.reject(err);
    }
  },
}

그럼 왜 undefined가 떴을가? 분명 images라는 문자가 분명하게 존재하는데!!

그래서 우선 하나하나 씩 매개변수로 넘겨주는 값들을 실제 리터럴값으로 변경하여 넘겨줘 보았다.
=> 잘 작동함

해결

원래라면 요청이 boards/images?boardId=200 이런식으로 들어가야 한다. 하지만 images가지 몽땅 잘려서 undefined가 나온 이유는 params의 값으로 받은 boardId값을 잘못 넘겨줘서 문제가 발생한 것이다...
boardId 값을 백엔드로부터 넘겨받아서 그 값을 다시 요청을 보내는데 사용하는데, 백엔드단에서 잘못보내서 []빈 배열을 보내는 바람에 값이 입력이 안돼서 undefined가 나온 것이다.... 백엔드에 요청해서 값 변경해주고 에러 해결~!