자바스크립트

데코레이터 패턴(Decorator Pattern)은 기존 객체의 구조를 변경하지 않으면서도 새로운 기능을 동적으로 추가할 수 있도록 하는 패턴이다. 이 패턴에서는 원본 객체를 데코레이터 객체가 감싸면서 추가적인 기능을 수행한다. 데코레이터는 같은 인터페이스 또는 추상 클래스를 구현하여 원본 객체와 동일한 방식으로 동작하며, 여러 개의 데코레이터를 연속적으로 적용할 수 있어 유연한 기능 확장이 가능하다. 예를 들어 Nest.js의 @Get() 데코레이터가 메서드에 라우팅 및 HTTP 요청 처리와 관련된 기능을 추가하는 것처럼 말이다. 이처럼 데코레이터 패턴을 활용하면 객체에 새로운 기능을 쉽게 추가하고 조합할 수 있다.반면, 지난 포스트를 통해 알아본 프록시 패턴은 객체의 기능을 확장하는 것이 아니라, 객..

프록시 패턴(Proxy Pattern)은 객체에 대한 접근을 제어하거나 대리인 역할을 하는 객체를 두는 디자인 패턴으로, 클라이언트는 실제 객체와의 직접적인 상호작용 없이 프록시 객체를 통해 객체를 사용할 수 있다. 이를 통해 성능 최적화, 보안, 접근 제어 등 다양한 목적을 달성할 수 있으며, 예를 들어, 객체가 무겁거나 생성 비용이 높은 경우 프록시 객체는 지연 로딩하거나 필요한 시점에만 객체를 생성하여 효율성을 높일 수 있다. 또한, 프록시 패턴을 사용하면 보안 검사, 로깅, 캐싱 등 부가적인 기능을 실제 객체와 분리하여 처리할 수 있어 시스템의 유연성과 유지보수성을 높이고, 코드의 재사용성과 응집도를 향상시킬 수 있다. Interface-Based Proxy인터페이스 기반의 프록시 객체는 실제 객..

프로토타입 패턴은 기존 객체를 복제하여 새로운 객체를 생성하는 방법을 제공한다. 이 패턴은 객체를 직접 생성하는 대신, 이미 존재하는 객체를 복제(clone)하여 성능을 향상시키고 객체 생성 비용을 줄인다. 특히, 복잡한 객체를 생성할 때 유용하며, 기존 객체의 상태를 유지하면서 새로운 객체를 쉽게 만들 수 있도록 돕는다. 이를 통해 코드의 재사용성을 높이고, 객체 생성 로직을 단순화할 수 있다. 또한, 객체를 반복적으로 생성해야 하는 경우, 프로토타입 패턴을 활용하면 불필요한 연산을 줄이고 보다 효율적인 메모리 사용이 가능하다.아래의 코드는 제네릭을 활용한 프로토타입 패턴을 구현하고 있다. Prototype 클래스는 특정 타입 T의 객체를 저장하고 복제할 수 있도록 설계되었다. clone() 메서드는 ..

빌더 패턴(Builder Pattern)은 복잡한 객체를 단계별로 구성할 수 있도록 도와주는 디자인 패턴이다. 이 패턴의 핵심 아이디어는 객체를 생성하는 과정을 여러 단계로 분리하여, 불완전한 객체 상태를 방지하고, 유연하고 가독성이 좋은 객체 생성을 가능하게 만드는 것이다. 복잡한 객체의 생성 과정에서 생성자나 setter 메서드를 사용하는 대신, 빌더라는 별도의 클래스를 통해 객체의 속성들을 설정하고, 마지막에 build() 메서드를 호출하여 최종 객체를 생성한다. 이로 인해 객체의 상태를 점진적으로 설정할 수 있고, 필수 속성들이 모두 설정되었는지를 명확하게 검사할 수 있는 장점이 있다. Builder Class지난 포스트에 이어서 이번에도 피자로 예시를 들어보자. 피자를 만들 때는 도우, 소스, ..

팩토리 패턴(Factory Pattern)은 객체 생성 로직을 클라이언트 코드로부터 분리하여, 객체 생성 과정을 캡슐화한다. 이 패턴의 핵심 아이디어는 "어떤 객체를 생성할지"에 대한 결정을 별도의 팩토리 클래스로 위임함으로써, 클라이언트는 객체의 구체적인 생성 과정이나 클래스 이름을 알 필요 없이 필요한 객체를 얻을 수 있다는 점이다. 이를 통해 코드의 결합도를 낮추고, 새로운 객체 유형이 추가되더라도 기존 코드를 수정하지 않고 확장할 수 있는 유연성을 제공한다. 팩토리 패턴은 설계 원칙 중 하나인 개방-폐쇄 원칙(OCP)을 효과적으로 지원하며, 단순 팩토리, 팩토리 메서드, 추상 팩토리 등 다양한 형태로 활용될 수 있다. Simple Factory Pattern단순 팩토리 패턴은 객체 생성 로직을 별..

싱글턴 패턴(Singleton Pattern)은 소프트웨어 디자인 패턴 중 하나로, 애플리케이션 내에서 특정 클래스의 인스턴스가 오직 하나만 존재하도록 보장하는 패턴이다. 주로 전역 상태를 관리하거나 공통된 자원을 효율적으로 활용해야 하는 경우에 사용된다. 이 패턴은 인스턴스의 생성과 접근을 중앙에서 제어함으로써 불필요한 메모리 낭비를 방지하고, 일관된 상태를 유지할 수 있는 장점을 가진다. 일반적으로 클래스 내부에 자신의 인스턴스를 정적(static)으로 보관하고, 외부에서는 해당 인스턴스에 접근할 수 있는 메서드(예: getInstance())를 통해 객체를 반환하는 방식으로 구현한다. 이러한 특성 덕분에 싱글턴 패턴은 설정 관리, 로깅, 캐시 처리, 데이터베이스 연결 등 다양한 분야에서 널리 활용된..

프로토타입 오버라이드는 JavaScript에서 객체 지향 프로그래밍을 할 때 객체의 동작을 커스터마이징하거나 확장하기 위해 사용하는 기법 중 하나다. JavaScript의 모든 객체는 프로토타입 체인을 통해 부모 객체의 속성과 메서드를 상속받는데, 이때 기본 제공되는 객체의 프로토타입에 새로운 메서드를 추가하거나 기존 메서드를 수정하는 것을 프로토타입 오버라이드라고 부른다. 예를 들어, Array나 String 같은 빌트인 객체의 프로토타입에 새로운 메서드를 추가하면, 해당 타입의 모든 인스턴스에서 이를 사용할 수 있는 것이다.프로토타입 오버라이드는 프로젝트 전반에 걸쳐 상당히 강력한 영향력을 행사한다. 올바르게 사용하면 중복 코드를 줄이고 개발 생산성을 높일 수 있지만, 잘못 사용하면 예기치 못한 동작..

구조 분해 할당은 모던 자바스크립트 문법으로서 변수 선언 시 사용되며, 객체나 배열의 특정 요소를 선택적으로 변수에 할당하여 쉽게 사용할 수 있게 한다. 이를 통해 코드를 더 간결하고 읽기 쉽게 만들 수 있다.어느정도 숙련된 자바스크립트/타입스크립트 사용자라면 숨쉬듯이 사용하는 문법이기도 하다. 그런데 이 문법을 메모리 주소와 연관지어 생각해본 적은 한 번도 없었다. 적어도 오늘 어떤 일이 있기 전까지는.  나는 NestJs로 백엔드 작업을 하며 유저 기능을 위한 커스텀 가드를 만들고 있었다. 아주 간단한 작업이었으며, 나는 별 생각 없이 코드를 마무리지었다. 그리고 코드를 한번 쓱 보는데 뭔가 이상하다는 생각이 들었다. validateRequest 함수 내에서 this.authService.verify..

이터레이션 프로토콜은 자바스크립트에서 컬렉션(배열, 객체 등)을 순회하는 방식을 정의한 규약이다. 이 프로토콜은 준수하는 객체는 for ... of 문으로 내부를 순회할 수 있고, 스프레드 연산자를 사용할 수 있으며, 비구조화 할당을 통해 필요한 값만을 꺼내 사용할 수도 있다. 따라서 이터레이션 프로토콜을 이해하는 것은 그 자체로 자바스크립트의 많은 기능을 더 깊이 있게 활용할 수 있도록 한다.  이터러블과 이터레이터이터레이션 프로토콜은 다시 '이터러블 프로토콜(이하 이터러블)'과 '이터레이터 프로토콜(이하 이터레이터)'로 나뉘어진다. 이터러블은 단어 그대로 '순회할 수 있는' 객체를 정의하는 데 사용된다. 만약 어떤 객체가 이터러블하다면, 해당 객체는 이터레이터를 리턴하는 메소드 [Symbol.iter..

실행 컨텍스트자바스크립트 엔진(이하 JSE)은 코드를 실행하기에 앞서 코드를 평가하는 과정을 거친다. 이를 '실행 컨텍스트 평가'라고 부르고, 이후 선언문을 제외한 소스코드가 실행된다. 사실 클로저를 지원하는 대부분의 언어에서 이와 유사하거나 동일한 개념이 적용되어있다.실행 컨텍스트 평가 과정을 통해 JSE는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체를 생성하게 된다. 이 객체가 바로 실행 컨텍스트(이하 컨텍스트)이다. 컨텍스트가 구성되면 JSE는 이를 콜 스택에 쌓아 올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드를 하나씩 실행하는 식으로 전체 코드의 환경과 순서를 보장한다.하나의 컨텍스트를 구성할 수 있는 방법으로는 전역 공간, eval 함수, 함수 실행 등이 있다. 자바스크립트 파일..

Intersection Observer API는 웹 페이지의 특정 요소가 뷰포트나 다른 요소와 교차하는지를 비동기적으로 감지하는 방법을 제공한다. 이 API는 무한 스크롤, 지연 로딩, 광고 노출 감지 등을 구현하는 데 특히 유용하다.전체적인 구성은 크게 3가지 단계로 구성된다. 1) 노드를 관찰할 새로운 intersectionObserver를 생성하면서 2) 관찰되었을 때 수행할 작업과 관찰 방식을 정의하며 3) observe 메소드를 사용해 관찰할 노드를 등록해주는 것이다. 바닐라JS에서 일반적으로 사용되는 코드의 모습은 아래와 같다.let target = document.querySelector('#target');const observer = new IntersectionObserver(callb..