이번편은 지난번 생년월일 입력 이벤트를 활용하여 카드번호 입력 후 4자리마다 하이픈 또는 공백등의 구분자를 붙여는 스크립트 예제에 대해서 알아보자. 참고로 기본적인 기능들은 앞서 생년월일 입력 이벤트와 유사하며 이를 조금만 활용하면되고 다만 카드 입력의 경우 보안이 중요한 만큼 마스크처리를 추가하였다. 카드번호 입력 후 유효성 체크하여 자동 구분자 넣어주는···
생년월일은 과거 달력에서 선택하는 방식을 많이 채택하였지만 나이가 있으신분들은 한참을 뒤로 가야하는 불편함이 발생되어 요즘은 입력방식을 사용하는편이다. 이번편에서는 간단하게나마 생년월일 입력 후 슬래시(/) 또는 하이픈(-)을 붙여주는 스크립트이다. 본래 이번편에 소개하는 예제는 JS 라이브러리로 제공할 목적이였으나 시간상 여유가 없어 간단하게 입력 후 처···
순수 javascript 에서 ajax 통신을 할때 주로 XMLHttpRequest 또는 fetch 를 이용했을 것이다. XMLHttpRequest의 경우 현재도 많이 사용되는 방식이긴 하나 현재까지 와서는 이보다 더 강력한 fetch 함수를 많이 사용하고 있는 편이다. 이번편은 fetch 함수를 이용한 커스텀 비동기 ajax 함수에 대해 알아보도록 하자 ···
JQuery를 이용한 ajax 처리 시 보통 비동기로 처리하지만 동기 처리를 통해 결과값을 받아야하는 경우가 있다. 이때 ajax 옵션에 async:false 를 넣어주면 동기방식으로 처리를 할 수 있기에 자주 사용을 했었는데 특정 기기 환경에서 결과값을 받지 못하는 경우가 발생했다. 처음엔 AJAX 처리시 오류가 발생했나 하여 디버깅을 여러번 해보았지만 ···
HTML 태그의 data 속성은 공식 지원되는 객체 속성으로 jquery를 사용하여 data 속성을 가져오게 되면 객체형태로 쉽게 받을 수 있기때문에 활용도가 높은 편이다. 이번편은 data 속성은 잘 알려져 있기에 이번편에서는 data 속성과 같이 특정 속성을 저장하고 jquery를 통해 객체화 하는 방법에 대해 알아보자. 우선 방법을 소개하기전 data···
자바스크립트를 사용하다보면 런타임 중 에러를 무시하고 다음 라인을 실행해야 하는 경우가 발생한다. 이때 사용할 수 있는건 사전에 에러 발생이 안나도록 변수나 함수의 타입을 검증하는 예외처리가 필요하지만 try 블록을 이용하여 처리를 회치할 수 있다. 사실 try~catch 는 에러를 보완할 수 있는 수단이라기 보단 에러는 회피하는 용도로 사용되고, 커스텀 ···
컨텐츠형 페이지를 만들다보면 특정 구간에 불필요한 내용이 길어져 일부 내용을 자르고 더보기 기능을 만들어야할 때가 있다. 더보기 기능은 간단할것 같으면서도 막상 만들려면 귀찮을때가 많이 있다. 특히나 반응형 작업 시에는 고정 크기 화면의 PC화면과는 다르게 크기별로 높이가 달라져 조건처리가 필요할 수도 있다. 이번편에 소개할 더보기 기능은 아래와 같이 두가···
jQuery 에서 사용되는 on 이벤트는 연결 이벤트중 하나로 click, mousedown,keydown 등의 여러 동작 이벤트를 연결하여 처리가 가능하다. 참고로 같은 용도로 사용되는 연결이벤트 bind, delegate, live 등이 있지만 jQuery API 문서내 권고 사항으로 본다면 on 이벤트로 대체해야 추후 높은 버전을 사용하더라도 변경없이···
싸이트를 운영하다보면 멋진 슬라이드 기능을 구현하고 싶을때가 있다. 무작정 JAVASCRIPT 를 이용하여 만들기엔 너무 어렵기 때문에 시중에 오픈된 라이브러리를 이용하게 되는데 그중 모바일에 가장 친화적인 Swiper API가 있다. Swiper API는 업데이트도 꾸준히 되고 있으며 초기에 발생되었던 많은 버그들이 지속적으로 업데이트되어 현재는 거의 완···
특정 레이아웃 안에서 스크롤이 생길 시 마우스 스크롤을 일일이 클릭 후 이동하여 화면을 봐야하는 불편함이 있는데 마우스 이벤트를 이용하여 클릭 후 스크롤을 자동으로 이동 시킬 수 있는 방법이 있다. 검색을 해보면 마우스 스크롤 이벤트는 상당히 많이 존재하는데 이를 이용하여 직접 만들 수 도 있지만 우리는 항상 시간이 부족하기때문에 시간이 조금 난김에 아래와···
이미지 확대/축소를 할 수 있는 라이브러리는 여러가지가 있다. 다만 보통 찾기가 어려운게 이미지 확대/축소 검색을 단순한 컨트롤을 이용한 확대 축소 라이브러리만 있기때문에 막상 찾기가 어려울때가 있다. 이번에 찾은 라이브러리는 JQUERY 라이브러리 중 하나인 Zoomer 라이브러리로 컨트롤도(+,-) 지원하고 모바일에서는 터치를 통해 확대하고 이동까지 가···
간혹 검색을 하다보면 제이쿼리를 사용하지 않겠다는 글들을 많이 볼 수 있다. 또한 글들을 잘 읽어보면 어느정도 맞는 이야기도 많다. 하지만 이미 몸에 익숙해져버린 제이쿼리를 갑자기 버리고 다른걸 사용하자니 어떤것을 배워야 할지 남감하기도 하고 제이쿼리와 연계된 라이브러리들이 너무 많아 고민일때가 있다. 하지만 이러한 이야기도 시대가 변함에 따라 더욱 나오고···
여러 사이트를 개발하다보면 롤링 스크립트를 넣어야 하는 경우가 있다. 물론 나는 사이트를 무겁게 만드는 롤링 스크립트들을 좋아하지는 않는다. 하지만 사용자의 보는 눈을 한층 더 즐겁게 만들어 주는 롤링 스크립트는 많은 요청이 있기때문에 여러 롤링 스크립트를 알아 두면 좋다. 오늘 소개할 롤링 스크립트는 Siema 로 상당히 가벼운 롤링 스크립트인것 같아 리···
간혹 웹에서 보안상 쿠키를 없애고 세션만 사용할려는데 어떻게 해야하는지 문의가 올때가 있다. 결론부터 말하면 웹에서 쿠키 없이 세션만 사용할 수는 없다. 그 이유는 쿠키가 있어야만 세션이 존재하기 때문이다. 예를 들어 PHP서버를 운영하고 별도의 세션 설정을 하지 않았다면 세션 실행시 `PHPSESSID` 이라는 쿠키가 생성이 될것이다. 해당 쿠키값은 PH···
ajax는 비동기 통신을 위한 방법인데 간혹 연속 클릭으로 인해 중복 처리가 되는 경우가 있다. 물론 프로그램단에서 db 조건과 비교하여 막는 방법이 있지만 request 한 페이지에 외부 api 통신이 있을 경우 딜레이가 발생되어 중복체크를 하가기 어렵다. 따라서 이번편에서는 클라이언트단에서 연속 click 이벤트를 막는 방법에 대해 예제소스를 통해 알아···
alert 메서드는 주로 경고창을 띄우는 용도로 많이 사용되고 있다. 하지만 고정된 디자인이다보니 UI 변경이 불가능하기때문에 이를 대체할 수 있는 jquery-confirm.js 라이브러리가 있는데 사용법도 간단하기 때문에 단순 alert 를 대체하기엔 가장 좋은 라이브러리가 아닌가 생각한다. 물론 비슷한 라이브러리들이 많지만 confirm-jquery ···
자바스크립트를 이용하다보면 기본 객체를 그대로 두고 본 객체를 복사하는 경우가 있다. 기본적으로 객체를 복사하는 방법에는 여러방법이 있겠지만 그중 가장 많이 사용하는 방법 2가지에 대해 알아보도록 하자 Object.assign 을 이용한 객체 복사 방법 | 얕은복사 <script> /* Object.assign 을 이용한 객체복사 */ let o···
Global Ajax 를 이용하여 공통처리를 할 수 있는 방법이 있다. 이는 주로 이 블로그처럼 대다수가 AJAX 를 통한 페이지 전환으로 구성된 사이트에서 로딩바를 띄우기 위한 목적으로 사용이 된다. 지원되는 이벤트 핸들러는 ajaxStart, ajaxSend, ajaxSuccess, ajaxComplete, ajaxStop , ajaxError 가 있으···