[Tistory] 직렬화(Serialization)

1. 직렬화(Serialization)

2. serialize()의 경우

<form id="myForm">
    <input type="text" name="username" value="user123">
    <input type="email" name="email" value="user@example.com">
    <input type="password" name="password" value="secret">
</form>

username=user123&email=user%40example.com&password=secret

3. 내 프젝 적용 (이메일 인증 안하면 못 넘어가게)

data: $(this).serialize(), // 폼 데이터 직렬화

3-1. 직렬화 과정

1. 폼 데이터 수집:
• $(this)는 현재 이벤트가 발생한 폼을 가리키고 serialize() 메서드는 이 폼 내의 모든 입력 필드(예: input, select, textarea)의 값을 수집한다.

2. 직렬화:
• 수집된 데이터는 URL 인코딩 형식의 문자열로 변환함. 예를 들어, 다음과 같은 입력 필드가 있다고 가정해보자

<input type="text" name="username" value="user123">
<input type="email" name="email" value="example@example.com">
<input type="hidden" name="isEmailConfirmed" value="true">


<div class="email-box d-flex">
    <input class="my_auth_form_box_input" id="email" type="email" name="email" placeholder="이메일" maxlength="60"
     value="compilemate@gmail.com" required/>
     <button class="btn btn-outline-info btn-sm" type="button" id="emailAuthButton">인증하기</button>
</div>

• 이부분이 문자열로 다 변환 된다는 거군!!

3-2. AJAX 요청에 데이터 전송

• 이렇게 직렬화된 데이터는 AJAX 요청의 data 속성에 사용되어 서버로 전송됨

• . 서버는 이 데이터를 파싱하여 필요한 정보를 처리