MVVM MVVM 패턴은 MVC의 C에 해당하는 컨트롤러가 뷰모델로 바뀐 패턴이다. 1. 장단점 MVVM 패턴은 MVC 패턴과는 다르게 커맨드와 데이터 바인딩을 가지고 있다. 뷰와 모델 사이의 양방향 데이터 바인딩을 지원한다. UI를 별도의 코드 수정 없이 재사용할 수 있다. 단위 테스트하기 쉽다. 커맨드란? 여러 가지 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 기법 데이터 바인딩이란? 화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법으로, 뷰모델을 변경하면 뷰가 변경된다. 2. 모델(Model) 화면 표현하는데 필요한 데이터를 관리하며 사용자가 입력한 데이터를 저장하거나, 서버로 부터 받은 데이터를 저장합니다. 데이터 변경 시 View Model에게 변경 알림을 전송합..

MVP MVP패턴은 MVC 패턴으로부터 파생되었으며 MVC에서 C에 해당하는 컨트롤러가 프레젠터(presenter)로 교체된 디자인 패턴이다. 뷰와 프레젠터는 1:1 관계이기 때문에 MVC 패턴보다 더 강한 결합을 지닌 디자인 패턴이다. 1. 장단점 MVC와는 다르게 코드가 깔끔해지고, Model과 View의 결합도를 낮추면, 새로운 기능 추가 및 변경을 할 때마다 관련된 부분만 코드를 수정하면 되기 때문에 확장성이 개선된다. UI, DATA 각각 파트를 나눠어서 해야 할 일이 명확해지고, 쉽고 빠른 코딩이 가능하다. 애플리케이션이 복잡해질수록 View와 Presenter 사이의 의존성이 강해지는 문제가 있다. MVC의 Controller처럼 추가 비즈니스 로직에 집중되는 경향이 있다. 2. 모델(Mod..

MVC MVC 패턴은 모델(Model), 뷰(View), 컨트롤러(Controller)로 이루어진 디자인 패턴이다. 1. 장단점 애플리케이션 구성 요소를 세 가지 역할로 구분하여 각각의 구성 요소에만 집중해서 개발할 수 있다. 재사용성과 확장성이 용이하다. 애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해진다는 단점이 있다. 2. 모델(Model) 모델(Model)은 애플리케이션의 데이터인 데이터베이스, 상수, 변수 등을 뜻한다. 모델 예 사각형 모양의 박스 안에 글자가 들어있다면 그 사각형 모양의 박스 위치정보, 글자 내용, 글자 위치, 글자 포맷에 관한 모든 정보를 가지고 있어야 한다. 이러한 정보를 담겨있는 것을 모델이라 한다. 뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거..

프록시 패턴 프록시 패턴(proxy patter)은 대상 객채에 접근하기 전 그 접근에 대한 흐름을 가로채 대상 객체 앞단의 인터페이스 역할을 하는 디자인 패턴이다. 프록시 객체란? 프록시 객체는 디자인 패턴 중 하나인 프록시 패턴이 녹아들어 있는 객체이다. 2023.01.09 - [JavaScript] - 프록시(Proxy) 객체 JavaScript에서 사용 방법(옵저버 패턴) 1. 프록시 패턴 구조 프록시 패턴을 통해 객체의 속성, 변환 등을 보완하며 보안, 데이터 검증, 캐싱, 로깅에 사용한다. 프록시 패턴은 프록시 객체로 쓰이기도 하지만 프록시 서버로도 활용된다. 2. 프록시 서버 프록시 서버는 서버와 클라이언트 사이에서 클라이언트 자신을 통해 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해..

Observer Pattern 옵저버 패턴(Observer Pattern)이란? 주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴이다. 여기서 주체란 객체 상태 변화를 보고 있는 관찰자이며, 옵저버들이란 이 객체의 상태 변화에 따라 전달되는 메서드 등을 기반으로 ‘추가 변화 사항’이 생기는 객체들을 의미한다. 1. 옵저버 패턴 구조 1-1) 객체와 주체가 분리 1-1) 객체와 주체가 합쳐짐 2. 옵저버 패턴의 사용 예 2-1) 옵저버 패턴을 활용한 서비스로는 트위터가 있다. 내가 어떤 사람인 주체를 ‘팔로우’했다면, 주체가 포스팅을 올리게 되면 알림이 ‘팔로워’에게 간다. 2-2) 옵저버 패턴은 주로 이벤트 ..

Proxy 프록시 객체란? 프록시(proxy) 객체는 어떠한 대상의 기본적인 동작(속성 접근, 할당, 순회, 열거, 함수 호출 등)의 작업을 가로챌 수 있는 객체를 뜻하며 자바스크립트에서 프록시 객체는 두 개의 매개변수를 가진다. 1. 사용 방법 const proxy = new Proxy(target, handler) target : 프록시할 대상 handler : 프록시 객체의 traget 동작을 가로채서 정의할 동작들이 정해져 있는 함수 Handelr 작동 시점 get 프로퍼티를 읽을 때 set 프로터티에 값을 쓸 때 has in 연산자가 작동할 때 deleteProperty delete 연산자가 작동할 때 apply 함수를 호출할 때 constructor new 연산자가 작동할 때 getProtot..

팩토리 패턴이란? 객체를 사용하는 코드에서 객체 생성 부분을 떼어내 추상화하는 패턴이자 상속 관계에 있는 두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고, 하위 클래스에서 객체 생성에 관한 구체적인 내용을 결정하는 패턴이다. 1. 장점 상위 클래스와 하위 클래스가 분리되어 느슨한 결합을 가지지만 상위 클래스에서는 인스턴스 생성 방식에 대해 전혀 알 필요가 없기 때문에 많은 유연성을 갖게 된다. 객체 생성 로직이 따로 떼어져 있기 때문에 코드 리팩토링 하더라도 한 곳만 고칠 수 있게 되니 유지 보수성이 증가한다. 2. JavaScript에서 팩토리 패턴 각각의 레시피(우유, 아메리카노 등) 들어있는 하위 클래스가 컨베이어 벨트를 통해 전달되고, 상위 클래스인 바리스타 공장에서 이 레피시들을 토대로 우유..

싱글톤 패턴 싱글톤 패턴이란? 싱글톤 패턴은 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴이다. 하나의 클래스를 기반으로 여러 개의 개별적인 인스턴스를 만들 수 있지만, 그렇게 하지 않고 하나의 클래스를 기반으로 단 하나의 인스턴스를 만들어 이를 기반으로 로직을 만드는데 쓰이며, 보통 데이터베이스 연결 모듈에 많이 사용한다. 1. 장단점 하나의 인스턴스를 만들어 놓고 해당 인스턴스를 다른 모듈이 공유하며 사용하기 때문에 인스턴스 생성할 때 드는 비용이 줄어든다. 하지만 의존성이 높아진다는 단점이 있다 TDD(Test Driven Development)를 할 때 걸림돌이 된다. TDD를 할 때 단위 테스트를 주로 하는데, 단위 테스트는 테스트가 서로 독립적이어야 하며 테스트를 어떤 순서로든 실행할 수..

Observer Pattern 이벤트가 발생할 때마다 ‘즉각적으로 처리’할 수 있도록 만드는 프로그래밍 패턴으로 이벤트가 일어나는 것을 감시하는 감시자의 역할을 만든다고 하여 옵저버라고 한다. ex) 키의 입력, 터치의 발생, 데이터의 수신 등 이벤트란? 함수로 요청하지 않았지만 시스템이나, 루틴에 의해서 발생하게 되는 동작들을 이벤트라고 부른다. 1. 기본 개념 B에서는 자신의 이벤트를 받을 수 있는 인터페이스를 만들어 공개하고 A는 이를 구현하여 B에 넘겨주면 인터페이스만 알아도 이벤트를 넘겨줄 수 있다. 이때 이 인터페이스를 ‘Observer’ 또는 코틀린에서는 ‘Listener’라고 부르며 이렇게 이벤트를 넘겨주는 행위를 ‘Callback’이라고 합니다. 2. 옵저버 패턴 구현 fun main()..