웹 서비스에서 사용자 입력값을 제한하는 경우는 자주 발생합니다. 특히 이름, 별명, 지역명 등 한글만 입력을 허용하고 싶은 경우에 유용한 필터링 방식이 필요합니다. 오늘은 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..

Composite Pattern(컴포지트 패턴) 은 객체들을 트리 구조로 구성하여 부분-전체 계층 구조를 동일하게 다룰 수 있도록 하는 구조 디자인 패턴입니다. 개별 객체와 그 객체들의 집합을 동일한 방식으로 처리할 수 있어 유연하고 확장성 높은 설계를 가능하게 합니다.🧱 Composite Pattern이란?Composite Pattern은 단일 객체와 복합 객체를 같은 방식으로 다룰 수 있게 하는 구조입니다. 부모-자식 관계가 있는 UI 트리 구조나 파일 시스템 등 계층 구조가 필요한 상황에서 자주 활용됩니다.class Component { add(component) {} remove(component) {} display(indent = 0) {}}class Leaf extends ..

Chain of Responsibility Pattern(책임 연쇄 패턴) 은 요청을 처리할 수 있는 여러 객체들이 체인 형태로 연결되어, 요청이 처리될 수 있는 객체에게 전달되도록 하는 행동 디자인 패턴입니다. 요청자는 누가 그 요청을 처리하는지 알 필요가 없습니다.🧱 Chain of Responsibility Pattern이란?이 패턴은 여러 처리 객체(Handler)를 연결된 체인으로 구성하고, 요청을 순차적으로 전달하여 처리 가능한 객체가 처리하도록 합니다. 각 객체는 다음 처리자에 대한 참조를 가지고 있으며, 처리 불가능할 경우 이를 다음 객체로 넘깁니다.class Handler { setNext(handler) { this.next = handler; retur..

Iterator Pattern(이터레이터 패턴) 은 컬렉션의 내부 구조를 노출하지 않고도 요소들을 순차적으로 접근할 수 있도록 해주는 행동 디자인 패턴입니다. 자바스크립트의 for...of, next(), Symbol.iterator 등이 이 패턴을 잘 보여줍니다.🧱 Iterator Pattern이란?Iterator Pattern은 객체의 내부 데이터를 순회하는 책임을 별도의 반복자(iterator) 객체로 분리합니다. 이로써 컬렉션의 구조가 변경되더라도 순회 방식은 일관되게 유지할 수 있습니다.const collection = { items: [1, 2, 3], [Symbol.iterator]() { let index = 0; const items = this.it..

State Pattern(상태 패턴) 은 객체의 내부 상태에 따라 행동을 변경할 수 있게 만드는 행동 디자인 패턴입니다. 마치 객체의 클래스가 바뀌는 것처럼 동작을 전환할 수 있어, 복잡한 조건문 대신 명확한 상태 기반 구조를 설계할 수 있습니다.🧱 State Pattern이란?State Pattern은 상태를 별도의 객체로 추출하고, Context 객체가 상태 객체에 행동을 위임하는 구조입니다. 각 상태는 고유한 동작을 가지며, 상태 간 전환도 명확히 정의됩니다.// 상태 클래스들class RedLight { change(light) { console.log("빨간 불 → 초록 불"); light.setState(new GreenLight()); }}class Gr..

Strategy Pattern(전략 패턴) 은 알고리즘 군을 정의하고, 각 알고리즘을 캡슐화하여 필요 시 상호 교체할 수 있게 만드는 행동 디자인 패턴입니다. 동일한 문제를 다양한 방식으로 해결할 수 있도록 유연한 구조를 제공합니다.🧱 Strategy Pattern이란?Strategy Pattern은 동일한 문제를 해결하는 다양한 전략(알고리즘)을 정의하고, 런타임에 동적으로 전략을 선택할 수 있게 도와주는 구조입니다. 주로 조건문으로 분기되는 로직을 객체화하여 깔끔하게 정리할 때 유용합니다.// 전략 인터페이스 역할class PaymentStrategy { pay(amount) {}}// 구체적인 전략들class CardPayment extends PaymentStrategy { pay(a..

Command Pattern(커맨드 패턴) 은 요청을 캡슐화하여 호출자(Invoker)와 실행자(Receiver)를 분리하는 구조 디자인 패턴입니다. 명령을 객체로 만들기 때문에, 요청의 저장, 실행 취소(Undo), 재실행(Redo), 큐잉 등의 유연한 처리가 가능합니다.🧱 Command Pattern이란?Command Pattern은 명령(Command)을 하나의 객체로 추상화하여, 실행 로직과 요청을 분리하는 구조입니다. 이는 다양한 실행 요청을 일관된 방식으로 처리하거나, 실행 시점을 조정할 수 있는 장점을 제공합니다.// Receiver: 실제 로직을 수행하는 객체class Light { on() { console.log("조명이 켜졌습니다."); } off() {..

Mediator Pattern(미디에이터 패턴) 은 객체 간의 복잡한 의존 관계를 하나의 중재자 객체(Mediator)로 통합하여, 객체들이 직접 통신하지 않고 중재자를 통해서만 상호작용하도록 만드는 행동 디자인 패턴입니다.🧱 Mediator Pattern이란?Mediator Pattern은 객체 간의 상호작용을 캡슐화하여, 서로 직접 연결되지 않고 중앙 집중식 통신 방식으로 구조를 단순화합니다. 특히 많은 객체가 서로 메시지를 주고받는 UI 구성에서 유용하게 사용됩니다.class ChatMediator { constructor() { this.users = []; } register(user) { this.users.push(user); user...