jQuery 플러그인 패턴 템플릿 | pluginName 기본 구조와 사용법 jQuery 플러그인 패턴 템플릿: pluginName 기본 구조 완벽 정리 jQuery를 사용하다 보면 공통 기능을 플러그인 으로 만들어서 재사용하고 싶을 때가 많습니다. 이때 매번 구조를 처음부터 짜기보다는, 플러그인 패턴 템플릿 을 하나 만들어 두면 매우 편리합니다. 이 글에서는 아래와 같은 pluginName jQuery 플러그인 템플릿 코드 를 기반으로, 각 부분이 어떤 역할을 하는지, 어떻게 수정해서 나만의 플러그인을 만들 수 있는지 SEO 친화적인 설명과 함께 정리합니다. jQuery 플러그인 기본 템플릿 코드 (function($) { // 플러그명 (생성자 역할) $.pluginName = function(element, options) { // 기본 옵션 var defaults = { foo: 'bar', onFoo: function() {} }; var plugin = this; // 플러그인 설정 객체 plugin.settings = {}; var $element = $(element), element = element; // 초기화 plugin.init = function() { // 사용자 옵션과 기본 옵션 병합 plugin.settings = $.extend({}, defaults, options); }; // public 메서드 (외부에서 호출 가능) plugin.foo_public_method = function() { ...

2. 한글 초·중·종성 분리 함수: FN_APARTCHR 초성 검색을 넘어, 한글 한 글자를 초성·중성·종성 단위로 완전히 분리 해야 할 때가 있습니다. 예를 들어 '각' 을 'ㄱㅏㄱ' 으로 분해하여 형태소 분석이나 유사도 검사에 활용하는 경우입니다. 이 로직은 한글 유니코드의 구성 원리 를 기반으로 합니다. 2.1 핵심 분해 함수: FN_APARTCHR 아래 함수는 입력된 한 글자가 한글 완성형 범위(AC00 ~ D7A3)에 속하는지 확인한 후, 유니코드 공식을 적용하여 자모를 분리합니다. CREATE OR REPLACE FUNCTION FN_APARTCHR(P_CHAR IN VARCHAR2) RETURN VARCHAR2 IS ExceptNoHangul EXCEPTION; startHanUniDec NUMBER; calHanUniDec NUMBER; tmpUniDec NUMBER; initUniDec NUMBER; vowelUniDec NUMBER; finUniDec NUMBER; initStr VARCHAR2(10); vowelStr VARCHAR2(10); finStr VARCHAR2(10); BEGIN -- 한글 완성형 범위(AC00 ~ D7A3) 확인 IF ASCIISTR(P_CHAR) NOT BETWEEN '\AC00' AND '\D7A3' THEN RETURN P_CHAR; -- 한글 아니면 원문 반환 END IF; startHanUniDec := FN_H...

FRONTEND / UI LIBRARY 🔗 슬라이더 동기화: slick.js와 Dragdealer를 연결하여 커스텀 프로그레스 바 구현 웹사이트에서 슬라이더(캐러셀)는 흔하지만, 드래그 가능한 컨트롤 바(Slider Bar)와 슬라이더를 완벽하게 동기화하는 것은 고급 기술입니다. 이 글은 인기 있는 slick.js 슬라이더와 Dragdealer를 결합하여 양방향 제어 시스템을 구축하는 방법을 분석합니다. 📑 목차 1. HTML 구조: 슬라이더와 드래그 바 2. JavaScript (jQuery): 슬라이더 동기화 로직 3. 결론: 양방향 동기화의 완성 1. HTML 구조: 슬라이더와 드래그 바 슬라이더를 위한 `.center`와 드래그 바를 위한 `#rolling_Bar` 및 `.handle` 구조가 필요합니다. `Dragdealer`는 내부 `.handle` 요소를 드래그하여 `#rolling_Bar` 영역 내에서 움직이게 합니다. <!-- (1) slick 슬라이더 영역 --> <div class="content"> <div class="center"> <div><div class="slide prod"><a href="#">... (슬라이드 내용 1) ...</a></div></div> <div><div class="slide prod"><a href="#">... (슬라이드 내용 2) ...</a></div></div> ...

FRONTEND / UI LIBRARY ✨ Slick Carousel 활용: 중앙 슬라이드 강조 효과 (Center Mode Scale) jQuery Slick Carousel의 Center Mode를 활용하여 현재 중앙 슬라이드는 크게, 양옆의 슬라이드는 작게 축소(Scale Down)하여 강조하는 모던한 UI 구현 방법을 알아봅니다. 📑 목차 1. 필수 라이브러리 및 기본 HTML 구성 2. Slick Carousel 초기화 옵션 (Center Mode) 3. CSS 핵심: 축소(Scale) 및 Z-index 계층 제어 4. 마무리: 동적 UI의 핵심 1. 필수 라이브러리 및 기본 HTML 구성 이 효과를 구현하기 위해서는 jQuery와 Slick Carousel 라이브러리가 필요합니다. CDN을 통해 빠르게 로드하고 기본 HTML 구조를 잡습니다. <!-- jQuery & Slick 라이브러리 로드 --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick.css" rel="stylesheet" /> <script src="http://cdn.jsdelivr.net/jquery.slick/1.5.5/slick.min.js"></script> <!-- 캐러셀 컨테이너 --> <div class="content"> <di...

FRONTEND / JQUERY jQuery bxSlider: 나만의 커스텀 버튼(Prev/Next/Stop)으로 슬라이더 제어하기 bxSlider의 기본 스타일을 벗어나, 별도로 제작한 버튼 이미지나 HTML 요소로 슬라이더를 완벽하게 제어하는 방법을 알아봅니다. 인스턴스 변수를 활용한 API 호출 패턴을 실무 예제로 정리했습니다. 📑 목차 1. HTML 구조: 슬라이더와 제어 버튼 분리 2. 핵심 로직: 인스턴스 저장 및 API 호출 3. 전체 JavaScript 구현 코드 4. 요약 및 주의사항 1. HTML 구조: 슬라이더와 제어 버튼 분리 가장 먼저 해야 할 일은 bxSlider가 적용될 리스트( ul > li )와 이를 제어할 버튼들을 HTML 상에 배치하는 것입니다. 이때 제어 버튼들은 bxSlider 컨테이너 외부에 있어도 상관없으며, 고유한 ID 를 부여하여 스크립트에서 식별할 수 있게 합니다. <div class="slider-wrapper"> <!-- 1. 커스텀 컨트롤 버튼 영역 --> <div class="custom-controls"> <button type="button" id="btn_prev">이전</button> <button type="button" id="btn_stop">정지/재생</button> <button type="button" id="btn_next">다음</but...

FRONTEND / UI LIBRARY Swiper.js 기본 사용법 – CDN으로 간단하게 반응형 슬라이더 만들기 Swiper.js 3.x 버전을 CDN으로 불러와서 간단한 반응형 슬라이더를 만드는 방법을 예제 코드와 함께 정리했습니다. Swiper 컨테이너 구조, 슬라이드 생성, 페이지네이션 설정까지 한 번에 따라 해보세요. 📑 목차 1. Swiper.js란 무엇인가? 2. 전체 예제 코드 한 번에 보기 3. Swiper 슬라이더 구조 이해하기 4. Swiper CDN으로 CSS와 JS 불러오기 5. JavaScript로 Swiper 초기화하기 6. 실제 프로젝트 응용 및 정리 1. Swiper.js란 무엇인가? Swiper는 모바일 친화적인 터치 슬라이더 라이브러리로, 다음과 같은 특징이 있습니다. 모바일 터치 제스처 지원 (드래그/스와이프) 반응형 레이아웃 지원 슬라이드, 페이징, 네비게이션 버튼 등 기본 기능 제공 이미지 슬라이더, 배너 롤링, 컨텐츠 캐러셀 등에 활용 아래 예제는 Swiper 3.4.2 버전 을 기준으로 작성된 코드이며, 구버전 프로젝트나 jQuery와 함께 사용하는 환경에서도 바로 적용할 수 있습니다. 2. 전체 예제 코드 한 번에 보기 먼저, Swiper 슬라이더를 만드는 전체 HTML 예제를 먼저 확인해 봅시다. <!DOCTYPE html> <html lang="en"> <head> <meta chars...

FRONTEND / LEGACY SUPPORT JavaScript로 브라우저 종류 & IE 버전 체크하기 (userAgent 활용) 레거시 웹 프로젝트 유지보수를 위한 필수 가이드. navigator.userAgent를 분석하여 IE 버전별 분기 처리와 최신 브라우저를 구분하는 JavaScript 실무 코드를 정리했습니다. 📑 목차 1. 브라우저 & IE 버전 체크 함수 전체 코드 2. IE 버전 체크 로직 자세히 보기 3. 크롬, 파이어폭스 등 다른 브라우저 구분 4. 사용 예시: 브라우저에 따라 코드 분기 처리 5. userAgent 기반 브라우저 체크 시 주의사항 6. 정리 1. 브라우저 & IE 버전 체크 함수 전체 코드 먼저, 사용자 브라우저를 문자열로 반환하는 함수를 하나로 정리해보겠습니다. 이 함수는 IE, Chrome, Firefox 등 다양한 브라우저 환경을 식별하는 데 사용됩니다. function getBrowserName() { var _ua = navigator.userAgent; var rv = -1; // ------------------------- // 1) IE 11, 10, 9, 8 체크 (Trident 기반) // ------------------------- var trident = _ua.match(/Trident\/(\d\.\d)/i); if (trident !== null) { if (trident[1] === "7.0") return "IE11"; if (trident[1] === "6.0") return ...