[JS]프론트 단에서 이메일 전송 기능을 구현해보자 (fetch)

저번 포스팅에 이어 JS를 이용하여 프론트 단에서 이메일 요청값을 넘겨주는 기능을 구현해보자. 참고로 다른 프레임워크 없이, jQuery만 이용한 생JS를 이용한 포스팅이다.

서버를 모두 설정해줬다면, 이번엔 프론트에서 요청 객체를 넘겨주는 부분을 구현해보자.

0. html 소스코드에서 작성 폼 부분을 <form> 태그로 감싸준다.

                        <form id="form" method="POST">
                            <div class="description">
                                <p class="en">Fill out the requestion form below.</p>
                                <p class="ko">아래의 요청서를 작성해주세요. 작성하신 내용은 강사에게 전달됩니다.</p>
                            </div>
                            <div class="request_form">
                                <div class="name">
                                    <p>
                                        <span class="en">Name</span>
                                        <span class="ko">이름</span>
                                    </p>
                                    <p>
                                        <input name="name" type="text">
                                    </p>
                                </div>
                                
                                .
                                .
                                .
                                
                            </div>
                            <div class="submit_btn">
                                <button type="submit class="submit">
                                    <p>Submit</p>
                                </button>
                            </div>
                        </form>

1. 해당 페이지의 js 파일에 다음과 같이 작성한다.

form.addEventListener('submit', (e) => {
    var myForm = document.getElementById('form');
    var payload = new FormData(myForm);

    payload.append("instrIdx", localStorage.getItem("instrIdx"));

    console.log([...payload]);

    fetch('http://localhost:8080/email', {
        method: 'POST',
        body: payload
      })
      .then(res => res.json())
      .then(data => console.log(data));
  });

FormData를 json으로 변환하는 방법을 여러가지 시도해봤지만 대부분 깔끔하지 않아서 그냥 FormData 형식으로 보내는 걸 선택했다.
FormData 형식으로 보내게 되면 모든 데이터의 값이 일괄 문자열로 처리되어 전송되기 때문에, 필요하다면 서버 단에서 숫자형 데이터로 변환해주는 작업이 필요하다.

＋ 또한 json이 아닌 FormData로 요청값을 받기 때문에 서버의 Controller에서 파라미터에 @RequestBody 어노테이션이 아닌 @ModelAttribute 어노테이션을 지정해주어야 한다. 사용자 지정 형식으로 받겠다는 의미이다.

내가 진행중인 웹페이지의 경우 이전 페이지에서 contact 버튼을 누르면 요청서 작성 페이지가 나오고 폼을 모두 채우고 submit 버튼을 누르면 이메일이 전송되는 형식이다.
이전 페이지에서 localStorage에 instrIdx 변수를 저장해놓고, 다음 페이지에서 submit 시 저장했던 instrIdx 변수를 바디에 추가하여 보내주어야 하므로, payload.append("instrIdx") 을 통해 추가해주었다.
이 과정이 필요없다면 생략해도 무관하다.

이렇게만 설정해주면 이메일 전송 API 연동 완료!

＋ 추가

1-1. localStorage 변수 할당에 관해서는 이 포스팅을 참고하길 바란다.(추후 업뎃 예정) 삽질로 얻어낸, localStorage 등의 전역 변수, 전역 DB 사용 시 주의점이 포함되어 있다.

1-2. 만약 CORS 오류가 발생한다면 이 포스팅을 참고하기 바란다.(추후 업뎃 예정) 바로 아래와 같은 화면 말이다.