2025.04.22 - [Programing/javascript] - 날짜 형식 유효성 검사 함수 글의 응용 코드입니다. 회원가입, 본인 확인, 나이 계산 등의 기능을 구현할 때 생년월일 입력값이 실제 존재하는 날짜인지, 미래의 날짜는 아닌지 검증하는 절차는 매우 중요합니다. 이 글에서는 YYYYMMDD 형식의 생년월일 문자열이 올바른지 확인하는 isValidBirthDate 함수의 동작 방식을 설명합니다.✨ 함수 코드 원문function isValidBirthDate(input) { const BIRTHDATE_PATTERN = /^\d{8}$/; if (!BIRTHDATE_PATTERN.test(input)) return false; const [year, month, day] = [..

이전 2025.04.22 - [Programing/javascript] - 날짜 형식 유효성 검사 함수 글의 응용 버전입니다.날짜 선택 UI나 기간 검색 조건을 다룰 때, 사용자가 입력한 날짜 범위가 올바른 형식인지, 실제 존재하는 날짜인지, 그리고 시작일이 종료일보다 이른지 등을 확인하는 작업은 매우 중요합니다. 이 글에서는 YYYY-MM-DD ~ YYYY-MM-DD 형식의 문자열을 검증하는 checkRangeDateFormat 함수의 구조와 동작 방식을 소개합니다.✨ 함수 코드 원문function checkRangeDateFormat(input) { const DATE_RANGE_PATTERN = /^\d{4}-\d{2}-\d{2} ~ \d{4}-\d{2}-\d{2}$/; if (!DATE..

날짜 입력값은 다양한 형식으로 존재할 수 있으며, 단순한 문자열 검사만으로는 실제 존재하지 않는 날짜까지 통과될 수 있습니다. 이를 방지하기 위해, YYYY-MM-DD 형식의 문자열이 실제 유효한 날짜인지까지 검사하는 함수가 필요합니다. 이 글에서는 정규표현식과 JavaScript의 Date 객체를 조합하여 날짜 형식과 존재 여부를 동시에 확인하는 함수 isValidDateFormat을 살펴보겠습니다.✨ 함수 코드 원문function isValidDateFormat(dateString) { const DATE_PATTERN = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/; if (!DATE_PATTERN.test(dateString)) return fa..

사용자가 입력한 문자열이 실제로 유효한 도메인 혹은 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에서 포커스가 빠져나올 때마..