Object.fromEntries(formData)2 + Axios와 Json

 

case "get":

                    let data = null;

                    try{

                        data=Object.fromEntries(formData); // 어제까지 한 여제에서는 formData를 객체로 만듦.
                        그런데 axios에서는 json이 필요. 그래서 위쪽의 코드로 formData를 Json으로 바꾸고 있었음.

                    }catch(e){  // 오늘은 애초에json 으로 받아내기 때문에,
                                        풀어낼 수 있는 객체가 없어서 바로 catch문으로 타게 됨.

                        data=formData;

                    }

 

~~~강의 시간 중 강사님께서의 설명~~~

어제까지는 FormData라는 클래스의 객체를 보내고 있었다.
그건 폼태그의 모든 애들을 다 보내는 꼴이다.

그럴 필요가 없을 것 같아서 그냥 Json으로 묶어서 보냄.

(Java였으면 난리나는 일.
데이터 타입을 다른 것을 주는 행위이기에)

하여튼 이렇게 했더니, 
기존에 작성했던 코드로는 에러가 났었다.
=> 기존에 작성했던 코드는, 멀쩡한 객체를 Json으로 분해시키는 코드였었다.
그런데, 이미 Json으로 값을 보내고 있었다.

멀쩡한 객체를 Json으로 분해하는 기능에 Json을 파라미터로 넣는다?
=> 에러!

그래서 위의 코드로 바꾸었다.

해당 코드의 흐름은,

formData를 json으로 분해해서 data에 넣도록 시도해보고,
되면 그대로 진행,
분해 못하면 그냥 formData 원본을 data에 넣게 함.

~~~

 

 

 

(08-13 AxiosHelper에서)

Q1.

data=Object.fromEntries(formData) 이 코드는, formData라는 객체를 data라는 변수에 Json 형식으로 변환해서 담는 코드인거야?

 

 

 

A1.

네, 맞습니다. data = Object.fromEntries(formData) 코드는 formData 객체를 JSON 형식의 객체로 변환하여 data 변수에 담는 코드입니다.

formData가 FormData 객체일 경우, Object.fromEntries(formData)는 이를 키-값 쌍의 배열로 변환한 후, 다시 일반 객체로 변환합니다. 이 일반 객체는 JSON 형식과 유사한 구조를 가지게 됩니다.

 

예를 들어, formData가 다음과 같다면:

 

const formData = new FormData();

formData.append('key1', 'value1');

formData.append('key2', 'value2');

 

Object.fromEntries(formData)는 다음과 같은 객체를 생성합니다:

 

{

  key1: 'value1',

  key2: 'value2'

}

 

이 객체는 JSON 형식과 동일한 구조를 가지므로, data 변수에 JSON 형식으로 변환된 데이터를 담는 것과 같은 효과를 갖습니다.

 

 

 

Q2.

그렇다면, 애초에 formData가 Json 형식으로 들어왔다면,

data=Object.fromEntries(formData)

이 코드는 에러가 생겨서 아래의 catch문으로 이동하게 되는건가?

 

 

 

A2.

네, 맞습니다. formData가 이미 JSON 형식의 객체로 들어왔다면, Object.fromEntries(formData)는 에러를 발생시킬 수 있습니다. Object.fromEntries는 이터러블 객체(예: Map 또는 키-값 쌍의 배열)를 받아서 객체로 변환하는 함수이기 때문에, JSON 형식의 객체를 직접 처리할 수 없습니다.

따라서, formData가 JSON 형식의 객체일 경우, Object.fromEntries(formData)는 에러를 발생시키고, 코드 실행은 catch 블록으로 이동하게 됩니다. catch 블록에서는 formData를 그대로 data 변수에 할당하게 됩니다.

try {

    data = Object.fromEntries(formData);

} catch (e) {

    data = formData;

}

 

이렇게 하면 formData가 JSON 형식의 객체일 때와 FormData 객체일 때 모두 적절히 처리할 수 있습니다.

 

 

 

Q3.

axios 통신에는 Json이 필요한거고?

 

 

 

A3.

네, 일반적으로 axios를 사용하여 서버와 통신할 때 JSON 형식의 데이터를 주고받는 것이 일반적입니다. 특히, POST 요청의 경우 서버에 JSON 형식의 데이터를 전송하는 것이 일반적입니다.

 

코드(08-13의 AxiosHelper)에서 GET 요청의 경우, 데이터를 URL의 쿼리 문자열로 보내기 위해 params 옵션을 사용하고 있습니다. 이때 formData가 FormData 객체일 경우 이를 JSON 형식의 객체로 변환하려고 시도하고, 실패하면 그대로 사용합니다.

try {

    data = Object.fromEntries(formData);

} catch (e) {

    data = formData;

}

response = await axios.get(url, {

    params: data,

    headers: headers

});

 

POST 요청의 경우, formData를 그대로 전송합니다. 이때 formData가 JSON 형식의 객체일 수도 있고, FormData 객체일 수도 있습니다.

response = await axios.post(url, formData, {

    headers: headers

});

 

따라서, axios를 사용하여 서버와 통신할 때 JSON 형식의 데이터를 사용하는 것이 일반적이며, 필요에 따라 FormData 객체를 JSON 형식으로 변환하여 전송하는 것입니다.