Intro a 링크를 통한 파일 다운로드를 제공 하고 있었는데, 개선이 필요했습니다. 전체 데이터를 poi를 활용해 엑셀 파일을 생성 한 뒤에 반출을 해 주는 과정인데, 데이터가 클 수록 파일을 작성하는데 워낙 시간이 오래 걸리다보니 기다리는동안 사용자 경험이 너무 좋지 않았습니다. 그래서 파일 다운로드 과정을 AJAX를 이용해 비동기로 요청하고, 요청을 기다리는 동안 waitMe 를 이용해 로딩바를 보여주는 식으로 개선을 하기로 했습니다. https://github.com/vadimsva/waitMe AJAX 이를 위해 jQuery AJAX를 활용해 코드를 구현 해 보았습니다. $('#export').on('click', function () { var wait = $(th..

에러 AJAX 비동기 요청으로 GET 에서는 정상적으로 작동하던 메서드가, POST로만 바꾸면 응답을 302로 보내는 문제가 있었습니다. 아무리 이것 저것 다 체크를 해 보아도 응답이 /denied로 가는 리다이렉트가 됩니다. 그래서 결국 denied(text) 라는 텍스트만 덜렁 뜨는 상황이 발생했습니다. 로그인을 한 상태임에도 스프링 시큐리티가 권한을 체크 하다가 뭔가 잘못되었나 싶어서 .permitAll() 로 변경을 해 보아도 마찬가지였습니다. 원인 스프링 시큐리티의 CSRF(Cross-Site Request Forgery) 설정 때문 입니다. 스프링 시큐리티에서는 csrf 설정이 기본적으로 enabled 되어 있기 때문에 csrf 에 대한 토큰을 받도록 명시되어 있으며 GET 요청이 아닌 요청,..

'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..

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

학원 최종 프로젝트에 검색 기능을 넣으려다가 선생님께 추천 받아 elastic search를 사용해 보고 있습니다. 기왕 DB를 구축해 사용하는거, 채팅 메시지에 대해서는 RDBMS 말고 Elastic Search를 활용하려 생각하고 있습니다. 그것을 위해 여러가지 실험을 해보다가 한번 ajax로 비동기 데이터를 전달 받아 화면에 렌더링 하는 테스트를 시행해 보았습니다. 간단하게 위의 코드만 작성했고, 해당 index/type/ (gaia/message/) 에는 몇가지의 더미 데이터를 미리 넣어두었습니다. 테스트를 해봤는데.. CORS policy로 인해 꽤나 고생했습니다. 위의 에러 해결이 필요하신 분은 아래 링크를 참고해주세요. https://shanepark.tistory.com/113 No 'Ac..