반응형 웹 개발10 [javascript] 동기 Ajax 로딩바_ ajax synchronous progressbar [javascript] 동기 Ajax 프로그래스바_ loading bar for sync ajax [javascript] 동기 Ajax loading bar_ progress bar for sync ajax Ajax에서 async 즉, 동기/비동기를 적용하는 옵션이 있다. async를 true로 주면 비동기, false를 주면 동기로 작동한다. ajax에서 async를 false로 적용하게되면, ajax가 완벽하게 실행하는동안 자바스크립트 동작이 안되기 때문에 적용해두었던 로딩바 또는 프로그레스바가 작동하지 않게된다. ■ 해결방법 $('#loading').show(); let param = {'test': 'value'}; setTimeout(function() { $.ajax({ url : 'URL',.. 2022. 7. 18. [Javascript] base64 이미지 업로드 _ base64 to File 객체 [Javascript] base64 이미지 업로드 _ base64 to File 객체 base64 이미지 파일을 부득이하게 활용하게 되는 경우가 있다. 또는 quill js editor 사용 시 ql-image 파일이 base64로 나오게 된다. 이 때 백엔드 단에서 base64를 디코딩할지, 자바스크립트 단에서 처리할지 고민하게 된다. base64를 자바스크립트 File 객체로 변환하여 처리하면 편하다. ■ base64 이미지 -> File 객체로 변환하는 함수 function base64toFile(base_data, filename) { var arr = base_data.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr = atob(arr[1]), n =.. 2022. 6. 10. [CORS] 로컬 통신간의 CORS 해결 및 Cross-Origin Resource Sharing은 무엇일까? [CORS] 로컬 통신간의 CORS 해결 및 Cross-Origin Resource Sharing은 무엇일까? 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS) 즉, 사이트 A가 사이트 B에서 콘텐츠를 가져오려고 하면 사이트 B는 응답 헤더를 보내 이 페이지의 콘텐츠에 특정 출처에서 액세스할 수 있음이 확인되야 합니다. ＃발생순서 1. 사이트 A가 사이트 B에서 페이지를 요청하면 브라우저는 실제로 네트워크 수준에서 요청된 페이지를 가져오고, 2. 응답 헤더에 사이트 A가 허용된 요청자 도메인으로 나열되는지 확인합니다. 3. 사이트 A는 이 페이지(사이트 B)에 액세스할 수 있음을 확인받지 못한다면, 4. 브라우저는 JavaScript 코드에 대한 응답 데이터를 거부.. 2022. 5. 17. [네이버 지도 api (4)] 주소를 검색해서 지도 이동하기 Geocoding 좌표변환 [네이버 지도 api (1)] 지도 생성 후 마커 이미지 넣기 - 스프링 + 자바스크립트 (tistory.com) [네이버 지도 api (2)] 마커 클릭시 정보창 띄우기 - 스프링 + 자바스크립트 (tistory.com) [네이버 지도 api (3)] 다중마커, 다중 정보창 - 스프링 + 자바스크립트 (tistory.com) 주소를 검색해서 지도를 이동하는 소스코드 입니다. 글의 하단부에는 복사할 수 있는 전체 소스코드가 있습니다. ■ 네이버지도 API 설정하기 Geocoding 설정 허용 URL은 http://localhost:8000 으로 추가해서 저장해준다. ■ 신청된 API 인증정보 확인 Client ID를 이용할거니깐 확인해두기 ! ■ ■ 작성 지도 표출 및 좌표를 보여주는 페이지 작성 주소 .. 2022. 4. 27. 이전 1 2 3 다음 반응형
