글쓰는 개발자

안녕하세요. 글쓰는 개발자입니다. 오늘은 ajax으로 받아온 data를 jstl로 표현하는 방법에 대해 소개하고자 합니다. ajax의 POST방식을 사용하게 되면, error가 발생하면서 받아온 값을 jstl로 표현하지 못하는데요. 이유는 다음과 같습니다. 서버는 JAVA>JSTL>HTML>Javascript 순서로 동작하는데 GET방식으로 페이지 이동시 바로 model.addAttribute하는 경우에만 작동하는 것을 많이 경험하셨을 겁니다. 그러나, 저는 업무 중에 Tab메뉴를 동작할 때 마다 Ajax Post 방식으로 data를 받아와야했고 append를 하기에는 View단의 코드가 너무 길어지고 퍼블리싱 변경이라도 발생할 경우, 유지보수에 상당한 어려움이 예상되었습니다. 그리하여, 고민한 결과 아..

안녕하세요. 글쓰는 개발자입니다. 프로젝트를 진행하면서, 프로필 사진을 모바일에서 업로드 할 경우, 이미지가 회전되는 이슈가 있었습니다. 구글링을 해보니, 다른 분들도 많이 겪은 문제였다는 생각이 들었습니다. 빈번히 발생하는 이 문제를 해결한 방법에 관해 포스팅 시작하겠습니다. 1. 라이브러리 사용 저는 아래 링크를 통해, 사용할 수 있는 Javascript Load Image 라이브러리를 사용했습니다. 이 중에서 load-image.all.min.js 를 받았는데요. 이유는 다 받는게 제일 편하기 때문입니다. https://github.com/blueimp/JavaScript-Load-Image blueimp/JavaScript-Load-Image JavaScript Load Image is a lib..

안녕하세요. 글쓰는 개발자입니다. 오늘은 Javascript 변수선언시 사용하는 var, let, const의 차이를 포스팅하고자 합니다. 관련 자료를 공부하면서 scope, hoisting등의 개념도 접할 수 있었는데요. 이와 관련해서는 다음 포스팅을 통해 설명 드리겠습니다. 1. var (변수 재선언 가능) var variable = '변수선언함'; console.log(variable); //변수선언함 var variable = '또 변수선언함'; console.log(variable); //또 변수선언함 변수 선언을 여러 번해도 에러없이 각기 다른 값이 출력될 수 있습니다. 이는 필요할 때 마다 변수를 사용할 수 있다는(편리하다는) 장점이 될 수 도 있지만, 같은 이름의 변수명을 남용하는 문제를 ..

안녕하세요. 글쓰는 개발자입니다. 오늘은 JQuery의 .one() 함수를 소개하고자 합니다. 저를 몇날 몇일간 괴롭혔던 검색제시어 영역 이외 클릭시 제시어 창 닫힘 및 입력값 초기화 기능 문제를 해결해준 고마운 기능입니다. 아래 내용에 대한 설명은 https://api.jquery.com/one/를 참고했습니다. .one() | jQuery API Documentation Description: Attach a handler to an event for the elements. The handler is executed at most once per element per event type. The .one() method is identical to .on(), except that the handl..

안녕하세요. 글쓰는 개발자입니다. 회원가입 혹은 프로필 작성시 특수문자, 공백 체크 등 유효성 검사를 필요로 하는 경우가 많은데요. 저도, 프로필 작성을 맡으면서 닉네임의 유효성 검사가 필요했습니다. 연속된 야근으로 오늘도 자정이 넘어 글을쓰는 중이라 코드만 소개하겠습니다. 아래 코드를 보시면 필수입력, 닉네임 빈칸 체크, 한글 및 영문 숫자 길이 체크, 특수문자 포함에 관한 javascript 정규식이 포함되어 있습니다. 주석이 친절(?)하게 달려있으니 확인하시기 바랍니다. //닉네임 체크 [S] function checkNickName() { var nickname = document.getElementById('nickNm').value; //닉네임 입력값 받아오기 var nickLength = 0..

안녕하세요. 글쓰는 개발자입니다. 오늘은 업무 중에 활용했던, 커리어넷 OPEN API 센터의 학교명 검색 기능을 활용해서 비동기 검색제시어 기능을 구현한 것을 간단하게 소개하려고 합니다. 동기, 비동기 방식에 대한 자세한 설명이 필요할 것 같지만, 다른 포스팅에서 다루도록 하고 기능구현만 간단히 소개하겠습니다. 1. 검색제시어 기능 다양한 포털사이트에서 검색을 하실 경우 아래에 유사한 검색어들이 제시되는 것들을 보셨을 것입니다. 그것이 바로 검색제시어 기능입니다. 비동기 방식이기 때문에 검색어가 변경될 때 마다 매번 새로고침 되지않고 제시어만 계속 바뀌게 됩니다 2. 기능 구현 커리어넷의 OPEN API를 예시로 들었지만, DB에서 불러온 값들을 활용하셔도 됩니다. 1) html 간단하게 검색어를 입력..

안녕하세요. 글쓰는 개발자입니다. 글을 쓰는 시점은 야근을 마치고 돌아오자마자 새벽 1시가 좀 넘었는데요. 단위테스트를 진행하면서 Chrome에서는 잘되던 javascript remove() 함수가 IE10에서는 사용불가한 이슈가 있었습니다. 그렇다면, 예제와 해결 방법을 알려드리겠습니다. 테스트용으로 리스트를 만들었고 remove() 함수를 먼저 적용해보았습니다. Chrome에서는 잘되었지만, IE10에서는 아래 그림과 같은 에러를 확인할 수 있었습니다. 그러나, removeTestIE10() 을 보시면, 삭제하고자하는 node의 parent를 선언하고, var test = paren.document.getElementById("test1"); removeChild(test) 의 방식으로 해결했습니다...

안녕하세요. 글쓰는 개발자입니다. 고등학교 친구들을 만나고 집에 돌아오자마자 글을 쓰게 되었는데요. 저의 개발자 친구 K와 C랑 셋이서 이야기를 하다가 기술면접 이야기가 나왔고, K가 Javascript의 '=='과 '==='의 차이를 알려줘서 바로 포스팅하게 되었습니다. 결론부터 말씀드리면, "==="(strict equality) 을 사용하는 것이 바람직 합니다. 비교결과 예측이 쉽고, 형 강제(coercion) 변환이 일어나지 않기에 평가가 빠르기 때문입니다. 그럼, 결론을 염두에 두시고 아래 내용을 보시기 바랍니다. 아래 내용은 친구 K의 설명과 아래 링크의 설명을 참고했습니다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Equality_comp..

안녕하세요. 글쓰는 개발자입니다. 제가 업무 중에 검색필터 팝업창을 만들게 되었는데 이때, 배열 형식으로 선택된 값들을 저장했습니다. 그러한 이유는 배열에 저장된 값들을 Query문으로 날려줘서 검색을 진행하기 때문인데요. 오늘은 제가 업무 중에 사용한 방법을 포스팅하고자 합니다. 목차 1. html 2. javascript 3. 전체 코드 4. 사용된 javascript 내장 function 5. 결론 1. html 예제로 연령선택을 만들었습니다. checkbox를 활용해서 중복선택이 가능하게 만들었습니다. 10세 20세 30세 40세 50세 60세 필터입력값 : 2. javascript (아래 코드를 참고하세요.) ageArr이라는 필터내용을 저장하는 배열을 생성합니다. confirmCheck를 통해..