칼퇴하는 개발자

글

jQuery dynamicInput으로 파일·텍스트 입력 필드 동적 추가/삭제 구현하기

jQuery dynamicInput 플러그인으로 파일·텍스트 입력필드 동적 추가/삭제 구현하기 폼에 첨부파일이나 텍스트 입력 필드를 동적으로 추가/삭제 해야 할 때, 매번 HTML을 복붙하거나 인덱스를 신경 쓰는 것은 상당히 번거롭습니다. 이 글에서는 jQuery로 구현한 dynamicInput 플러그인을 이용해서 추가 , 삭제 버튼만으로 입력 필드를 편리하게 관리하는 방법을 정리해 보겠습니다. 1. dynamicInput 플러그인 개념 $.fn.dynamicInput 은 jQuery 플러그인 형태로 구현된 함수로, 다음과 같은 기능을 제공합니다. 파일 입력( type="file" ) 또는 텍스트 입력( type="text" )을 동적으로 추가/삭제 최대 개수(max) 설정으로 무한 추가 방지 기존 첨부파일 리스트( viewData )를 보여주고, 삭제 버튼으로 논리 삭제 처리 실제 삭제 대상은 hidden 필드 값으로 서버에 전송 기본 아이디어는 다음과 같습니다. 대상 영역에 플러그인을 초기화한다. ( $("#addFileZone").dynamicInput({...}) ) 플러그인 내부에서 추가/삭제 버튼 과 입력 필드 그룹 을 자동으로 생성한다. 버튼 클릭 시, 설정에 따라 입력 필드 DOM을 추가하거나 삭제한다. 2. 개선된 dynamicInput 플러그인 코드 아래 코드는 파일 타입만 지원하던 기존 코드 에서 확장해서, 첨부파일( file )과 텍스트( text ) 모두 처리할 수 있도록 보완한 버전입니다. $.fn.dynamicInput = function(opt){ var t = $(this); // 플러그인을 적용할 대상 컨테이너 var btnBody = $(document.createElement('span')); // 추가/삭제 버튼 영...

jQuery 플러그인 패턴 템플릿 완전 정리: $.fn.pluginName 예제와 사용법

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() { ...

Oracle PL/SQL로 한글 초성 검색 구현하기: FN_CHOSEARCH · FN_APARTCHR 완전 정리

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...

slick with Dragdealer

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` 영역 내에서 움직이게 합니다.  <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> ...

Slick Carousel 활용: 중앙 슬라이드 강조 효과 (Center Mode Scale)

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 구조를 잡습니다.  <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...

bxSlider custom Botton

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">  <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...

Swiper.js CDN으로 반응형 이미지 슬라이더 만드는 방법 (초보자용 가이드)

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...