본문 바로가기
  • 프론트엔드 개발자 세오세오 | Frontend dev Seo
728x90
반응형

디자인패턴3

[디자인패턴] 자바스크립트로 옵저버패턴(Observer pattern) 구현하기 옵저버 패턴은 Subject라 불리는 객체가 옵저버라 불리는 디펜던트들을 유지하고, 상태 변화가 생겼을 때 이들에게 상황을 알리는 경우를 의미한다. 이 패턴은 한 객체의 액션을 다른 객체에 업데이트시켜야하는 상황에서 특히 유용하다. 아래는 자바스크립트로 구현한 예시이다. UI나 로그 시스템 객체는 Character 객체의 변화를 알고 싶어한다. Character의 HP가 바뀌면, 옵저버인 UI가 이에 대해 알아야하고, 변경된 HP를 보여줘야 한다.  1. Subject 인터페이스를 만들고, 이걸 사용해서 Character 클래스로 만든다class Subject { addObserver(observer) { throw new Error("You must implement addObserver met.. 2024. 6. 24.
[디자인패턴] 자바스크립트로 전략 패턴(Strategy Pattern) 구현하기 1. 전략패턴(Strategy Pattern)이란?전략 패턴(Strategy Pattern)은 객체의 행위를 바꾸고 싶은 경우 직접 수정하지 않고 전략(알고리즘)을 객체화하여 동적으로 행위를 변경할 수 있게 해주는 디자인 패턴이다. 이 패턴은 여러 알고리즘을 하나의 추상적인 인터페이스로 묶어 알고리즘군을 정의하고, 각 알고리즘을 구체적인 전략 클래스로 캡슐화하여 필요에 따라 서로 교체 가능하게 만든다. 이를 통해 클라이언트는 알고리즘의 내부 구조를 알 필요 없이 유연하게 알고리즘을 변경할 수 있다.  알고리즘군이란?- 동일한 기능을 수행하지만 다른 방식으로 구현된 알고리즘들의 모음 예)- "정렬"이라는 동일한 문제를 해결하는 알고리즘 군 안에는 버블정렬, 삽입정렬, 퀵정렬, 병합정렬 등이 있다.- 이 알.. 2024. 6. 11.
[디자인패턴] 요즘 가장 핫한 프론트엔드 디자인패턴: Feature Sliced Design (번역) 원본: https://dev.to/m_midas/feature-sliced-design-the-best-frontend-architecture-4noj Feature-Sliced Design: The Best Frontend ArchitectureIntroduction Frontend developers often face a problem related to application architecture....dev.to  개요프론트엔드 개발을 할 때 앱 내 구조에 관한 문제는 흔히 발생한다. 확장성이 있으면서 디펜던시가 강하지 않으며 앱 모듈 간 높은 응집력이 기반이되는 구조의 사용이 요구되기 때문이다. 본 글은 저자가 생각하기에 리액트에서 선택할 수 있는 최고의 옵션인 Feature-Sliced De.. 2024. 6. 3.
728x90
반응형