'append' called on an object that does not implement interface FormData. 문제 jQuery Ajax와 FormData를 이용해 파일을 비동기로 업로드 하던 중 해당 아래와 같은 에러 발생 'append' called on an object that does not implement interface FormData 코드는 다음과 같다. $('#migration_form').on('submit', function () { var formdata = new FormData(); const file = $('#input_file')[0].files[0]; formdata.append..

문제 Multipart 요청을 비동기로 다른 API 서버에 보내려고 하는데 에러가 발생했습니다. 사용자가 업로드 한 파일에 문제가 있는지 (금지 단어 포함 등) 를 확인 하기 위해 어플리케이션 내부에서 해당 파일을 또 다른 어플리케이션(파일 검사API)으로 보내는 로직을 수행하도록 구현을 하고 있었습니다. 사용자에게서 받은 Multipart file을 그대로 다시 API 서버로 전송을 하는데, Single Thread로 수행 했을 때는 문제가 없었습니다. 하지만 Single Thread로 수행 시, 요청한 사용자 입장에서는 파일 업로드에 걸리는 시간이 사용자 -> 어플리케이션서버 -> 검증API서버 이렇게 이렇게 두배로 늘어나게 됩니다. 그래서 어플리케이션 내부에서 검증 서버로의 전송은 비동기 요청으로 ..

Ajax 비동기 요청 발생시 로딩 바 만들기. 지금 만들고 있는 프로젝트를 SPA(Single Page Application ) 으로 만들고 있습니다. 동기 방식의 페이지 이동을 하는 웹 어플리케이션을 만들었을때와는 다르게 세세히 신경써야 하는 부분이 굉장히 많은데요, 그 중에는 수업시간에서 따로 다룬 적 없는 부분도 종종 있었습니다. 몇가지 예를 들자면, 1. 페이지 이동시 url 변경 시키기 -> history.pushState 함수를 이용해 해결 했습니다. 2. 뒤로가기 이벤트 발생시 처리 -> pushState 발생시 data에 기록해둔 데이터를 바탕으로 $(window).bind("popstate", function(event){} 로 뒤로가기에 대한 바인딩을 해 해결 했습니다. 3. 페이지 이..