본문 바로가기

디자인패턴9

1장-디자인 패턴) MVVM 패턴 1. MVVM 패턴이란 ? - MVVM 패턴은 MVC 의 C 에 해당하는 컨트롤러가 뷰모델(View Model)로 바뀐 패턴이다. - 뷰모델은 뷰를 더 추상화한 계층이며, MVC패턴과는 다르게 커맨드와 데이터 바인딩을 가지는 것이 특징이다. - 뷰와 뷰모델 사이에 양방향 데이터 바인딩을 지원한다. - UI를 별도의 코드 수정 없이 재사용할 수 있다. - 단위 테스팅하기 쉽다는 장점이 있다. 2. 예시 : Vue.js - 함수를 사용하지 않고 값 대입만으로도 변수가 변경되며 양방향 바인딩, html을 토대로 컴포넌트를 구축할 수 있다는 점이 특징이다. - 데이터바인딩이란 ? : 화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법으로, 뷰모델을 변경하면 뷰가 변경된다. 2023. 2. 28.
1장-디자인 패턴) MVC 패턴 1. MVC 패턴이란 ? - Model, View, Controller 로 이루어진 디자인패턴이다. - 앱의 구성요소를 세가지로 구분하여 개발 프로세스에서 각각의 구성요소에만 집중해서 개발할 수 있다. - 재사용성과 확장성이 용이하지만, 복잡할 수록 모델과 뷰의 관계가 복잡해지는 단점이 있다. 2. 모델 - model은 앱의 데이터인 DB, 상수, 변수 등을 뜻한다. - 박스모델에서 박스의 위치, 글자, 포맷, 모양 등에 관한 정보들을 가지고 있어야 한다. - 뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거나 갱신한다. 3. 뷰 - inputbox, checkbox, textarea 등 사용자인터페이스(UI)를 나타낸다. - 모델을 기반으로 사용자가 볼 수 있는 요소 및 화면을 뜻한다.. 2023. 2. 27.
1장-디자인 패턴) 노출모듈 패턴 1. 노출모듈 패턴이란? - 즉시 실행함수를 통해 private, public 같은 접근 제어자를 만드는 패턴이다. - 자바는 킹로그래밍언어라서 접근 제어자 설정이 편하지만, JS는 노출모듈패턴을 통해 구현한다. 2. 예시 - a와 b는 다른 모듈에서 사용할 수 없으며, private 범위를 가진다. - c와 d는 다른 모듈에서 사용할 수 있으며, public 범위를 가진다. - CJS모듈 방식이 이런 걸로 만들어졌다. 2023. 2. 27.
1장-디자인 패턴) 이터레이터 패턴 1. 이터레이터 패턴이란 - 이터레이터를 사용하여 컬렉션의 요소들에 접근하는 디자인패턴. - 뭔소린가 하면, 순회할 수 있는 여러 가지 자료형의 구조와는 상관 없이 이터레이터라는 하나의 인터페이스로 순회하면서 각각의 요소에 어떠한 짓거리를 할 수 있다는 얘기다. 2. 예시 - 다른 구조인 map과 set임에도 같은 'for a of b' 라는 이터레이터 프로토콜을 통해 순회할 수 있다. - 이터러블 프로토콜이란 ? : 이터러블한 객체들을 순회할 때 쓰이는 규칙 - 이터러블한 객체란 ? : 반복이 가능한 객체로 배열을 일반화한 객체 2023. 2. 27.
1장-디자인 패턴) 프록시패턴과 프록시서버 참고로 앞서 포스팅한 프록시객체는 프록시패턴이 녹아있는 객체이다. 1. 프록시패턴 - 대상 객체애 접근하기 전, 그 접근에 대한 흐름을 가로채 대상 객체 앞단의 인터페이스 역할을 하는 디자인 패턴이다. - 프록시란 ? '대리' / '대신' 의 의미이다. - 이를 통해 객체의 속성, 변환 등을 보완하며, 보안, 검증, 캐싱, 로깅 등에 사용한다. - 프록시 서버로도 활용된다. 2. 프록시서버 - NGINX : 비동기 이벤트 기반의 구조와 다수의 연결을 효과적으로 처리 가능한 웹 서버이고, 주로 Node.js의 앞단의 프록시서버로 활용. - NodeJS의 창시자도 버퍼오버플로우의 취약점 예방을 위해 nginx를 프록시서버로 앞단에 놓는게 좋다고 했다. - 버퍼오버플로우란 ? 버퍼는 메모리공간이며, 메모리 공.. 2023. 2. 26.
1장-디자인 패턴) 옵저버패턴 1.1 Observer pattern 이란? - 주체가 어떠한 객체의 상태를 관찰하다가 변화가 있을 때마다 메서드 등을 통해 옵저 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴. - 주체는 객체의 상태 변화를 보고 있는 관찰자. - 옵저버들은 이 객체의 상태 변화에 따라 전달되는 메서드 등을 기반으로 추가 변경 사항이 생기는 객체들이다. - 쉽게 말해 주체가 객체를 보고있다가 뭔가 바뀌면 옵저버들한테 뭐 하라고 알려준다. - 주체와 객체를 따로 두지 않고 상태변경 객체를 기반으로 구축하기도 한다. - 주로 이벤트 기반 시스템에 사용하며, MVC 패턴에도 사용된다. (리액트가 이거다) - model : 주체 - view : 옵저버 - controller : 작동하는 것 1.2 JavaScript에서.. 2023. 2. 20.
1장-디자인 패턴) 전략패턴 (정책 패턴) 1.1 Strategy pattern 이란? - 정책 패턴이라고도 하며, 객체의 행위를 바꾸고 싶은 경우 '직접' 수정하지 않고 전략이라고 부르는 '캡슐화한 알고리즘'을 컨텍스트 안에서 바꾸어 주면서 상호 교체가 가능하도록 만드는 패턴이다. - 컨텍스트란 ? : 상황, 맥락, 문맥을 의미하며, 개발자가 어떤 작업을 완료하는데 필요한 모든 정보이다. - 주로 결제시스템/passport 구현의 패턴에서 쓰인다. - passport : Node.js에서 인증모듈을 구현하는데 쓰이는 미들웨어 라이브러리이다. 여러가지 전략을 기반으로 인증할 수 있도록 하며, 서비스 내부 회원가입을 이용한 LocalStrategy와 네이버/구글/페북 등의 다른 서비스 인증을 기반으로 한 OAuth 전략을 지원한다. 1.1.1 Ja.. 2023. 2. 20.
1장-디자인 패턴) Factory 패턴 1.1 Factory pattern 이란? - 객체 사용 코드에서 객체 생성 부분을 떼어나 추상화한 패턴이다. - 상속 관계에 있는 두 클래스에서 상위 클래스가 중요한 뼈대를 결정하고 하위 클래스에서 객체 생성에 대한 구체적인 내용을 결정한다. - 상위클래스와 하위클래스가 분리되므로 느슨한 결합이 되며, 많은 유연성을 가지게 된다. - 객체 생성에 대한 로직이 분리되어있어 코드 리팩터링에 유리하다. (유지/보수성 증가) 1.1.1 JavaScript example 예시1) - 숫자를 전달하거나 문자열을 전달함에 따라 다른 타입의 객체를 생성한다. 즉, 전달 값에 따라 다른 객체를 생성하며 인스턴스의 타입을 정합니다. 예시2) 커피팩토리 - CoffeeFactory라는 상위 클래스가 뼈대를 결정하고 하위 .. 2023. 2. 20.

티스토리툴바