컨텐츠형 페이지를 만들다보면 특정 구간에 불필요한 내용이 길어져 일부 내용을 자르고 더보기 기능을 만들어야할 때가 있다. 더보기 기능은 간단할것 같으면서도 막상 만들려면 귀찮을때가 많이 있다. 특히나 반응형 작업 시에는 고정 크기 화면의 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 을 이용한 객체 복사 방법 | 얕은복사 /* Object.assign 을 이용한 객체복사 */ let o···
Global Ajax 를 이용하여 공통처리를 할 수 있는 방법이 있다. 이는 주로 이 블로그처럼 대다수가 AJAX 를 통한 페이지 전환으로 구성된 사이트에서 로딩바를 띄우기 위한 목적으로 사용이 된다. 지원되는 이벤트 핸들러는 ajaxStart, ajaxSend, ajaxSuccess, ajaxComplete, ajaxStop , ajaxError 가 있으···
AJAX의 기술은 요즘들어 페이지에 없어서는 안될 부분으로 상당히 많이 사용되곤 한다. 물론 아직까지는 대형 사이트의 경우 JQUERY를 그다지 선호호지 않기 때문에 순수 JAVASCRIPT 를 이용하여 자체 스크립팅된 코드를 사용한다. 하지만 알다시피 일개미 개발자에게 주어진 시간이란게 없고 일부 JAVASCRIPT 라이브러리들은 JQUERY 를 요구하기···
PRISMJS 라이브러리란 코드의 가독성을 높여주는 일종의 CSS 스타일 자동화 라이브러리로 이해하면 된다. 이 라이브러리는 이식성도 좋기때문에 tinymce(최신버전 기준) 에디터에서도 사용이 가능하다. 다만 tinymce 같은경우 설정이 필요하기때문에 이부분은 이번편에서는 패스하도록 하자 PRISMJS 사이트는 아래와 같다. (메타데이터가 없어서 링크 ···
과거 데이터 처리는 일반적으로 form 을 이용하여 처리하였으나 요즘은 ajax 처리가 많아지면서 사용자로부터 입력이 없는 데이터처리는 form 이 아닌 스크립트로 많이 처리한다. 하지만 스크립트에 PHP로 데이터처리를 하다보면 소스코드가 지저분하게 보여질 수 있고 공통파일 처리도 어려울 수 있기에 각 정보를 특정 태그에 data 속성으로 담아주고 처리하는···
AJAX의 경우 페이지 변경 없이 서버가 데이터 전송을 할 수 있는 수단이다. 사용하는 방법에 따라 퀄러티 높은 개발을 완성할 수 있는 장점이 있는 방면 URI HISTORY 처리와 같은 페이지 갱신에 대한 처리가 번거롭다는 단점도 가지고 있다. 위에서 말한 단점의 경우 페이지 AJAX가 단순 데이터 전송 수단이 아닌 페이지 이동 수단으로 활용할 경우 예를···
작업을 하다보면 FORM 은 입력형태가 있는 페이지에서 많이 사용이된다. 요즘은 AJAX 를 통해 처리하기때문에 FORM 데이터가 흐름도가 기본형태를 많이 벗어나지만아직까지는 기본형태를 통해 많이 사용되기 때문에 반드시 숙지하고 가는게 좋다. 일반 FORM 연결 <form id="form" method="post"> <input type="···
이번에 에디터를 또 변경하였다. 변경된 에디터는 Tinymce 5 버전대로 스팩은 현존하는 웹 에디터중 최상급으로 생각한다. 이전에 사용했던 에디터는 다음 에디터였는데 티스토리 블로그와 동기화해볼 목적에서 사용했는데 어느날 티스토리 들어가보니 에디터가 Tinymce 로 변경이 되어있는게 아닌가... 할 수 없이 나도 에디터를 다운로드 후 커스텀까지 해서 3···