사용자가 입력한 문자열이 실제로 유효한 도메인 혹은 URL인지 판단하는 기능은 웹 서비스에서 매우 중요합니다. 예를 들어, 링크 등록 기능이나 외부 사이트 연결 기능을 제공할 때, 형식이 잘못된 주소를 사전에 걸러내는 것이 사용자 경험 및 보안 측면에서 매우 중요합니다.이 글에서는 URL 형식을 검사하는 JavaScript 함수 checkUrlFormat의 구조와 동작 원리를 살펴보겠습니다.✨ 함수 코드 원문function checkUrlFormat(url) { try { const parsed = new URL(url.startsWith('http') ? url : `https://${url}`); return /^[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)+$..

회원가입, 본인 인증, 연락처 등록 등 다양한 상황에서 휴대폰 번호의 형식을 검증하는 기능은 필수적입니다. 오늘은 JavaScript 정규표현식을 사용하여 010으로 시작하고 총 11자리로 구성된 휴대폰 번호를 검사하는 isValidPhoneNumber 함수에 대해 살펴보겠습니다.✨ 함수 코드 원문function isValidPhoneNumber(phoneNumber) { const PHONE_PATTERN = /^010\d{8}$/; return PHONE_PATTERN.test(phoneNumber);}✨ 정규표현식 분석/^010\d{8}$/^: 문자열의 시작을 의미합니다.010: 정확히 010으로 시작해야 함을 의미합니다.\d{8}: 숫자 8자리가 이어져야 함을 의미합니다 (총 11자리)..

사용자 인터페이스에서 긴 문자열(파일 경로, 이메일 주소, 토큰 등)을 표시할 때 중간을 생략하고 앞과 뒤만 보여주는 방식은 매우 일반적입니다. 이 글에서는 그러한 처리를 간단하게 구현할 수 있는 함수 truncateMiddleText의 코드와 활용 방식을 소개합니다.✨ 함수 코드 원문function truncateMiddleText(text, maxLength, frontLength, backLength) { if (text.length ✨ 매개변수 설명text: 대상 문자열maxLength: 문자열 최대 허용 길이frontLength: 앞부분에 보여줄 문자 수backLength: 뒷부분에 보여줄 문자 수✨ 동작 방식text의 길이가 maxLength 이하인 경우 원문을 그대로 반환합니다.그 외의..

금액 데이터를 처리하다 보면 소수점 이하 혹은 특정 자리 이하 단위를 정리하는 작업이 필요할 때가 많습니다. 오늘은 금액을 10원 단위로 정리하는 JavaScript 함수인 chg_1won 함수에 대해 살펴보겠습니다. 이 함수는 입력받은 금액을 기준으로 반올림, 내림, 올림 처리하여 1의 자리 숫자를 제거하고 10원 단위로 정리하는 역할을 수행합니다.✨ 함수 코드 원문function chg_1won(amount, mode = 'R') { const div = amount / 10; const rounded = { 'F': Math.floor, 'R': Math.round, 'C': Math.ceil }[mode] || Math.round; ret..

이메일 주소는 일반적으로 알파벳, 숫자, 특수기호(@, ., _) 등으로 구성되며, 한글이나 공백이 포함되어서는 안 됩니다. 이를 보완하기 위해 입력 중 실시간으로 한글 및 공백을 제거하는 기능을 구현할 수 있습니다. 본 글에서는 .onlymail 클래스를 이용하여 이메일 입력 필드에서 한글 및 공백을 제거하는 jQuery 코드를 살펴보겠습니다.✨ 코드 원문$(document).on('keyup focusout', '.onlymail', function(){ // 한글(유니코드)과 공백 삭제 $(this).val($(this).val().replace(/[\uAC00-\uD7AF\u3130-\u318F\u1100-\u11FF\s]/gi,"")); });✨ 주요 기능 설명1. 대상 요소 바인딩...

웹 페이지에서 금액을 입력받을 때, 천 단위마다 콤마를 자동으로 삽입하거나 입력 가능한 최대 금액을 제한하는 기능은 사용자 편의성뿐만 아니라 관리자 입장에서도 데이터의 일관성과 관리 효율성을 확보하는 데 유용합니다. 본 문서에서는 해당 기능을 jQuery를 활용하여 구현하는 방법을 설명하며, .onlyprice 클래스를 중심으로 그 구체적인 적용 방식을 다룹니다.✨ 코드 원문$(document).on('keyup focusout', '.onlyprice', function(){ var value = $(this).val().replace(/[^0-9,]/g, ''), limit = $(this).data('limit'); value = value.replace(/,/g, ''); ..

사용자 입력값을 제어하는 것은 웹 프론트엔드에서 아주 중요한 작업입니다. 오늘은 숫자(0-9)와 쉼표(,)만 입력할 수 있도록 제한하는 jQuery 코드를 소개하고, 어떻게 활용할 수 있는지 자세히 설명드리겠습니다.✨ 코드 원문$(document).on('keyup focusout', '.onlynumber', function(){ $(this).val($(this).val().replace(/[^0-9,]/gi, ""));});✨ 코드 설명$(document).on(...) : 동적으로 생성된 요소도 포함하여 .onlynumber 클래스를 가진 input 요소에 이벤트를 바인딩합니다.이벤트 종류는 keyup과 focusout입니다. 즉, 키를 누를 때마다 또는 input에서 포커스가 빠져나올 때마..

웹 서비스에서 사용자 입력값을 제한하는 경우는 자주 발생합니다. 특히 이름, 별명, 지역명 등 한글만 입력을 허용하고 싶은 경우에 유용한 필터링 방식이 필요합니다. 오늘은 jQuery를 사용하여 한글만 입력되도록 제한하는 코드에 대해 분석하고 활용법을 소개하겠습니다.✨ 코드 설명$(document).on('keyup focusout', '.onlyhan', function(){ $(this).val($(this).val().replace(/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣|ᆞ|ᆢ|ㆍ|\?|]/gi,""));});▶ 구체간각규: .onlyhan 클래스를 가진 input 요소에 대해 keyup 또는 focusout 이벤트가 발생할 때마다 실행됩니다.replace 정규식: 입력된 문자열에서 한글 범위 외의 문자를..

Flyweight Pattern(플라이웨이트 패턴) 은 많은 수의 유사 객체들을 메모리 절약을 위해 공유 가능한 객체로 분리하여 사용하는 구조 디자인 패턴입니다. 특히 대규모 객체 생성을 최적화해야 하는 경우 매우 효과적입니다.🧱 Flyweight Pattern이란?Flyweight Pattern은 객체의 공통 속성은 공유하고, 개별 속성만 외부에서 전달받아 사용하는 방식입니다. 불필요한 객체 생성을 줄이고, 메모리 사용량을 크게 줄일 수 있습니다.class Shape { constructor(color) { this.color = color; // 공유 속성 } draw(x, y) { console.log(`Draw ${this.color} circle at ..

Bridge Pattern(브릿지 패턴) 은 기능 계층과 구현 계층을 분리하여 각각 독립적으로 확장할 수 있게 만드는 구조 디자인 패턴입니다. 주로 클래스의 다중 상속을 피하면서도 다양한 기능 조합이 필요한 경우에 유용합니다.🧱 Bridge Pattern이란?Bridge Pattern은 추상화(Abstraction) 와 구현(Implementation) 을 분리하여 서로 독립적으로 변경이 가능하도록 설계합니다. 하나의 클래스 계층에서는 인터페이스(기능)를 정의하고, 다른 클래스 계층에서는 구체적인 동작을 정의합니다.// 구현 계층 (Implementation)class DrawingAPI { drawCircle(x, y, radius) {}}class DrawingAPI1 extends Drawi..