Object object 해결법 및 multer form-data

실무에서 [Object object]를 만나는 건 생각보다 흔합니다. 이번에 프로젝트를 진행하면서 저는 Vue.js에서 Object로 구성된 배열을 Controller와 Service에 넘겨야 하는 작업을 진행하였습니다. 하지만 Controller에서 Debugging 결과 [Object object]만 나올 뿐 어떤 값도 찾아볼 수가 없었습니다. 해결 과정을 알아볼게요!

 

Object 해결법 및 multer 사용법

 

Multer Module

처음으로 설명할 것은 Multer 모듈입니다. 맨 처음에 form-data를 이용해서 값을 넘길 때, 아무런 값도 받아지지가 않았습니다. express에서는 multipart/form-data 를 다루기 위한 미들웨어인 Multer를 사용한다. node.js를 사용하던 저는 당연히 multer를 설치하지 않아 데이터가 넘어오지 않았습니다.

 

[설치] 

npm install --save multer

[적용] 

const multer = require('multer');
const formData = multer();

app.use(formData.array());

• none() : 텍스트 필드만 허용
• any() : 모든 파일을 허용
• single(filename) : filename으로 전달된 하나의 파일만 처리, 여러 개가 전달되면 에러 발생
• array(filename [, maxCount]) : filename으로 전달된 모든 파일 처리, maxCount에 초과되는 파일 개수면 에러

 

Multer를 설치하고 적용한 후에 form-data를 사용하니 값은 넘어왔습니다. 하지만 제가 원하는 값이 아닌 [Object object]의 데이터로 넘어옵니다. 어떻게 해결해야 할까요?

 

[객체를 넘기는 방법]

let url = this.$utils.makePathVariableURL('give', 'wb', 'partic', 'group-member-insurance-update');
        const form = new FormData();
        form.append('partiArr', this.partiList)
        form.append('updateYn', this.updateYn)
        this.$http
          .post(url, form)
          .then(response => {
            this.updateGroupLeader();
          })
          .catch(error => {
            console.log(error);
          });

 

프로젝트 내에서 한가지 예시를 들어보았습니다. 여러 명의 정보를 객체로 Controller에 넘겨야 하는 상황입니다. 여러 명의 정보는 this.partiList에 들어가 있고, post 방식으로 FormData에 붙여 넘깁니다. 하지만 객체를 이렇게 보냈을 때는 Controller단에서는 [Object object], [Object object]... 식으로 출력이 됩니다

 

여기서 문제는 넘겨주는 데이터(객체)를 Json화 시켜주지 않았기 때문에 최상위 부모인 Object로 표시가 됩니다. 데이터를 넘겨줄 때는 JSON.stringify()를 이용해야 합니다.

 

form.append('partiArr', JSON.stringify(this.partiList))

수정 후 Controller 단에서는 어떻게 출력이 될까요? 먼저 코드를 보겠습니다.

 try {
    let members = req.body.partiArr;
    let result = await particService.groupMemberInsuranceUpdate(members);
    const updateYn = req.body.updateYn;
    let msg = '단체원 보험가입';
    for (let i = 0; i < members.length; ++i) {
      if(updateYn == 'Y'){
        msg = '단체원 수정'
    }
      let data = await particService.particGet(members[i].particSeq);
      await historyService.insertHistory(data, msg);
    }
    res.status(200)
      .json({
        status: 'success'
      });
  } catch (err) {
    console.log('error:', err);
    sendResponseResultToFail(res, err);
    res.status(500).send(err);
  }

데이터가 넘어오느 값을 members 변수에 담고 Debugging 결과 String 타입으로 일렬로 쭉 나옴을 알 수 있습니다. 

배열안에 객체들이 전부 String화 된 모습

하지만, 저는 맴버들의 객체를 다시 Service 단으로 넘겨야 했기 때문에, 다시 반대로 자바스크립트 객체로 변환을 해줘야 했습니다. 그럴 때는 JSON.pares()를 사용해야 합니다.

 

let members = JSON.parse(req.body.partiArr);

이렇게 하면 Vue단에서 보냈던 멤버들의 객체를 담은 배열을 정상적으로 Service단까지 데이터를 보낼 수 있었습니다. 

 

[ 요약 ]

• express는 form-data를 쓰기 위해선 Multer 모듈을 설치해야 한다
• View단에서 Controller로 데이터를 넘길 때 JSON.stringify()를 이용해서 문자열로 변환해줘야 한다
• Controller에서는 반대로 문자열을 자바스크립트 객체로 변환하기 위해 JSON.parse()를 사용한다

---

👨‍💻 전자책 출간

아울러 제가  🌟비전공자에서 2년만에 보안 전문 중견기업으로 이직 한 방법들을 정리한 전자책을 출간 하게 되었습니다. 어떤 걸 공부해야 하는지, 이직을 위해서 무엇을 준비해야 하는지, 제가 받았던 기술 면접 리스트 등 다양한 목차로 구성되어 있습니다. 또한, 구매 시 1:1 채팅을 이용하여 포트폴리오 첨삭을 도와드리고 있습니다. 🐕전자책으로 얻은 모든 수익은 유기견 센터 '팅*벨 입양센터'에 후원될 예정입니다. 관심 있으신 분들은 아래 링크를 참고해주세요😁

https://kmong.com/gig/480954

비전공개발자 2년만에 중견기업 들어간 방법 | 14000원부터 시작 가능한 총 평점 0점의 전자책, 취

---