칼퇴하는 개발자

글

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

JavaScript로 브라우저 종류·IE 버전 체크하기 – userAgent 완벽 정리

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

BeanFinder for Spring

SPRING FRAMEWORK Spring Context 외부에서 Bean 주입받기: ServletContext와 BeanFinder 유틸리티 Filter, Listener, 혹은 레거시 코드 등 Spring 컨테이너의 제어를 받지 않는 곳에서 스프링 빈(Bean)을 사용해야 할 때가 있습니다. ServletContext를 활용해 ApplicationContext에 접근하고 빈을 동적으로 조회하는 BeanFinder 유틸리티 구현 방법을 알아봅니다. 📑 목차 1. 문제 상황: Spring 관리 영역 밖에서의 빈 접근 2. 핵심 구현: BeanFinder 유틸리티 클래스 3. 주요 로직 상세 분석 4. 실무 활용 시나리오 1. 문제 상황: Spring 관리 영역 밖에서의 빈 접근 Spring MVC 패턴 안에서는 @Autowired 나 생성자 주입을 통해 손쉽게 빈을 사용할 수 있습니다. 하지만 서블릿 필터(Filter), 리스너(Listener), 또는 일반 POJO 클래스에서는 이러한 자동 주입(DI)이 동작하지 않습니다. 이러한 상황에서는 ServletContext 를 통해 Spring의 루트 컨테이너인 WebApplicationContext 를 직접 찾아내고, 필요한 빈을 수동으로 꺼내오는 전략이 필요합니다. 2. 핵심 구현: BeanFinder 유틸리티 클래스 아래 코드는 WebApplicationContextUtils 를 사용하여 컨텍스트에 접근하고, ID 또는 Class 타입을 기반으로 빈을 검색하는 유틸리티 클래스입니다. import javax.servlet.ServletContext; import org.springframework...

Java와 Google SMTP: Apache Commons Email로 구축하는 안정적인 메일 발송 시스템

BACKEND / JAVA Java와 Google SMTP: Apache Commons Email로 구축하는 안정적인 메일 발송 시스템 Java 애플리케이션에서 Google SMTP를 연동해 메일 발송 기능을 구현하는 실무 가이드입니다. 최신 보안 정책인 앱 비밀번호 설정부터 한글 깨짐 방지를 위한 UTF-8 인코딩, 그리고 확장 기능 구현까지 엔터프라이즈 개발자가 알아야 할 핵심을 정리했습니다. 📑 이 글에서 다루는 내용 1. 실무형 sendEmail 메소드 설계와 의존성 2. Google SMTP 보안 설정 (앱 비밀번호 필수) 3. 인코딩 이슈 없는 본문 구성 전략 4. 확장 가이드: 첨부 파일 기능 구현 1. 실무형 sendEmail 메소드 설계와 의존성 이메일 발송은 사용자 인증(OTP), 비밀번호 초기화, 시스템 알림 등 백엔드 로직의 핵심 부분입니다. 실무에서는 재사용성을 극대화하기 위해 mailManager 와 같은 유틸리티 클래스로 분리하여 관리하는 것이 일반적입니다. 안정적인 구현을 위해 Apache Commons Email 라이브러리를 사용하는 것을 권장하며, 메소드 설계 시 다음 파라미터를 명확히 분리해야 유지보수가 용이합니다. Recipient (수신): 이메일 주소( to_mail )와 수신자명( to_name ) Sender (발신): 이메일 주소( from_mail )와 발신자명( from_user_nm ) Content (내용): 메일 제목( subject )과 본문( mailContent ) 이 구조는 향후 로깅이나 발송 실패 시 재시도 로직을 붙이기에도 유리한 구조를 제공합니다. 2. Google SMTP 보안 설정 (앱 비밀번호 필수) 엔터프라이즈 환경에서 외부 SMTP, 특히 Gmail을 활용할 때는 보안 설정이 가장 중요합니다. 2022년 ...