책 <자바스크립트 + 리액트 디자인 패턴> (한빛미디어)를 읽고 19개의 패턴의 간단한 정의와 예시들을 정리해본다.
생성 패턴
객체를 생성하는 방법을 다루는 패턴
생성자 패턴
*ES6의 class 문법을 사용
객체 지향 프로그래밍을 위한 문법적 설탕(syntactic sugar)으로, constructor 메서드를 통해 객체 초기화를 수행하고 new 키워드를 사용하여 인스턴스를 생성하는 구조이다. class 내부에서 속성과 메서드를 정의하며, 상속 및 캡슐화 같은 OOP 개념도 자연스럽게 표현할 수 있다.
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
}
const person1 = new Person('John', 30);
person1.sayHello(); // Hello, my name is John and I am 30 years old.
const person2 = new Person('Jane', 25);
person2.sayHello(); // Hello, my name is Jane and I am 25 years old.
장점
- 코드 재사용성 up
- 캡슐화 용이
모듈 패턴
변수와 함수를 캡슐화하고 공개(public) 또는 비공개(private) 인터페이스를 정의하기 위한 디자인 패턴이다. 간단히 말해 데이터 은닉과 네임스페이스 충돌 방지를 위한 구조다.
const CounterModule = (function () {
// private 변수
let count = 0;
// private 함수
function logCount() {
console.log("Current count:", count);
}
// public API
return {
increment: function () {
count++;
logCount();
},
reset: function () {
count = 0;
logCount();
}
};
})();
// 사용
CounterModule.increment(); // Current count: 1
CounterModule.increment(); // Current count: 2
CounterModule.reset(); // Current count: 0
클로저를 사용하는 위 방식은 옛날 방식이고, ES6부터 도입된 ES Module이 현재 널리 사용되는 방식이다. import와 export를 사용하고, 파일이 스코프라서 export를 사용하면 자동 은닉된다. 비동기 실행, 트리 셰이킹 등도 가능하다.
장점
- 은닉화
- 공개 메서드만 노출해 API 처럼 사용
'Programming > Javascript, Typescript' 카테고리의 다른 글
리액트, 뷰를 안 쓰는 개발자들은 뭐 쓸까? 프론트엔드 프레임워크 알아보기 (0) | 2025.06.27 |
---|---|
[Jest] 특정 테스트 파일만 제외하고 실행하고 싶을 때 (0) | 2025.02.15 |
[프론트엔드 테스팅] Yoni Goldberg의 JavaScript Testing Best Practices (0) | 2024.04.15 |
[WIP] [JavaScript] 모던 자바스크립트 Deep Dive (0) | 2024.01.02 |
[JavaScript] JavaScript Cheatsheet (ES6-ES10) (0) | 2023.12.26 |
댓글