캔버스 화면에 그린 그림 데이터를 서버에 파일로 저장한다는 로직을 한번 풀어보기로 한다. 개발 환경 및 구현 로직 시나리오는 1. html5 canvas view 코딩 : 그림판 기능 구현은 아니고 고정된 그림이 찍혀 있다고 가정 2. 그림 데이터를 이미지 파일화(?) 하여 java spring/mvc 웹 애플리케이션 서버로 업로드 : jquery.ajax() 으로 submit() 구현 3. 서버 사이드 requestMapping 메소드에서 파일 파라미터 값 확인 : 상세한 파일 생성 처리까지는 다루지 않고 Controller requestMapping 메소드에서 org.springframework.web.multipart.MultipartFile 객체 타입으로 전달되는지 확인하기로 한다. html sa..

ES6 알못이라고 가정할 때, 화살표 함수란? // Anonymous function (ES5) function (param1, param2, ... paramN) { ... } // Anonymous function (ES6) (param1, param2, ... paramN) => { ... } (일단 그냥 function () {} 이라고 외우면 좀 편하다..;;) ES6 타입으로 주름좀 잡아본다고 막 화살표 걸어봤더니 이해 안 되는 다음과 같은 현상이 일어났다!! arrow es5 arrow es6 1번에서는 의도한대로 버튼이 찍히지만2번의 경우는 window 가 찍힘;; $(JQuerySelector).on(event), 즉 htmlDOMObject.addEventListener(event) 안..

var singleLine = '여러줄코딩'; var mutiLine = '여\ 러\ 줄\ 코\ 딩'; console.log(mutiLine === singleLine); ==> true (뜬금없는 뒷북 발견;;)

1. name 속성 값이 "abc" 으로 시작하는 인풋 엘리먼트 모두 선택 $('input[name^="abc"]') 2. name 속성 값이 "abc" 를 포함하는 인풋 엘리먼트 모두 선택 $('input[name*="abc"]') 3. name 속성 값이 "_id" 으로 끝나는 인풋 엘리먼트 모두 선택 $('input[name$="_id"]') .. 유독 꼭 필요할 때마다 맨날 생각 안 나는 흔한 Jquery selector

오픈 소스 API 와 통신하는 ajax function 에서 느닺없이 먹통이 되길래"ERR_CONNECTION_REFUSED" 알고 보니, 보안 담당 조직에서 내부망에서 API 서버와의 네트워크를 차단했단다.. ("보안" 강화 조치라고 씨부려도 "적폐" 강화 조치라고 판단할 수 밖에 없음;;) fail 이라는 function 을 쓰면 ajax 통신 네트워크 오류를 캐치할 수 있다는 정보를 발견했는데... $.ajax({ url : '//api.opensrcurl', dataType : 'jsonp', timeout : 3000, .... , success : function () { .... }, error : function () { console.log('1. error 를 타고...'); }}).f..

$.ajax() 데이터 전송할 때 주로 form input 데이터를 serialize() 해서 파라미터로 전송하는 방식을 적지 않게 쓴다. $.ajax({ type : 'POST', url : '/some/post/url', data : $('#formId').serialize(), success : function (result) { .... }, .... }); 위에서 serialize() 된 놈의 특정 값을 별도로 핸들링 해야 하는 경우가 있다. 예를 들면 아래 상황 : { input 에 입력한 값을 submit() 직전에 변경하고 싶은데 ... 1. 전송할 form input element 가 졸라게 많을 때 일일이 new object { key : value, ... } (json) 으로 노가다..