서버 통신 : form-data와 JSON

황에녹·2023년 11월 17일

프론트가 서버에 데이터를 요청할 때
어떻게 데이터를 주고 받을지 형식을 정해야 한다.

서로의 형식이 다르면,
올바르게 서버에 데이터를 요청했어도
요청이 실패할 수 있다.

예를 들어,
필자가 다음과 같이 post 요청을 했다.

2가지 형식의 post 요청

Post.jsx

import 'React' from 'react' //리액트 라이브러리 사용합니다.
import 'axios' from 'axios' //비동기적 통신(ajax) 라이브러리로 axios 사용합니다.

	//어떤 검색값(searchedValue)을 props로 받아옵니다.
    /* searchedValue 형식 :
    	{
    		"carName" : "쏘나타"
    	}
    */
    
function Post({searchedValue}) { 
	//post를 보낼 주소 상수화
	const dummyAPI = 'http://localhost:3000/dummy'; 
    
    //버튼 클릭 시 post 요청 보내는 함수
    const handleClickPost = {
		axios.post(dummyAPI, searchedValue)
        .then((response)=> {
        alert('작성이 완료되었습니다.')
        })
        .catch((error)=> {
        console.log(error)
        });
    
    };

	return (
    <>
		<button onClick={handleClickPost}>버튼 클릭</button>
	</>
    )
};

export default Post;

props로 검색값을 받아와서
버튼을 누르면 서버로 post요청을 보내는 코드다.

분명 서버에서 보내라는 데이터를 잘 보냈는데
요청 실패 라는 메시지를 응답받았다.

그래서 다음과 같이 요청 방법을 바꿔보았다.

RePost.jsx

import 'React' from 'react' //리액트 라이브러리 사용합니다.
import 'axios' from 'axios' //비동기적 통신(ajax) 라이브러리로 axios 사용합니다.

	//어떤 검색값(searchedValue)을 props로 받아옵니다.
    /* searchedValue 형식 :
    	{
    		"carName" : "쏘나타"
    	}
    */
    
function RePost({searchedValue}) { 
	//post를 보낼 주소 상수화
	const dummyAPI = 'http://localhost:3000/dummy'; 
    
    //버튼 클릭 시 post 요청 보내는 함수
    const handleClickPost = {
    
        // <-- 수정 사항 : formData -->
    	const formData = new FormData();
        formData.append("carName", searchedValue);
        
		axios.post(dummyAPI, formData)
        .then((response)=> {
        alert('작성이 완료되었습니다.')
        })
        .catch((error)=> {
        console.log(error)
        });
    
    };

	return (
    <>
		<button onClick={handleClickPost}>버튼 클릭</button>
	</>
    )
};

export default RePost;

수정된 부분은 코드의
<-- 수정사항 : formData --> 부분을 보면 된다.

같은 데이터를 보냈지만,
아래 코드에서는 데이터 형식을 formData로 바꾸어주었고
응답은 요청 성공 이었다.

다른 점은 무엇일까?

요점은
서버에서 데이터 요청 형식을
form-data 형식으로 설정해놨던 것이었다.
(Post.jsx는 form-data형식이 아닌 그냥 JSON형식)

form-data와 JSON의 차이를 간단히 정리해본다.

차이점	form-data	JSON
type of	object(객체)	string(객체형식의 문자열)
Content-Type	multipart/form-data	application/json
용도	일반적으로 파일을 업로드 할 때	복잡하고, 중첩된 데이터 구조를 다룰 때