어제보다 더 나은 오늘

팩토리 패턴을 사용하면 함수를 호출하는 것으로 객체를 만들 수 있다. new 키워드를 사용하는 대신 함수 호출의 결과로 객체를 만들 수 있는 것이다. 장점 동일한 프로퍼티를 가진 여러 작은 객체를 만들어낼 때 유용하다. 유사한 반복 작업을 하는 객체를 만드는 것이 팩토리 패턴의 주요 목적이다. 단점 대부분의 상황에서 객체를 일일히 만드는 것보다 클래스를 활용하는 편이 메모리를 절약하는 데 더 효과적이다. 예제 코드) chart import React from 'react'; // Chart Factory function createChart(chartType, data) { switch (chartType) { case 'bar': return new BarChart(data); case 'line': ..

2. Prototype Pattern 동일한 타입의 여러 객체들이 프로퍼티를 공유할 때 유용하게 사용할 수 있다. 생성자의 prototype 프로퍼티와 생성된 인스턴스의 __proto__ 프로퍼티는 동일하며, 이들을 통해 Prototype 객체를 확인할 수 있다. class Dog { constructor(name) { this.name = name } bark() { return `Woof!` } } const dog1 = new Dog('Daisy') const dog2 = new Dog('Max') const dog3 = new Dog('Spot') console.log(Dog.prototype) // constructor: ƒ Dog(name, breed) bark: ƒ bark() console..

서론에 이어 이제 본격적으로 개별 패턴의 특징을 하나씩 살펴보자. 1. Singleton Pattern 애플리케이션 전체에서 단일 인스턴스를 공유 클래스를 한 번만 인스턴스화하고, 이 인스턴스를 전역적으로 접근해서 사용한다. Object.freeze() 메소드를 사용해 객체를 사용하는 쪽에서 직접 객체를 수정할 수 없도록 한다. 장점 메모리 공간 절약 단점 자바스크립트에서는 전역 변수를 생성하는 것을 흔히 안티 패턴으로 여긴다. 만약 전역 변수가 잘못된 판단으로 올바르지 않게 만들어진 경우 잘못된 값으로 덮어쓰여질 수 있으며, 이 변수를 참조하는 구현들이 모두 예외를 발생시킬 수 있기 때문이다. 그러나 Singleton 패턴은 일반적으로 앱에 전역 상태를 위해 사용한다. 코드의 여러 부분에서 수정 가능한..

지난 한 달 간 디자인 패턴에 대해 주1회 스터디를 진행했다. 매주 patterns.dev의 디자인 패턴 중 4~6개 아티클을 순서대로 정해 스터디 전에 읽어온 후에 스터디 시간에는 서로 궁금한 점이나 잘 이해가 되지 않는 부분을 논의하고, 각자 프로젝트에서 작성한 코드베이스 중에서 유사한 패턴이 있는 경우 공유하기도 했다. 다른 사람의 코드를 보는 경험은 늘 흥미롭기 마련인데 디자인 패턴이라는 틀 안에서 볼 수 있다는 점이 좋았고, 꼭 디자인 패턴이 아니라더라도 현재 고민하고 있는 부분들을 나누면 스터디 파트너 분이 같이 고민해주셔서 감사했다. 한 달 간의 스터디를 마무리하고 다음 주제로 넘어가기로 해서 디자인 패턴에 대해 공부한 내용을 간략하게나마 나의 언어로 정리해두려고 한다. patterns.de..