1. 싱글톤패턴
하나의 클래스에 하나의 인스턴스만 가지는 패턴
보통 데이터베이스 연결 모듈에 많이 사용함
장점) 인스턴스 생성 비용 줄어듬
단점) 의존성이 높아짐
특징
- TDD 할 때 단위테스트를 주로 하는데, 각 테스트마다 독립적인 인스턴스를 만들기 어려움
- 모듈간의 결합을 강하게 만드는 단점 → 의존성 주입(DI)을 통해 모듈간 결합을 느슨하게 만들어 해결
의존성 주입(DI)
장점) 테스팅하기 쉽고 마이그레이션이 수월함.
단점) 모듈이 더욱 분리되므로 클래스 수가 늘어나 복잡성이 증가
2 .팩토리 패턴
객체 생성부분을 떼어내 추상화 한 패턴
상속관계에 있는 두 클래스에서 상위 클래스가 뼈대를 결정하고 하위클래스에서 객체 생성의 구체적인 내용을 결정
장점) 상위 클래스와 하위클래스가 분리되어 느슨한 결합, 더 많은 유연성, 유지 보수성 증가
특징
의존성 주입이라고도 볼 수 있음
정적 메서드 사용의 장점
1. 클래스의 인스턴스 없이 호출이 가능해서 메모리를 절약
2. 개별인스턴스에 붂이지 않으며 클래스 내의 함수를 정의 가능
3. 전략 패턴(=정책 패턴)
객테의 행위를 바꾸고 싶은 경우 직접 수정하지 않고 전략(캡슐화된 알고리즘)을 컨텍스트 안에서 바꿔주며 상호교체가 가능하게 만드는 패턴
passport(전략패턴을 활용한 라이브러리)
Node.js에서 인증모듈을 구현할 때 쓰는 미들웨어 라이브러리
LocalStrategy(서비스 내 회원가입 기반 인증) , OAuth(타 서비스 기반 인증) 전략 등을 지원
4. 옵저버 패턴
주체가 어떤 객체의 상태 변화를 관찰하다가 상태 변화가 있을 때마다 메서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴
옵저버 패턴을 활용한 서비스로는 트위터가 있다.
옵저버 패턴은 주로 이벤트 기반 시스템에 사용하며 MVC 패턴에도 사용
💡 자바 - 상속과 구현
1. 상속: 자식클래스가 부모클레스의 메서드 등을 상속받아 추가 및 확장할 수 있는 것
→ 재사용성, 중복성 최소화
2. 구현: 부모인터페이스를 자식 클래스에서 재정의하여 구현하는 것
상속은 일반 클래스, abstract 클래스 기반, 구현은 인터페이스 기반
자바스크립트에서의 옵저버 패턴
프록시 객체를 통해 옵저버 패턴 구현 가능
프록시 객체는 어떤 대상의 기본적인 동작의 작업을 가로챌 수 있는 객체를 뜻한다.
자바스크립트에서 프록시 객체는 두개의 매개변수를 가진다
- target : 프록시 할 대상
- handler : 프록시 객체의 target을 가로채서 정의할 동작이 정해져 있는 함수
Vue.js 3.0에서 옵저버 패턴
vue.js 3.0에서 ref나 reactive 로 정의하면 해당 값이 변경되었을 때 자동으로 DOM에 있는 값이 변경되는데, 이것이 프록시 객체를 이용한 옵저버 패턴을 이용하여 구현한 것
5. 프록시 패턴과 프록시 서버
프록시 패턴은 대상 객체에 접근하기 전 그 접근에 대한 흐름을 가로채 대상 객체 앞단의 인터페이스 역할을 하는 디자인 패턴
이를 통해 보안, 데이터 검증, 캐싱, 로깅에 사용
이는 프록시 객체로 쓰이기도 하지만 프록시 서버로도 활용
프록시 서버
서버와 클라이언트 사이에서 클라이언트가 자신을 통해 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 컴퓨터시스템이나 응용프로그램을 가르킨다.
프록시 서버로 쓰는 nginx
비동기 이벤트 기반의 구조와 다수의 연결을 효과적으로 처리가능한 웹 서버이며 주로 Node.js 서버 앞단의 프록시 서버로 활용된다.
→ 직접적인 서버로의 접근 차단, 보안 강화
→ 실제 포트를 숨길 수 있고 정적자원을 압축하거나 메인서버 앞단에서 로깅을 할 수도 있다.
프록시 서버로 쓰는 cloudFlare
- 전세계 적으로 분산된 서버가 있고, 이를통해 어떠한 시스템의 콘텐츠 전달을 빠르게 할 수 있는 CDN 서비스
- CDN 이외에도 DDOS 공격 방어, HTTPS 구축 등을 할 수 있다.
CORS와 프론트엔드의 프록시 서버
CORS(Cross-Origin Resource Sharing)은 서버가 웹 브라우저에서 리소스를 로드할 때 다른 오리진을 통해 로드하지 못하게 하는 HTTP 헤더 기반 메커니즘
프론트엔드에서는 127.0.0.1:3000 으로 테스팅하는데 백엔드 서버는 127.0.0.1:8080 일 경우 포트번호가 다르기 때문에 CORS에러 발생
이때 프록시 서버를 사용해서 프론트엔드 서버에서 요청하는 오리진을 127.0.0.1:8080으로 바꾸는것
CORS 에러 해결하고 API서버와의 통신도 매끄럽게 할 수 있다.
6. 이터레이터 패턴
이터레이터를 사용해서 컬렉션의 요소들에 접근하는 디자인 패턴
7. 노출모듈 패턴
즉시 실행 함수를 통해 접근 제어자(private, public)를 만드는 패턴
8. MVC 패턴
모델, 뷰, 컨트롤러로 이루어진 디자인 패턴
- 모델: 애플리케이션의 데이터 = 데이터베이스, 상수, 변수
- 뷰: 사용자 인터페이스 요소 = 사용자가 볼 수 있는 화면
- 컨트롤러: 모델과 뷰를 잇는 역할, 이벤트 등 메인 로직 담당
애플리케이션의 구성요소를 세가지 역할로 구분하여 개발 프로세스에서 각각의 구성 요소에만 집중해서 개발 할 수 있음.
장점) 재사용성 확장성 용이
단점) 애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해짐
React.js
- MVC 패턴을 이용한 대표적인 라이브러리
- 유저인터페이스를 구축하기 위한 라이브러리
- 가상 DOM을 통해 실제 DOM을 조작하는 것을 추상화 해서 성능을 높힘
- 대표적인 특성으로는 불변성
- 단방향 바인딩 적용, 자유도가 높음
- 메타가 운영중이며 넷플릭스, 트위터, 드롭박스, 마소 등에서 사용됨
9. MVP 패턴
- 모델, 뷰, 프레젠터로 이루어진 디자인 패턴
- 뷰와 프레젠터는 일대일 관계
- MVC 패턴보다 더 강한 결합을 가짐
10. MVVM 패턴
- 모델, 뷰, 뷰모델(VM)
- 뷰모델은 뷰를 추상화 한 계층
- 양방향 데이터 바인딩을 지원하여, UI를 코드수정없이 재사용 가능하고 단위테스팅하기 쉽다
Vue.js
- MVVM 패턴을 가진 대표적인 프레임 워크
- 반응형이 특징인 프론트엔드 프레임 워크
- watch 와 computed 등으로 쉽게 반응형 구축 가능
- 값 대입만으로 변수가 변경되며 양방향 바인딩, HTML을 토대로 컴포넌트를 구축할 수 있다는 특징
- 재사용 가능한 컴포넌트기반으로 UI를 구축할 수 있으며 BMW, 구글, 루이비통 등에서 사용
출처: 면접을 위한 CS 전공지식 노트
