들어가며

사이드 프로젝트를 하며 시큐리티 에서 로그인 정보를 받는 부분(POST /login) 에 계속 FromData 가 아닌 JSON 으로 보내며 날린 시간을 되짚어보며 이 포스트를 작성합니다.

클라이언트와 서버와 통신을 할 때에는 어떻게 데이터를 주고 받을 지 약속된 형식들이 존재합니다.
예) JSON, XML, TEXT, FROMDATA, ....etc

서로 다른 형식으로 요청 또는 응답을 하면 통신이 실패하게되는데요.

이 포스트에서는 FromData 와 JSON을 알아보고 차이점을 살펴보도록 하겠습니다.

FromData

Ajax 로 폼 전송을 가능하게 해주는 JS 의 객체입니다.

• HTML

<form name = "form" id="form" action = "Servlet" method = "post" enctype="multipart/form-data">
	ID : <input type="text" name="id" id="id">
	PW : <input type="password" name="pw" id="pw">
	<input type="file" class="file-input1" id="file1" name="file1">
	<input type="file" class="file-input2" id="file2" name="file2">
	<input type="button" onclick="multipart_jsonwithfile_ajax()" id="fileBtn" name="fileBtn" value="send"/>
</form>

• JS

<script type="text/javascript">
function multipart_jsonwithfile_ajax() {

    let get_form = document.form;
    
    let obj = new Object();
    obj.userID = get_form.id.value;
    obj.userPassword = get_form.pw.value;
    let json_data = JSON.stringify(obj);
    
    let get_file = new FormData();
    get_file.append("file", $("#file")[0].files[0]);
    get_file.append("file2", $("#file2")[0].files[0]);   
    get_file.append("JSON", json_data);
    
    // append를 통해 선택적으로 전송도 가능하고 new FormData($(‘#form’)[0]);을 통해 전체를 보내는것도 가능하다
    $.ajax({
        type : 'POST',
        url : "jsonServlet",
        processData : false, // 필수
        contentType : false, // 필수
        data : get_file,
        success : function(data) {
            alert("success");
        },
        error : function(jqXHR, textStatus, errorThrown) {
            alert(error: " + textStatus);
        }
    });
}
</script>

JSON

JSON(JavaScript Object Notation) 은 경량의 데이터 교환 형식으로, 텍스트 기반 으로 구조화된 데이터를 표현합니다.
사람이 읽고 쓰기 쉬우며 컴퓨터가 파싱하고 생성하기 용이합니다.
구조화된 데이터를 전송하는 데 주로 사용됩니다.

{
	"ID": "홍길동",
	"PW": "1234"
}

차이점

FormData와 JSON은 데이터를 전송하는 방식뿐만 아니라, 사용 용이성, 서버 처리 방법, 보안 측면에서도 차이를 보입니다.

데이터 형식과 구조

• FormData는 멀티파트 폼 데이터를 다루는 데 적합한 반면, JSON은 텍스트 기반의 구조화된 데이터를 표현하는 데 사용됩니다.

사용 용이성 및 호환성

• FormData는 주로 파일 업로드와 같은 비구조화된 데이터를 처리할 때 사용되며, JSON은 API 통신과 같이 구조화된 데이터를 주고받을 때 주로 사용됩니다.

서버 처리 방법의 차이

• 서버 측에서는 FormData를 처리하기 위해 추가적인 파싱 과정이 필요할 수 있으며, JSON 데이터는 보통 더 간단하게 처리됩니다.

보안 측면

• 두 방식 모두 HTTPS 프로토콜을 통해 안전하게 데이터를 전송할 수 있으나, 전송되는 데이터의 성격에 따라 적절한 보안 조치가 필요합니다.

사용사례

• 파일 업로드나 대용량 비구조화 데이터 전송(파일 업로드) 시 FormData가 유리합니다.
• 구조화된 데이터의 API 통신(JSON을 사용한 API 요청)에는 JSON이 더 적합합니다.

마무리

FormData 와 JSON 을 그게 그거겠지? 라는 생각에 관심이 없었던것 같다...
오늘도 또 하나 알아갑니다!