chap1.0 - 디자인패턴

1. 디자인 패턴 : 객체 간의 상호 관계들을 하나의 '규약' 형태로 만들어 프로그램을 설계할 때 발생하는 문제점들을 해결할 수 있다.

우리가 프로그래밍할 때 쓰는 React.js, Vue.js, Spring 등 라이브러리나 프레임워크의 기본이 되는 것이 디자인 패턴이다. 우리가 어떠한 방식으로 로직을 구성해햐 하는지 이해할 수 있다.

*라이브러리 : 공통으로 사용될 수 있는 기능들을 모듈화 함, 별다른 규칙(파일명, 폴더명)이 없고 자유롭다.

*프레임워크 : 공통으로 사용될 수 있는 기능들을 모듈화 함, 사용하는 규칙이 있으며 엄격하다.

*추상화 : 중요한(핵심적인) 특징을 찾아낸 후 간단하게 표현,여러가지 요소를 하나로 통합하는 방향성 / 개라는 관념을 Dog 이라는 클래스로 정의, Dog 클래스, Cat 클래스 에서 공통된 기능을 묶어 Animal 클래스로 정의하는 것이 추상화

*캡슐화 : 연관 있는 것들을 하나로 묶어주는 것 , 객체와 연관 있는 변수나 함수를 클래스로 묶고 감출 내용은 감춤 

*상속성 : 상위 클래스의 특성을 하위 클래스가 재사용, 확장할 수 있음

*다형성 : 서로 다른 방식을 하나의 표현으로 사용할 수 있는 것, 오버로딩(Overloading) 이란 함수가 같은 이름, 매개변수 타입이 다른 경우, 오버라이딩(Overriding) 이란 상위 클래스의 함수를 아휘 글래스에서 재정의 하는 것

 

2. 싱글톤 패턴(singleton pattern) :  하나의 클래스에 오직 하나의 인스턴스만을 가진다.

- 이 인스턴스를 다른 모듈들이 공유하여 사용하기 때문에 인스턴스를 생성할 때 드는 비용이 줄어든다.

- 의존성이 높아진다.

-데이터베이스(DB) 연결 모듈에 많이 쓰인다.

 싱글톤 패턴의 단점

TDD(Test Driven Development)를 할 때 별로다. 단위 테스트 시행 시 테스트가 독립적이어야 하는데 모듈 간의 결합이 강해 걸림돌이 된다. 이는 의존성 주입으로 해결 가능하다.

*의존성 주입 : ???

 

3. 팩토리 패턴(factory pattern) : 객체 생성부분을 감싸는 추상화(상위 클래스로 묶은)한 패턴, 전달받은 값에 따라 다른 객체를 생성하는 방법

new Object(42) // 숫자를 매개변수로 하는 생성자 호출

new Object('str') // 문자열을 매개변수로 하는 생성자 호출 

 

4. 전략 패턴(strategy pattern) : 객체의 행위를 실행할 때 '직접' 수정하지 않고 '전략' 이라고 부르는 캡슐화된 알고리즘을 컨텍스트 안에서 바꿔주며 상호 교체가 가능하게 해주는 패턴

ex) 결제를 할 때 N, K, L .. 등 여러 전략(방식) 이 있을 때 pay("K", 100) , pay("N", 200) 처럼 '전략'만 달리 결제를 한다.

ex) 인증(로그인)을 할 때 페이스북, 네이버, 카카오 등으로 '전략'만 바꾸어 인증을 한다 

*컨텍스트 : 상황, 맥락, 문맥을 의미하며 개발자가 어떤 작업을 완료하는 데 필요한 모든 관련 정보를 말한다.

 

5. 옵저버 패턴(ovserver pattern) : 주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버들에게 변화를 알려준다.

*자바 - 상속(extends) : 자식 클래스가 부모 클래스의 메서드 등을 상속받아 사용, 자식 클래스에서 추가 및 확장 할 수 있다. 재사용성, 중복성이 최소화됨

*자바 - 구현(implements) : 부모 인터페이스(interace)를 자식 클래스에서 재정의하여 구현, 반드시 부모 클래스의 메서드를 재정의(overriding)해야 한다.

프록시 객체로 옵저버 패턴 구현

target : 프록시할 대상

handler : 프록시 객체의 target 동작을 가로채서 정의할 동작들이 정해져 있는 함수

자바 - handler 안에 get(), has(), set() 함수등을 이용해 객체 사용에 대한 접근을 '가로체' 어떠한 로직을 실행한다.

const p = new Proxy({a : 'Kim', b : 'Keon'}, handler)  // 프록시인 handler 안에서 name = a + b 인 로직을 실행

p.name = Kim Keon 으로 나옴

 

프론트엔드에서 자주 쓰는 vue.js 3.0 에서 ref 나 reactive 로 정의하면 어떤 값이 변경되었을 떄 자동으로 DOM 에 있는 값이 변경되는데 이것이 바로 프록시 객체를 이용한 옵저버 패턴이다.

*DOM(Document Object MOdel) : 문서 객체 모델로 웹 브라우저상의 화면을 이루고 있는 요소들

 

5. 프록시 패턴(proxy pattern) : 대상 객체에 접근하기 전 그 접근에 대한 흐름을 가로채 대상 객체 앞단의 인터페이스 역할을 함

이를 통해 객체의 속성, 변환 등을 보완하며 보안, 데이터 검증, 캐싱, 로깅을 사용

사용자 - 인터페이스--프록시 객체--인터페이스 - 대상 객체

마찬가지로 프록시 서버 는 서버와 클라이언트 사이에서 클라이언트가 자신을 통해 다른 네트워크 서비스에 간접적으로 사용할 수 있게 하는 프로그램

클라이언트(사용자) - 프록시 서버 - 서버

 

프론트엔드에서  프록시 서버

프론트엔드 개발 시 프론트엔드 서버를 만들고 백엔드 서버와 통신을 시키는데 이때 만약 프론트엔드에서 127.0.0.1:3000 으로 테스팅을 하고 백엔드는 127.0.0.1:12010 이라면 포트 번호가 다르기 때문에 CORS 에러가 난다. 이때 프록시 서버를 둬서 프론트엔드 서버에서 요청되는 오리진(127.0.0.1:3000부분)을 백엔드 오리진으로 바꾸어 준다.

프론트엔드 서버 -- 프록시 서버 -- 백엔드 서버

*CORS : 서버가 웹 브라우저에서 리소스를 로드할 떄 다른 오리진을 통해 로드하지 못하게 하는 HTTP 헤더 기반 메커니즘

 

6. 이터레이터 패턴 (iterator pattern) :  이터레이터(iterator) 를 사용하여 컬렉션(collection) 의 요소들에 접근하는 것

*이터레이터 : next() 함수같은 느낌으로 컬렉션 안에 있는 것들을 순회하며 이터레이터 객체를 하나씩 뽑는다.

*컬렉션 : 배열, 튜플, 딕셔너리같이 연속적으로 값이 담겨있는 것.

*이터레이터 프로토콜 : 이러한 이터레이터 객체를 순회하며 뽑을 때 쓰이는 규칙.

 

7. 노출모듈 패턴 (revealing module pattern) : private, public 같은 접근 제어자를 만드는 패턴, 즉 다른 모듈과 변수나 함수를 공유 할 범위를 정의한다.

*public : 클래스 안 + 자식 + 외부 모두 접근 가능

*protected : 클래스 안, 자식 접근 가능

*private : 클래스 안 만 접근 가능

*즉시 실행 함수 : 함수를 정의하자마자 바로 호출하는 함수, 초기화 코드와 라이브러리 내 전역 변수의 충돌 방지 등에 사용한다.

 

8. MVC패턴 : 모델(Model), 뷰(View), 컨트롤러(Controller) 로 이루어지며 사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 사용되는 소프트웨어 디자인 패턴

*모델 : 애플리케이션의 데이터인 데이터베이스, 상수, 변수

*뷰 : inputbox, checkbox, textarea 등 사용자 인터페이스 요소

*컨트롤러 : 하나 이상의 모델과 하나 이상의 뷰를 잇는 다리 역할로 이벤트 등 메인 로직을 담당

- React.js 가 MVC 패턴을 사용하는 라이브러리이다.

- 사용자가 뷰에서 뭔가를 입력 > 컨트롤러가 모델(db) 를 갱신 > 바뀐 모델이 데이터를 컨트롤러에게 전달 > 컨트롤러가 다시 뷰를 바꾸기

9. MVP 패턴 : 컨트롤러가 프레젠터(presenter) 로 교체된 패턴

 

10. MVVM 패턴 : 컨트롤러가 뷰 모델 (view model) 로 바뀐 패턴

- 프래임워크 Vue.js 가 watch, computed 등으로 반응형을 사용한다. 함수를 사용하지 않고 값 대입만으로 변수가 변경되며 양방향 바인당, html 을 토대로 컴포넌트를 구축할 수 있다.

- 사용자가 뷰에서 뭔가를 입력 > 양방향 데이터 바인딩으로 뷰 모델에 데이터 넘어감 > 사용자의 뷰에서 바로 갱신이 되며 모델도 갱신

*뷰 모델 : 뷰를 더 추상화한 계층으로 커멘드와 바인딩을 가진다. 뷰와 뷰 모델 사이의 양방향 데이터 바인딩을 지원하며 UI 를 별도의 코드 수정 없이 재사용할 수 있다.

*커멘드 : 여러가지 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 기법

*데이터 바인딩 : 화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법으로, 뷰 모델을 변경하면 뷰가 변경된다.