칼퇴하는 개발자

글

5월, 2017의 게시물 표시

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

jQuery로 가벼운 '오늘 본 상품' 세로 슬라이더 구현하기 (플러그인 없이 DOM 조작 최적화)

FRONTEND jQuery로 가벼운 '오늘 본 상품' 세로 슬라이더 구현하기 (플러그인 없이 DOM 조작 최적화) 무거운 라이브러리 없이 jQuery만으로 쇼핑몰 사이드바의 '오늘 본 상품' 영역을 구현하는 방법을 알아봅니다. DOM 조작을 통한 효율적인 세로 롤링 로직과 코드를 소개합니다. 📑 목차 1. 마크업 구조: 시맨틱한 리스트 구성 2. jQuery 핵심 로직: 무한 롤링 구현 3. 활용 팁 및 퍼포먼스 고려사항 4. 자주 묻는 질문(FAQ) 1. 마크업 구조: 시맨틱한 리스트 구성 쇼핑몰 사이드바 UI는 한정된 공간을 효율적으로 사용해야 합니다. div 대신 dl 과 dd 태그를 사용하여 데이터 리스트의 시맨틱한 구조 를 잡는 것이 좋습니다. 초기 화면에는 기획된 개수(예: 3개)만 노출하고 나머지는 스타일로 숨김 처리합니다. <div class="todayBg"> <dl>  <img src="/images/btn_up.gif" class="prev" alt="위로">  <dd><a href="#"><img src="/img/p1.jpg" alt="상품1"></a></dd> <dd><a href="#"><img src="/img/p2...

jQuery .prop() vs .attr(): DOM 상태 제어의 핵심 원리와 실무 표준 패턴

FRONTEND ENGINEERING jQuery .prop() vs .attr(): DOM 상태 제어의 핵심 원리와 실무 표준 패턴 HTML 속성(Attribute)과 DOM 프로퍼티(Property)의 기술적 차이를 명확히 분석하고, 체크박스 등 동적 UI의 데이터 무결성을 보장하는 실무 코딩 표준과 이벤트 핸들링 전략을 제시합니다. 📑 목차 1. Attribute와 Property의 본질적 차이 2. Boolean 속성 제어와 데이터 정합성 3. 상태 변경 시 이벤트 트리거 전략 4. 요약: 언제 무엇을 써야 할까? 1. Attribute와 Property의 본질적 차이 jQuery 1.6 버전 이후 명확히 구분된 .prop() 와 .attr() 의 차이는 단순한 문법적 선호도가 아닌, 브라우저가 문서를 해석하는 메커니즘의 차이에서 비롯됩니다. 엔터프라이즈급 애플리케이션의 안정성을 확보하려면 이 두 개념의 생명주기를 이해해야 합니다. Attribute (.attr()): HTML 마크업에 명시된 텍스트 그 자체입니다. 페이지가 처음 로드될 때의 초기 상태(Default Value) 를 의미하며, 사용자 입력으로 값이 변해도 원본 속성값은 유지됩니다. Property (.prop()): 브라우저 파싱 후 메모리에 적재된 DOM 객체의 실시간 속성입니다. 사용자의 인터랙션이나 스크립트에 의해 변경되는 현재 상태(Current Value) 를 대변합니다. 2. Boolean 속성 제어와 데이터 정합성 체크박스의 checked , selected , disabled 와 같은 상태값은 문자열이 아닌 Boolean(...

jQuery 실무 패턴: filter와 map으로 완성하는 폼 데이터 직렬화 및 유효성 검사

FRONTEND DEV jQuery 실무 패턴: filter와 map으로 완성하는 폼 데이터 직렬화 및 유효성 검사 복잡한 엔터프라이즈 폼 UI에서 데이터를 효율적으로 제어하는 jQuery 메서드 체이닝 기법을 다룹니다. :visible 선택자부터 filter, map, join을 조합하여 스파게티 코드를 방지하고, 직렬화와 유효성 검사를 간결하게 처리하는 실무 노하우를 공유합니다. 📑 이 글에서 다루는 내용 1. :visible로 렌더링된 필드만 타겟팅하기 2. filter()를 이용한 데이터 정제 로직 3. map()과 join()을 활용한 선언적 직렬화 4. 실전 응용: 유효성 검사(Validation) 파이프라인 5. 가독성 튜닝: is()와 not()의 적절한 활용 1. :visible로 렌더링된 필드만 타겟팅하기 엔터프라이즈 환경의 폼 UI는 사용자 권한이나 상호작용에 따라 필드가 동적으로 숨겨지거나 나타나는 경우가 빈번합니다. 이때 단순히 $('input') 으로 데이터를 수집하면 숨겨진 필드의 값까지 포함되어 로직 오류를 유발할 수 있습니다. jQuery의 :visible 선택자는 현재 화면에 렌더링된 요소만 정확히 타겟팅 합니다. type="hidden" 속성뿐만 아니라 CSS로 display: none 처리된 요소까지 자동으로 배제하므로, 사용자가 실제로 입력 가능한 데이터만 추출 할 때 필수적입니다. // 화면에 보이는 input 요소의 개수만 반환 $("input:visible").length; 2. filter()를 이용한 데이터 정제 로직 선택된 요소 집합(Collection)에서 특정 조건에 맞는 요소만 남겨야 할 때 filter() 메서드가 강력한 힘을 발휘합니다. 이는 반복문 내에서 if 문을 남발하는 것을 방지하고, 의도를 명확하게 드러내는 코드를 작성하게 돕습니다. $("input:visible") .f...

Java 정적 임포트(Static Import) 완벽 가이드: 안티 패턴 탈출과 클린 코드 실무 전략

JAVA / CLEAN CODE Java 정적 임포트(Static Import) 완벽 가이드: 안티 패턴 탈출과 클린 코드 실무 전략 Java 코드의 가독성을 높이는 정적 임포트의 올바른 활용법과 '상수 인터페이스' 안티 패턴의 위험성을 심층 분석합니다. 유지보수성을 해치지 않으면서 코드를 간결하게 만드는 엔터프라이즈 실무 노하우를 확인하세요. 📑 목차 1. 정적 멤버(Static Member) 접근의 정석 2. [Anti-Pattern] 상수 인터페이스의 위험성 3. 정적 임포트(Static Import) 문법과 활용 4. 실무 Best Practices: 언제 써야 할까? 5. 사용자 정의 유틸리티 적용 사례 6. 핵심 요약 1. 정적 멤버(Static Member) 접근의 정석 Java에서 정적 메서드나 상수(static field)에 접근할 때, 가장 기본적이고 권장되는 방식은 클래스 이름을 명시하여 한정(qualify) 하는 것입니다. double r = Math.cos(Math.PI * theta); 위 코드에서 Math.cos() 와 Math.PI 는 각각 Math 클래스에 속해 있음을 명확히 보여줍니다. 코드가 다소 길어질 수 있지만, 해당 멤버의 출처가 명확하게 드러나므로 가독성과 유지보수 측면에서 가장 안전한 형태 입니다. 2. [Anti-Pattern] 상수 인터페이스의 위험성 Java 5 이전에 정적 임포트 기능이 없던 시절, 개발자들은 타이핑을 줄이기 위해 상수 인터페이스 패턴 이라는 편법을 사용하곤 했습니다. 하지만 이는 현재 대표...

JavaScript undefined vs null: 차이점 분석과 엔터프라이즈 타입 체크 전략

FRONTEND ENGINEERING JavaScript undefined vs null: 차이점 분석과 엔터프라이즈 타입 체크 전략 자바스크립트의 모호한 개념인 undefined와 null의 기술적 차이를 명확히 규명하고, 데이터 무결성을 위한 커스텀 typeOf 및 isEmpty 유틸리티 함수 구현 방법을 제시합니다. 📑 목차 1. undefined: 할당되지 않은 상태 2. null: 의도적인 값의 부재와 주의점 3. 엄격한 비교와 데이터 무결성 4. 한계 극복: Custom typeOf 구현 5. 실무 적용: 범용 isEmpty 유틸리티 6. 요약 및 Best Practice 1. undefined: 할당되지 않은 상태 undefined 는 변수가 선언되었으나 아직 값이 할당되지 않은 상태 를 의미합니다. 이는 자바스크립트 엔진이 변수 초기화 단계에서 메모리 공간을 확보한 후, 자동으로 부여하는 기본값입니다. var testVar; alert(testVar); // undefined alert(typeof testVar); // "undefined" 변수 선언 외에도 객체에 존재하지 않는 프로퍼티에 접근하거나, return 문이 없는 함수를 호출했을 때 엔진은 undefined 를 반환합니다. 2. null: 의도적인 값의 부재와 주의점 null 은 개발자가 의도적으로 '값이 없음'을 명시 할 때 사용합니다. 이는 해당 변수가 더 이상 유효한 객체나 값을 참조하지 않음을 코드 레벨에서 표현하는 중요한 수단입니다. var testVar = null; alert(typeof te...

Yasca로 시작하는 오픈소스 SAST: 시큐어 코딩과 취약점 진단 가이드

SECURITY / SAST Yasca로 시작하는 오픈소스 SAST: 시큐어 코딩과 취약점 진단 가이드 복잡한 설정 없이 즉시 도입 가능한 오픈소스 정적 분석 도구(SAST) Yasca의 핵심 사용법을 다룹니다. CLI 기반의 취약점 진단부터 HTML 리포트 분석을 통한 코드 개선 프로세스까지, 실무에 바로 적용 가능한 보안 진단 전략을 확인해 보세요. 📑 목차 1. Yasca 실행 및 기본 사용법 2. 분석 결과 보고서(Report) 해석 3. 마치며: 효율적인 보안 진단 전략 1. Yasca 실행 및 기본 사용법 Yasca(Yet Another Source Code Analyzer)는 Java, PHP, C#, C++, HTML 등 다양한 언어를 지원하는 강력한 오픈 소스 정적 분석 도구입니다. 이 도구의 가장 큰 매력은 별도의 복잡한 설정 파일 없이 명령줄(CLI)에서 즉시 분석이 가능 하다는 점입니다. Yasca를 효율적으로 사용하는 방법은 설치 폴더 내의 resource 디렉터리가 아닌, 실행 파일이 위치한 루트 경로에서 분석 대상 프로젝트를 지정하는 것입니다. 다음은 기본적인 실행 명령어 예시입니다. 분석하고자 하는 소스 코드의 절대 경로를 인수로 전달하면 엔진이 구동됩니다. # Windows 환경 실행 예시 yasca.bat C:\YourProject\SourceCode 명령어를 실행하면 콘솔 창에서 실시간으로 스캔 진행 상황이 출력되며, 엔진이 소스 코드를 파싱하여 잠재적인 보안 위협을 탐지합니다. ▲ Yasca CLI 실행 및 스캔 진행 화면 2. 분...