본문 바로가기
페이지를 벗어나는 경우 이벤트 처리 : onbeforeunload 유저가 페이지를 벗어날 때마다, 특정 처리를 해줘야 하는 상황엔 beforeunload 를 사용. 유저가 페이지를 벗어날 때 처리해 줄 코드와 함께 beforeunload event를 리스너에 등록하여 사용. ※ 뒤로가기, refresh 뿐만 아닌 submit, 브라우저 close 경우에도 beforeunload 리스너가 동작하게 되므로 주의. [ Sample ] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 $(window).on("beforeunload", callback); function callback(){ console.log("beforeunload callback !"); //do something return "changes will be lost!"; } function o.. 2019. 11. 1.
form 태그 file 명 바꿔주는 법 + UUID 1. 유저가 올린 파일의 이름을 그대로 사용하는 경우 (파일명을 바꿔줄 필요가 없는 경우) 1 formData.append('userpic', myFileInput.files[0]); cs 2. 유저가 올린 파일의 이름을 바꿔서 파일명 중복을 회피하여 사용해야 하는 경우 (파일명을 바꿔줘야 하는 경우) 3번째 인자로 바꿀 파일명을 넣어준다. 1 formData.append('userpic', myFileInput.files[0], 'changeFileNm.jpg'); cs 참고 : https://developer.mozilla.org/ko/docs/Web/API/FormData/append [ UUID 생성 함수 ] UUID.확장자 형태로 리턴 1 2 3 4 5 6 function makeUUID(fil.. 2019. 11. 1.
http file upload : $.ajax, XMLHttpRequest() 사용 file upload하기 : $.ajax, XMLHttpRequest() 사용 $.ajax 및 XMLHttpRequest 를 사용하여 파일업로드를 할 수 있습니다. $.ajax 는 jQuery 라이브러리로 내부적으로 javascript 의 XMLHttpRequest 객체를 사용합니다. XMLHttpRequest를 사용하기 편하게 구현해 놓은게 $.ajax 라고 보시면 될 듯 합니다. 파일 업로드 form 이 존재하며 파일 업로드 function을 호출 하는 jsp와 파일 업로드 function 이 분리되어 있는 fileupload.js 로 크게 두 파일로 소스를 분리했습니다. jQuery version 은 3.1.1 이며, jQuery 버전이 다른 경우 제대로 동작하지 않을 수 있습니다. [fileupl.. 2019. 10. 17.
$.ajax .done .fail 사용시 response data 가져오기 $.ajax .done .fail ajax .done .fail 사용시 response data 가져오기 $.ajax 호출시 success, error 혹은 done, fail 을 사용하여 서버 통신 결과를 콜백 처리 할 수 있다. 그 중 done, fail 을 사용시 어떤 값들을 뽑아 낼 수 있는지 알아보았다. jQuery document 를 읽어보니 아래와 같은 부분을 찾을 수 있었다. .done 의 경우 순서대로 data, textStatus, jqXHR 을 리턴해주고 있었다. [Example] 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 4.. 2019. 10. 16.
setInterval , setTimeout setInterval , setTimeout setInterval 일정 시간 간격을 두고 특정 함수를 실행시키고자 할 때 사용. 특정서버와의 통신을 N 회까지 retry(재시도) 시키는 기능, 타이머 기능(초시계 등) 등의 기능 개발시 사용 [실행] 1 var loopInterval = setInterval("loopFunc.checkLooping()", 1*2000); cs : 2초 뒤 loopFunc.checkLooping() 함수 실행 [중단] 1 2 3 if(loopInterval){ clearInterval(loopInterval); } cs : loopInterval 이 defined 이면(인터벌이 정의되어있으면) 인터벌을 제거. ※ 사용시 주의사항 setInterval은 실행시 "시간간격 >.. 2019. 10. 8.
Airbnb javascript 개발 가이드 https://github.com/ParkSB/javascript-style-guide 2019. 9. 13.
공통 팝업 확장 및 구현하기 : Customized PopUp (alert, confirm, loading) 팝업 확장 및 구현하기 : Customized PopUp (alert, confirm, loading) 자바스크립트 내장 함수인 alert, confirm 대화상자를 사용하여 유저에게 알림팝업을 띄우거나, 동의를 구하는 팝업을 띄울 수 있다. 하지만 팝업 UI를 개발자 마음대로 바꾸는게 불가하며 좀 더 다양한 기능(로딩 팝업 등)을 목적으로 한다면 alert confirm prompt 등의 팝업만으로의 개발에는 한계가 있다. 아래와 같이 총 세개의 팝업을 만들어 보자. alert : 단순알림팝업 comfirm : 확인 및 취소 옵션을 사용자가 선택 할 수 있는 팝업 loading : 로딩(ajax 등의 서버 통신 처리 등)을 하는 동안 떠있는 팝업 1. HTML 1 2 3 4 5 6 7 8 9 10 11.. 2019. 9. 11.
localStorage vs sessionStorage localStorage vs sessionStorage 1. localStorage 1) 개념 * stores data with no expiration date : 사용자의 브라우저에 영구적으로 보관되는 데이터 * 5MB 제한 * 보안 취약 * 동기방식 처리 참고 : https://www.w3schools.com/html/html5_webstorage.asp 2) 사용 케이스 사용자가 마지막에 찾아본 사람을 사용자(client) 브라우저의 로컬스토리지에 저장. 사용자가 재진입시 마지막에 찾아본 사람의 정보를 재활용 할 수 있다. 참고 : https://css-tricks.com/localstorage-examples/ 2. sessionStorage 1) 개념 stores data for one ses.. 2019. 9. 10.
Mysql hierarchy sql 계층구조 쿼리 2 : 그리기(Multi selectbox) Mysql hierarchy sql 계층구조 쿼리 2 : 그리기(Multi selectbox) https://developyo.tistory.com/54 위의 쿼리에서 꺼내온 정보를 화면에 뿌려보자. 1. 가이드 목록을 출력하기 위한 controller 1 2 3 4 5 6 7 8 9 10 11 12 @RequestMapping("/loadGuideList.do") public ModelAndView loadGuideList(HttpServletRequest request, @RequestBody GuideVO param) throws Exception { ModelAndView mav = new ModelAndView("jsonView"); List guideList = service.selectGui.. 2019. 8. 23.
submit, replace, href 차이 [ submit, replace, href 차이 ] submit 페이지 이동시 다음페이지로 데이터 전송 document.id.action="/test.do"; document.id.submit(); href 데이터 전송없이 페이지만 이동 location.href="/test.do"; replace 데이터 전송없이 페이지만 이동(새로운 페이지로 변경) location.replace("/test.do"); ※ href와 replace의 차이 href : 속성, 뒤로가기 가능 replace : 메소드, 뒤로가기 불가 https://yuchae.tistory.com/223 https://opentutorials.org/module/2919/22904 2019. 8. 12.