티스토리

lurgi

검색하기

블로그 홈

lurgi

lurgi.tistory.com/m

2023 FE공부 시작! 자라나는 새싹🌱

구독자: 5

방명록 방문하기

주요 글 목록

[디자인 패턴] 프록시(Proxy) 패턴. 자바스크립트 프록시 ❓프록시 패턴? 프록시(proxy)는 대리인, 대리자라는 뜻으로, 다른 객체의 접근 제어를 위한 구조 디자인 패턴입니다. 객체가 전달되는 중간 단계에 대리자를 위치시켜 무언가를 수행할 수 있도록 합니다. 하나의 객체를 두 개로 나눠 재구성하여, 실체 객체를 가로챌 수 있습니다. 여기서 특징은, 두 개로 나뉜 두 객체의 인터페이스는 같다는 것입니다. ❗프록시 패턴의 예시 (JS) // 실체 객체 class RealObject { performAction() { console.log("실체 객체 작동"); } } // 프록시 객체 class ProxyObject { constructor(realObject) { this.realObject = realObject; } performAction() { cons.. 공감수 0 댓글수 0 2023. 11. 22.
[디자인 패턴] 플라이웨이트(Flyweight) 패턴 ❓플라이웨이트 패턴? 플라이웨이트는 각 객체의 공통된 부분들을 공유하여 사용할 수 있도록 하는 디자인 패턴입니다. 이름의 뜻처럼, fly(가볍다) weigth(무게) 즉 무게를 가볍게 하는 것으로, 공유를 통해 자원을 효율적으로 사용할 수 있습니다! 여기서 자원은 메모리를 말하는데요, 여러 객체가 동일한 데이터를 가지고 있을 때 이를 같은 참조 값으로 공유함으로써 메모리를 줄일 수 있게 되는 것이죠! ❗플라이웨이트 패턴의 예시 (JS) // 플라이웨이트 패턴을 구현할 플라이웨이트 객체 (공유 객체) class TextStyle { constructor(font, size, color) { this.font = font; this.size = size; this.color = color; } } // 텍스.. 공감수 0 댓글수 0 2023. 11. 21.
[디자인 패턴] 파사드(Facade) 패턴 ❓파사드 패턴? 파사드 패턴이란, 복잡한 시스템, 서브 시스템을 단순한 인터페이스로 감싸, 클라이언트가 해당 시스템을 쉽게 사용할 수 있게 해주는 것을 말합니다. ‘싱글턴 추상 팩토리’ 라고 불리기도 합니다. 객체지향 개발 방식에서는 하나의 모듈을 작은 단위로 분리하고, 클래스로 캡슐화하며, 작게 분리된 모듈은 다른 기능 구현에도 재사용됩니다. 이 과정에서 수많은 클래스가 생성되고 객체는 복잡한 관계를 가지게 되는데요, 파사드 패턴을 이용해 이 복합한 객체 연결 구조 사이에 인터페이스를 두어서 시스템간 의존성 관리를 할 수 있고, 이는 느슨한 결합을 유지시켜줍니다. 파사드로 인해 새로운 계층이 추가되어, 객체 사이의 결합도를 낮추어 유연한 구조를 가질 수 있습니다. 특히 파사드 패턴은, 클라우드, 서비스.. 공감수 0 댓글수 0 2023. 11. 20.
[디자인 패턴] 장식자(Decorator) 패턴 ❓장식자 패턴? 동적 기능을 추가하기 위해 구조를 개선하는 패턴입니다. 장식자 패턴은 어댑터 패턴과도 비슷한 개념입니다. 래퍼(Wrapper) 구조를 사용한다는 점에서 비슷한데요, 두 패턴의 목적성은 조금 다릅니다 어댑터 패턴 : 서로 다른 인터페이스의 통일 장식자 패턴 : 동적 기능을 추가함으로써 기능을 확장 이런 목적성을 가지는데요, 실제 프로그램에서는 딱 구분되는 것이 아니기 때문에 이렇구나 생각하고 넘어가겠습니다! 어댑터 패턴은 아래 글을 참고해주세요! [디자인 패턴] 어댑터(Adapter) 패턴 ❓어댑터 패턴? 어댑터 패턴은 구조 패턴으로, 다른 말로 래퍼(Wrapper) 패턴이라고도 합니다. 연관성 없는 2개의 객체를 묶어서 인터페이스를 만들어 주는 패턴을 말하는데요, 이를 통해 서로 연 lu.. 공감수 0 댓글수 0 2023. 11. 17.
[디자인 패턴] 복합체(Composite) 패턴 ❓복합체 패턴? 복합체 패턴은 구조 패턴의 하나로, 여러 개의 객체를 묶어 단일 객체처럼 동작하도록 하는 패턴입니다. 이 방식은 트리 구조를 형성하며, 복합 객체와 개별 객체가 동일한 인터페이스로 다뤄지기 때문에, 클라이언트 코드가 단순해진다는 특징이 있습니다! 복합체 패턴은 크게 4개의 구성 요소로 이루어 져 있습니다. Componet Composite Leaf Client 예시를 통해 알아보겠습니다! ❗복합체 패턴의 예시 (JS) // 1. Component (구성요소) 인터페이스 class FileSystemComponent { constructor(name) { this.name = name; } display() { throw new Error("이 메서드는 하위 클래스에서 구현되어야 합니다.".. 공감수 0 댓글수 0 2023. 11. 15.
[디자인 패턴] 브릿지(Bridge) 패턴 ❓브릿지 패턴? 브릿지 패턴은 구조 패턴의 하나로, 다른 용어로 핸들(Handle) 패턴, 구현부 패턴이라고 합니다. 객체의 확장성을 향상시키기 위한 패턴으로, 객체에서 동작을 처리하는 구현부와 확장을 위한 추상부로 분리하는 패턴을 말합니다. 구현부, 추상부로 분리하는 예시를 통해 확인해 봅시다. ❗브릿지 패턴의 예시 (JS) // 구현부 인터페이스 class Implementor { sendData(data) { throw new Error("오바리이딩 되지 않았습니다."); } } // 하위 구현부 클래스A class ConcreteImplementorA extends Implementor { sendData(data) { console.log("A 데이터를 보냅니다.", data); } } // 하.. 공감수 0 댓글수 0 2023. 11. 14.
[디자인 패턴] 어댑터(Adapter) 패턴 ❓어댑터 패턴? 어댑터 패턴은 구조 패턴으로, 다른 말로 래퍼(Wrapper) 패턴이라고도 합니다. 연관성 없는 2개의 객체를 묶어서 인터페이스를 만들어 주는 패턴을 말하는데요, 이를 통해 서로 연관 없는 두 객체의 호환성을 이루어줄 수 있습니다! ❓어댑터 패턴의 종류 어댑터 패턴은 두 가지 방식이 있는데요, 클래스를 이용한 클래스 어댑터 패턴(Class Adapter Pattern), 그리고 객체를 이용한 객체 어댑터 패턴(Object Adapter Pattern)이 있습니다! ❗클래스 어댑터 패턴 클래스의 상속을 이용한 어댑터 패턴입니다. // 기존에 사용하던 클래스 class OldDate { constructor(dateString) { this.dateString = dateString; } g.. 공감수 0 댓글수 0 2023. 11. 14.
[디자인 패턴] 프로토타입(Prototype) 패턴 ❓프로토타입 패턴이 무엇일까? 프로토타입 패턴은 생성패턴의 하나로, 프로토타입(원형)을 사용하여 객체를 생성하는 것을 말합니다. ❓프로토타입(원형)을 사용하는 이유? 프로토타입에서는 기존에 있는 객체가 있다면, 새로 생성하는 것이 아닌, 기존의 객체를 복제하여 사용합니다. 이는 새로 객체를 만드는 것 보다 자원을 절약할 수 있습니다. 즉 인스턴스화 과정을 생략함으로써 생성 로직에 소모되는 시간과 자원을 절약할 수 있다는 것! 이러한 특성 때문에 대량 생산을 할 때 적은 자원으로 많은 객체를 만들 수 있다는 장점이 있습니다! ❓자바스크립트의 예시? 사실 자바스크립트의 예시라고 할 것이 없는 것이, 프로토타입은 자바스크립트에 내장 되어 있는, JS의 특징이라 할 수 있습니다. const Person = (f.. 공감수 0 댓글수 0 2023. 11. 11.
[디자인 패턴] 빌더(Builder) 패턴 ❓빌더 패턴이 무엇일까? 빌더 패턴은 복합 객체 생성 과정을 별도의 독립된 클래스로 관리하는 패턴을 말합니다. 쉽게 말해 build라는 클래스 하나로 생성을 모두 관리할 수 있다는 건데요. 그렇다면 복합 객체, 복잡한 객체란 무엇을 뜻하는 것일까요? ❓복합 객체? 복합 객체는 내부적으로 다른 클래스의 객체를 포함하고 있는 것을 말합니다. // Door 클래스 정의 class Door { operate(action) { console.log(`The door is ${action}.`); } } // Car 클래스 정의 class Car { constructor(model, year) { this.model = model; this.year = year; this.doors = []; } addDoor(c.. 공감수 0 댓글수 0 2023. 11. 11.
[디자인 패턴] 추상 팩토리(Abstract Factory) 패턴 ❓추상 팩토리 패턴? 추상 팩토리 패턴은, 팩토리 메서드 패턴에서 한 층 더 나아가, 팩토리 그룹, 객체 패밀리 (object families)를 만들어 확장해 나가는 패턴을 말합니다. 팩토리 매서드에 대한 글은 아래를 참고해주세요! [디자인 패턴] 팩토리 메서드(Factory Method) 패턴 ❓팩토리 메서드 패턴? 팩토리 메서드 패턴은 팩토리 패턴에서 확장된 패턴이라 생각하시면 됩니다. 기존 팩토리 패턴은 객체의 생성을 처리하는 동작을 클래스 혹은 메서드로 분리하는 것을 lurgi.tistory.com 제가 이해한 바로는, 쉽게 말해서 여러개의 추상 팩토리를 가진 그룹을 만드는 패턴을 추상 팩토리라 할 수 있을 것 같습니다. ❓추상 팩토리 패턴의 예 다이어그램을 통해 알아봅시다. 다양한 추상 팩토리.. 공감수 0 댓글수 0 2023. 11. 10.
[디자인 패턴] 팩토리 메서드(Factory Method) 패턴 ❓팩토리 메서드 패턴? 팩토리 메서드 패턴은 팩토리 패턴에서 확장된 패턴이라 생각하시면 됩니다. 기존 팩토리 패턴은 객체의 생성을 처리하는 동작을 클래스 혹은 메서드로 분리하는 것을 말하는데요, 여기서 한 발 더 나아가 팩토리 메서드 패턴은 ‘서브 클래스’ 에서 구현하는 패턴을 말합니다. 팩토리 패턴은 여기서 자세하게 보실 수 있습니다! [디자인 패턴] 팩토리(Factory) 패턴 ❓팩토리 패턴 팩토리 패턴은 생성 패턴중에서도 가장 기본이 되는 패턴이라고 합니다. 객체 생성 처리를 위임하여 객체 지향의 문제점을 해결할 수 있다고 하네요. 객체 생성을 담당하는 동작 lurgi.tistory.com ❗팩토리 메서드의 예시 (JS) // 추상 동물 클래스 (인터페이스로 간주) class Animal { mak.. 공감수 0 댓글수 0 2023. 11. 9.
[디자인 패턴] 싱글턴(Singleton) 패턴 ❓싱글턴 패턴? 싱글턴 패턴은 클래스의 인스턴스를 딱 하나로 고정시켜 놓도록 보장하는 패턴을 말합니다. 특정 클래스의 인스턴스가 오직 하나만 생성되기 때문에, 어디서든 그 인스턴스에 접근하더라도 하나의 인스턴스가 목적지가 됩니다. 싱글턴 패턴은 리소스 공유나 설정관리, 캐싱, 로그 새성과 같은 전역 상태를 가져야 하는 상황에서 사용되는 패턴입니다. 단일 인스턴스를 공유함으로써 리소스 낭비를 줄일 수 있고 일관된 상태를 유지할 수 있다는 것이죠! ❗싱글턴 패턴의 예시 (JS) 싱글턴 패턴의 예시를 자바스크립트 코드 보여드리겠습니다. class Singleton { constructor() { if (!Singleton.instance) { Singleton.instance = this; } return S.. 공감수 0 댓글수 0 2023. 11. 8.
[디자인 패턴] 팩토리(Factory) 패턴 ❓팩토리 패턴 팩토리 패턴은 생성 패턴중에서도 가장 기본이 되는 패턴이라고 합니다. 객체 생성 처리를 위임하여 객체 지향의 문제점을 해결할 수 있다고 하네요. 객체 생성을 담당하는 동작을 별도의 클래스 혹은 별도의 메서드로 분리하여 객체의 생성 동작을 위임하는 것을 말합니다. 즉 객체의 생성을 캡슐화 한다는 것! ❓팩토리 패턴의 장점 팩토피 패턴은 객체 지향의 문제점을 해결해 준다고 할 수 있습니다. new 연산자를 사용해 직접 객체를 생성하는 것은 ‘강력한 결합’을 만들어 낼 수 있습니다. 팩토리 패턴을 통해 ‘느슨한 결합’으로 만들어 의존성을 떨어뜨릴 수 있다는 것입니다. ❗팩토리 패턴의 예시 (JS) class Korean { greeting () { return "안녕하세요" } } class A.. 공감수 0 댓글수 0 2023. 11. 8.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.