MVVM 패턴은 MVC의 C에 해당하는 컨트롤러가 뷰모델(view model)로 바뀐 패턴입니다. 뷰모델은 뷰를 위한 전담 매니저라고 생각할 수 있습니다. 뷰가 무엇을 보여줘야 할지, 사용자가 어떤 행동을 할지 미리 다 알고 준비해주는 전문적인 역할입니다. MVVM 패턴은 MVC 패턴과는 다르게 커맨드와 데이터 바인딩을 가지는 것이 특징입니다. 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원하며 UI를 별도의 코드 수정 없이 재사용할 수 있고 단위 테스팅하기 쉽다는 장점이 있습니다.🪄 MVVM 패턴의 예 : 뷰MVVM 패턴을 가진 대표적인 프레임워크로는 뷰(Vue.js)가 있습니다. Vue.js는 데이터가 변경될 때마다 화면이 알아서 반응하여 업데이트되는 반응형(reactivity)이 특징인 프런트엔..

MVP 패턴은 MVC 패턴으로부터 파생되었으며 MVC에서 C에 해당하는 컨트롤러가 프레젠터(presenter)로 교체된 패턴입니다. 뷰와 프레젠터는 일대일 관계이기 때문에 MVC 패턴보다 더 강한 결합을 지닌 디자인 패턴입니다. 1. MVP 패턴은 무엇인가요? MVP 패턴은 MVC 패턴에서 파생된 디자인 패턴으로, 컨트롤러가 프레젠터로 대체된 점이 가장 큰 특징입니다. MVC에서 컨트롤러는 모델과 뷰에 대한 정보를 모두 알고 직접 제어하지만, MVP의 프레젠터는 뷰와 모델 사이의 중개자 역할만 수행합니다. 즉, 사용자의 입력은 뷰를 통해 프레젠터로 전달되고, 프레젠터는 필요한 로직을 모델에 요청한 뒤 그 결과를 다시 뷰에 전달하여 화면을 업데이트합니다. 이 구조에서 뷰와 프레젠터는 인터페이스를 통해 1..

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

노출모듈 패턴(revealing module pattern)은 자바스크립트에서 변수나 함수가 의도치 않게 외부에서 바뀌거나 겹치는 것을 막기 위해, 마치 하나의 '캡슐'처럼 코드를 안전하게 포장하는 패턴입니다. 이 캡슐의 일부 내용물은 외부에서 볼 수 없도록 숨기고(private), 허락된 것들만 밖으로 내보여서 사용할 수 있게(public) 해줍니다. 💻 코드 예시1. 자바스크립트(JavaScript)에서의 노출모듈 패턴a와 b는 다른 모듈에서 사용할 수 있는 변수나 함수인 private 범위를 가집니다. c와 d는 다른 모듈에서 사용할 수 있는 변수나 함수이며 public 범위를 가집니다. 참고로 앞서 설명한 노출모듈 패턴을 기반으로 만든 자바스크립트 모듈 방식으로는 CJF(CommonJS) 모듈 ..

이터레이터(iterator)를 사용하여 컬렉션의 요소들에 접근하는 디자인 패턴입니다.이를 통해 순회할 수 있는 여러 가지 자료형의 구조와는 상관없이 이터레이터라는 하나의 인터페이스로 순회가 가능합니다.💻 코드 예시1. 자바스크립트(JavaScript)에서의 이터레이터 패턴다른 자료 구조인 set과 map임에도 똑같은 for a of b라는 이터레이터 프로토콜을 통해 순회하는 것을 볼 수 있습니다.const mp=new Map()mp.set('a',1)mp.set('b',2)mp.set('c',3)const st=new Set()st.add(1)st.add(2)st.add(3)for (let a of mp)console.log(a)for(let a of st) console.log(a)/*['a',1][..

대상 객체에 접근하기 전 그 접근에 대한 흐름을 가로채 해당 접근을 필터링하거나 수정하는 등의 역할을 하는 계층이 있는 디자인 패턴입니다.객체의 속성, 변환 등을 보안하며 보안, 데이터 검증, 캐싱, 로깅에 사용합니다. 이는 앞서 설명한 프록시 객체로 쓰이기도 하지만 프록시 서버로도 활용됩니다. 용어설명 :프록시 서버에서의 캐싱: 캐시 안에 정보를 담아두고, 캐시 안에 있는 정보를 요구하는 요청에 대해 다시 멀리 있는 원격 서버에 요청하지 않고 캐시 안에 있는 데이터를 활용하는 것을 말합니다.사용자가 자주 요청하는 데이터를 프록시 서버가 미리 복사해서 보관(캐싱)해둡니다. 덕분에 진짜 서버까지 가지 않고도 프록시 서버가 바로 데이터를 전달해 줄 수 있어 속도가 매우 빨라집니다.불필요하게 외부와 연결하지 ..

주체(Subject)가 어떤 객체(Observer)의 상태 변화를 관찰하다가, 상태 변화가 생길 때마다 메서드 등을 통해 옵저버 목록에 있는 모든 옵저버(Observer)에게 변화를 자동으로 알려주는 디자인 패턴입니다. 주체와 객체를 따로 두지 않고, 상태가 변경되는 객체(주체)를 기반으로 구축하기도 합니다. 대표적인 예로 트위터(유튜브)의 구독 알림 기능이나 MVC(Model-View-Controller) 패턴 등이 있습니다.📁 비유: 유튜브 채널 구독 (주체와 구독자)옵저버 패턴은 유튜브 채널과 구독자 관계를 생각하면 가장 이해하기 쉽습니다.주체 (Subject): '얄팍한 코딩사전' 유튜브 채널 (Java 예제의 Topic 클래스)옵저버 (Observers): 채널을 구독한 구독자 A, B, C ..

객체의 행위(Algorithm)를 바꾸고 싶은 경우, 해당 객체의 코드를 직접 수정하지 않고 '전략'이라고 부르는 캡슐화한 알고리즘(행위)을 컨텍스트(Context) 안에서 바꿔주면, 행위가 상호 교체될 수 있게 만드는 패턴입니다.📁 전략 패턴 비유(ft. 얄코 용사)영상(링크)에서는 전략 패턴을 게임 캐릭터(용사)에 비유하여 설명합니다. 1. 문제가 되는 방식 (상속의 함정)만약 Warrior 클래스 안에 attack() 메서드(행위)가 '칼로 공격'이라고 고정되어 있다고 가정해 보겠습니다.이때 '활 쏘는 용사'가 필요하면 어떻게 할까요? Warrior를 상속받아 Archer를 만들고 attack()을 '활 쏘기'로 덮어씌울(Override) 수 있습니다. 만약 '불 마법 쓰는 용사'가 필요하면 또 ..

객체의 생성(create) 과정을 전담하는 클래스(공장)를 만들어, 객체 생성을 사용하는 코드로부터 분리/추상화하는 디자인 패턴입니다.팩토리(Factory), 즉 '공장'이라는 이름처럼, 객체를 직접 new로 만드는 것이 아니라 '공장'에 요청하여 객체를 받아오는 방식입니다.핵심 정의: 객체를 사용하는 코드(클라이언트)에서 객체 생성 코드를 분리(추상화)하는 패턴입니다.패턴 방식: 상속 관계에 있는 두 클래스에서, 상위 클래스(추상 클래스)가 인터페이스와 같은 중요한 뼈대를 결정하고, 하위 클래스(구현 클래스)가 객체 생성에 관한 구체적인 내용을 결정합니다.👍 팩토리 패턴의 장점느슨한 결합 (Loose Coupling): 객체를 사용하는 상위 클래스와 객체를 생성하는 하위 클래스가 분리됩니다. 이로 인..

하나의 클래스에 오직 하나의 인스턴스(객체)만 가지도록 보장하는 패턴입니다.하나의 클래스를 기반으로 여러 개의 개별 인스턴스를 만들 수 있지만, 그렇게 하지 않고 단 하나의 인스턴스를 만들어 이를 기반으로 로직을 만드는 데 쓰이며, 보통 데이터베이스 연결 모듈처럼 프로그램 전체에서 유일해야 하는 객체에 사용됩니다. 📁싱글톤 패턴 요약 (ft. 얄코 버거 🍔)영상(링크)에서는 싱글톤 패턴을 '얄코 버거' 프랜차이즈에 비유하여 설명합니다. 1. 클래스와 객체 (프랜차이즈 본사 vs 개별 매장)클래스 (Class): '얄코 버거'라는 프랜차이즈 본사(설계도) 자체입니다.인스턴스 객체 (Instance): 본사의 설계도를 바탕으로 여기저기 생긴 개별 매장입니다.인스턴스 변수 (Instance Field): ..