real-world프로젝트 이슈 - vue에서 오브젝트에 담긴 리스트를 보내고 싶을때

Posted Nov 22, 2022 Updated Sep 12, 2024

By ,

3 min read

real-world project 구현 과정 카테고리 보기

개요

나는 vue단에서 이렇게 데이터를 보내야했다.

{
  "article": {
    "title": "How to train your dragon",
    "description": "Ever wonder how?",
    "body": "You have to believe",
    "tagList": ["reactjs", "angularjs", "dragons"]
  }
}

처음에 {}와 article의 title,description,body을 감싸주는데에는 큰 문제가 없었다.

근데 Java단에서 저 tagList에 대해 인식할 수 없다고 했다.

js코드에서는 다음과 같이 요청 코드를 작성하고 있었다.

  
const tag = ref("");
const article = reactive({
    title: "",
    description: "",
    body: "",
    tagList: new Array(tag),
})
...

 axios.post(url+"/api/articles",JSON.stringify({article}) ,{headers:{
    ...
 }

지나고와서보면 코드부터 틀린긴했다. tag가 아니고 ref에 의해서 tag.value를 넣어줘야했다. 근데 저래도 값이 제대로 들어가지 않는다.

물론 저 코드를 계속 수정하긴 하였다.

아무튼 나는 원래 나타난 저 스크린샷의 원인을 해결하기 위한 방법을 찾고 다녔다.

생각

@JsonFormat을 사용해보기 https://stackoverflow.com/questions/39041496/how-to-enforce-accept-single-value-as-array-in-jacksons-deserialization-process
커스텀 방법2 https://parksay-dev.tistory.com/51
응용할 수 있을지 https://stackoverflow.com/questions/17560258/pass-array-data-from-javascript-in-browser-to-spring-mvc-controller-using-ajax
JSON 역직렬화 커스텀 https://multifrontgarden.tistory.com/172
ObjectMapper 커스텀 https://stackoverflow.com/questions/14588727/can-not-deserialize-instance-of-java-util-arraylist-out-of-value-string

어떻게든 파싱을 직접 커스텀해서 할 생각이었다. 결론은 모두 안 되었다.

해결

모두 잘 되지 않고, 가만히 생각해보니 vue에서는 list에 대해서 동적으로 상태관리를 할 수 없다고 했다.

vue에서는 List에 요소를 추가할때, this.$set을 사용한다고 한다. 하지만 Composition API 방식에서는 어떻게 사용하는지는 모르겠고, arry.push()메소드를 통해 요소를 추가할 수 있다고 한다.

그래서 ,를 기준으로 태그들을 파싱해준 후, 순차적으로 list에 넣어서 요청을 보내도록 하였다.

  
      article.tagList.push(tag.value);
      console.log(article)
      console.log(JSON.stringify(article));
      console.log(JSON.stringify({article}));
      console.log(tag.value);
      console.log({article});