주말에 쓰는 개발일기/javascript

함수형 프로그래밍(Functional Programming)

프로그래밍 패러다임 프로그래밍 패러다임은 어떤 방식으로 프로그래밍 할 것인가에 대한 방식과 기법 중 하나이다. 절차지향프로그래밍, 객체지향 프로그래밍, 함수형 프로그래밍, 함수형 반응형 프로그래밍 등이 있다. 함수형 프로그래밍 함수형 프로그래밍 (函數型 프로그래밍, 영어: functional programming)은 자료 처리를 수학적 함수의 계산으로 취급하고 상태와 가변 데이터를 멀리하는 프로그래밍 패러다임의 하나이다. -위키백과 사람의 사고방식과 비슷한 객체지향, 절차지향 프로그래밍과 다르게, 함수형 프로그래밍은 대량의 데이터를 병렬적으로 안정적으로 처리할 수 있도록 수학적 함수처럼 프로그램을 구현한다. 마치 파이프라인처럼 인풋을 넣으면 처리과정을 거쳐 아웃풋이 나오게 되며, 외부에서는 함수 내부에 ..

[Javascript] 이벤트 버블링과 이벤트 캡쳐링

이벤트 버블링 이벤트 버블링이란 부모, 자식 태그에 모두 onclick 이벤트가 있을 경우 자식태그를 클릭하면 부모태그까지 클릭이벤트가 전파시키는 html의 특징이다. 브라우저가 이벤트를 감지할 때 해당 요소에서 최상위 요소까지 이벤트를 전파시킨다. 이벤트 캡쳐링 이벤트 캡쳐링이란 이벤트버블링과는 반대로 최상위 태그부터 자식태그까지 이벤트를 전파하는 방식이다. addEventListener() API에서 옵션 객체에 capture:true를 설정해주어 설정한다. 이벤트 위임 이벤트 버블링을 이용하여 부모태그에 이벤트 리스너를 적용하여 자식태그에서 발생한 클릭이벤트를 감지, 제어할 수 있다. 태그가 부모이고 onclick 이벤트를 가진 태그가 자식일 경우, 이벤트 버블링이 일어나야 한다고 생각했다. 하지만..

오류 : Uncaught TypeError: window.showModalDialog is not a function

IE 위주로 개발되었던 프로젝트에서 크롬에 맞도록 수정하는 과정에서 일어난 에러이다. IE에서는 Modal 이라는 개념으로 팝업을 띄우게 되어있으나, 크롬에서는 새창의 팝업을 뜨게 되어있다. Modal의 경우 showModalDialog를 이용하여 팝업과 부모창 사이 데이터 이동을 하였으나, 새창으로 뜨는 크롬의 경우 해당 방법으로는 데이터 이동이 불가능하다. 너무 많은 소스가 showModalDialog로 작성되어있어, 사용할 수 있는 라이브러리를 찾았고, 전자정부프레임워크에서 js를 찾게 되었다. https://www.egovframe.go.kr/wiki/doku.php?id=egovframework:com:v3:cmm:showmodaldialog egovframework:com:v3:cmm:show..

크롬에서 opener의 함수호출 오류 (개발자도구를 켜야 작동할 경우)

크롬에서 팝업으로 데이터를 받아다가 부모창에서 실행하는 소스가 실행되지 않는 것을 발견하였다. opener의 함수는 인식하나 실행이 되지 않는 상태였다. 그런데, 부모창의 개발자도구를 켜면 또 실행이 된다. 왜 크롬에서만...??? 이것으로 3일을 끙끙 앓다가 결국 리더님께 sos쳤다... //자식창 let tmpArr = setVal.split(","); opener.doCreateSection(tmpArr[0],tmpArr[1],tmpArr[2]); this.close(); //부모창 doCreateSection = function(member_seq,cmpy_code,day_max_prog) { if(confirm("...")){ ... } } 그런데 부모창에 떠있던 warning... 부모창에서는..

chrome 80 samesite 정책 (크롬 / 엣지 결제모듈 인증모듈 사용 후 세션 유실)

크롬과 엣지에서 결제 후 로그아웃이 되어버리고 결제정보가 남지 않는 이슈가 있었다. 사용자 입장에서는 결제를 다 했는데도 정보가 남지 않으니 회사에서 돈을 떼어가버리는 격... 토스 전자결제 페이지에서는 사용자의 결제내역이 남는데, 우리 테이블에는 정보가 남지 않고 있었다. 로컬에서 돌려보니 세션이 사라지고 있고, 사라진 세션에서 유저정보를 가져와서 데이터를 insert 하는 방식인데, 유저정보가 남지 않아 에러가 났는데도 우선은 익셉션으로 넘어가서 결제가 완료되었다는 알럿만 뜨고 있는 것이다. 구글링을 통해 알아낸 것은 2020년 2월에 출시된 chrome 80버전에서 samesite=lax 를 default로 하는 정책을 적용한 것. 엣지에서도 2020년 10월부터 86버전에 같은 정책을 적용시켰다...

ArrayList 함수 clear() UnsupportedOperationException 에러.

java에서 ArrayList 초기화 : list.clear(); ArrayList 비었는지 확인 : list.isEmpty(); 휴 그래서 clear () 했는데 UnsupportedOperationException 에러가 뜸... -> list를 늘이거나 줄이려고 할 때 뜨는 에러. 새로 다 초기화시켜주었다.. -> ArrayList는 배열이니까!!

[ajax, javascript] file upload 유효성검사

파일 업로드에 필요한 유효성검사. 은근히 빼먹기 쉬울 것 같아서 정리한다. 1. 파일 갯수 2. 확장자 3. 파일 사이즈 (모든 파일의 사이즈를 더함) * 이미 업로드 된 파일의 정보를 가지고 오는 함수에서 attach_count , attach_total_size 를 이미 가져와서 전역변수에 정의해둔 상태이다. //업로드된 파일 추출 var files = $J('#inputFile_' + param.attach_key)[0].files; // 파일갯수 유효성검사 if (attach_count+files.length > param.limit_count) { $J('#inputFile_' + param.attach_key)[0].value = ''; alert(param.limit_count + '개 이하..

ajax 에러 확인 / err:SyntaxError: Unexpected token < in JSON at position 0

ajax가 success가 아닌 error로 넘어갈 때 그 이유를 찾기 위한 소스이다. error : function(data, status, err) { console.log('data:'+data+'\n status:'+status+'\n error:'+error); } sample.jsp $J.ajax({ url : upload_url, enctype : 'multipart/form-data', processData : false, contentType : false, data : formData, type : 'POST', dataType : "JSON", async : false, processData : false, success : function(result) { console.log(re..

feature.fileapi : TypeError: undefined is not a function 에러

feature.fileapi : TypeError: undefined is not a function 에러 jquery.form.js의 feature.fileapi = $('').get(0).files !== undefined; 에서 에러가 난다. jquery.form.js를 파일로 다운받아서 사용하였는데 버전의 문제인 듯 하여 cdn으로 갈아끼워주었더니 에러가 해결되었다.

struts2, ajax, json, IE - FileUploader

우리 회사 프로젝트는 2009년도에 만들어진 꽤나 오래된 프로젝트이다. 비전공자에 최신기술로 공부하고 온 나에게는 너무나 낯설고 어렵게 느껴졌으나, 단 한명의 팀원으로 만 9개월이 살짝 넘는 시간동안 갖은 유지보수를 해보며 실제 개발실력은 많이 부족하지만 이제 조금씩 익숙해지고 있다. 2020년 12월로 Adobe에서 flash의 지원을 중단하면서, 모든 브라우저에서도 지원을 중단하겠다는 알림이 계속 뜨고 있었다. 우리 회사에도 꽤나 많은 곳에 swf 파일을 사용한 flash 기능들이 사용되고 있었는데, 가장 시급한 것은 upload 기능이다. swf파일을 fla파일로 변환 후 Adobe의 animate프로그램을 이용하여 html5로 변환하려 했지만... animate 는 ActionScript3.0 부..