[Javascript] JSON 데이터를 전송하는 기술

서버와, 또는 서버 사이에 데이터를 전송하는 대표적인 자바스크립트의 기술은 JSON입니다.

XML로 데이터를 교환하기도 하지만, 데이터 크기와 효율면에서 JSON이 더 좋기 때문에 JSON을 주로 사용해서 사실상 표준 데이터를 교환하게 됩니다.

 

 

 

1. 객체를 JSON 문자열로 변환

 

웹에서 자바스크립트로 생성하는 데이터는 주로 배열, 또는 객체입니다.

서버에 데이터를 전송하려면 이 배열, 또는 객체를 전송가능한 JSON 문자열로 변환을 해야 합니다.

 

let formData = {
    memberInfo: [
        {
        "userId": 101,
        "value": "라이언"
        },
        {
        "userId": 108,
        "value": "어피치"
        },
        {
        "userId": 227,
        "value": "콘"
        }
    ]
}

 

객체를 전송하려면 객체를 문자열 형태로 변환해야 합니다.

전송을 위한 문자열 변환은 다음과 같이 합니다.

 

JSON.stringify(formData) // {"memberInfo":[{"userId":101,"value":"라이언"},{"userId":108,"value":"어피치"},{"userId":227,"value":"콘"}]}

 

HTML 폼에서 데이터를 생성할 때 자주 발생하는 문제가 undefined 값 문제입니다.

서버로 undefined를 그대로 전송하면 예기치 못한 에러를 발생시킬 수 있습니다. 문자열로 변환된 undefined 속성은 문자열에서 제외되기 때문에 서버에서 해당 속성을 접근할 때 에러가 발생하게 됩니다.

 

let formData = {
    memberInfo: [
        {
        "userId": 101,
        "value": "라이언"
        },
        {
        "userId": 108,
        "value": undefined
        },
        {
        "userId": 227,
        "value": "콘"
        }
    ]
}

JSON.stringify(formData) // {"memberInfo":[{"userId":101,"value":"라이언"},{"userId":108},{"userId":227,"value":"콘"}]}

 

그래서 객체 데이터를 가공해서 데이터에 오류가 없도록 후처리를 한 후 문자열 변환을 해서 전송해야 합니다.

다음처럼 널리시(Nullish - undefined, null) 값은 빈 문자열로 변환을 한 후 JSON 문자열로 변환을 하면 됩니다.

 

let nFormData = {memberInfo: formData.memberInfo.map((user) => {
    user.value = user.value ?? ''
    return user
})}
console.log(JSON.stringify(nFormData)) // {"memberInfo":[{"userId":101,"value":"라이언"},{"userId":108,"value":""},{"userId":227,"value":"콘"}]}

 

 

 

2. 폼 데이터를 JSON 문자열로 변환

 

폼 데이터를 JSON 문자열로 전송하려면 FormData 객체로 폼 데이터 전체를 가져온 후 변환 루프문으로 처리를 해서 객체 배열로 가공을 해야 합니다.

 

const fd = new FormData(document.querySelector('#optionform'));

let arr = []
fd.forEach((value,key)=>{let obj = {};obj[key]=value??'';arr.push(obj)}) // 폼 데이터를 객체 배열로 변환
console.log(JSON.stringify({formData: arr})) // {"formData":[{"currpage":"1"},{"startdate":"2023-01-15"},{"enddate":"2023-01-22"},{"pagesize":"100"}]}​