🔒 문제 상황

게시판을 만드는 프로젝트에서 새 글을 작성하여 API POST를 하였는데 자꾸 MAXIMUM CALL STACK SIZE EXCEEDED 에러가 발생했다. 내가 전송하는 data의 형태를 보니 {\"데이터\" ...} 와 같은 형식으로 넘어가고 있었다. 구글에 찾아보니 API GET 할 때 와 같이 보내면 안되고 FormData에 담아 데이터를 묶어 전송해야한다고 한다.

🔑 문제 해결

나와 같은 에러가 발생한다면 아래의 두가지를 확인해보자

1. 데이터 전송 (데이터를 전송하는 컴포넌트 VUE 파일 - board.vue)

[GET]

<script>
import {getData} from "@/폴더경로/board.js";
method: {
  getData(){
    let param = 20 //게시글 번호
    getData(param) // 파라미터를 넘겨 API 데이터 가져오기
      .then((res) => {
      if(res.hasOwnProperty("rsp_msg") === false){
        // 데이터가 성공적으로 받아졌을 때 실행할 로직
        console.log(res) // 받아온 데이터를 콘솔로 출력
      }
    })
      .catch((error) => {
      console.log(error)
    })
  },
}
</script>

[POST]

<script>
import {sendData} from "@/폴더경로/board.js";
method: {
  postData(){
    let formData = new FormData();
    formData.append("title", "게시글 제목")
    formData.append("content", "게시글 내용")
    formData.append("writer", "작성자")
    sendData(formData) // formData 형태로 전송하기
      .then((res) => {
      if(res.hasOwnProperty("rsp_msg") === false){
        // 데이터가 성공적으로 전송되었을 때 실행할 로직
        this.$router.go() // 새로 고침
      }
    })
      .catch((error) => {
      console.log(error)
    })
  },      
}
</script>

2. API 호출 (API 호출 JS 파일 - board.js)

[GET]

export function getData(params){
  return request({
    url: "/api/주소",
    method: "get",
    params : params,
  })
}

[POST]

export function sendData(params){
  return request({
    url: "/api/주소",
    method: "post",
    data: params, // GET 방식과는 다르게 data 항목 추가
    params : params,
  })
}