[면접을 위한 CS 전공지식 노트] 1. 디자인 패턴과 프로그래밍 패러다임

라이브러리

• 공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것을 의미 폴더명, 파일명 등에 규칙이 없으며 자유롭다
• 프레임워크: 공통으로 사용될 수 있는 특정한 기능들을 모듈화한 것을 의미, 폴더명, 파일명에 규칙이 있고, 라이브러리에 비해 더 엄격

 

디자인 패턴

• 디자인 패턴이랑 프로그램을 설계할 때 발생했던 문제점들을 객체 간의 상호관계 등을 이용하여 해결할 수 있도록 하나의 '규약' 형태로 만들어 놓은 것

 

싱글톤 패턴

• 하나의 클래스에 오직 하나의 인스턴스만 가지는 패턴, 하나의 클래스를 기반으로 여러개의 개별적인 인스턴스를 만들수 있지만, 하나의 클래스를 기반으로 단하나의 인스턴스를 만들어 이를 기반으로 로직을 만드는 데 쓰이며, 보통 데이터베이스 연결 모듈에 많이 사용 
• 장점 : 비용이 줄어든다
• 단점 : 의존성이 높아진다

 

싱글톤 패턴의 단점

• 싱글톤 패턴은 TDD일때 걸림돌이 된다
• 단위테스트를 주로 사용하는데 미리 생성된 하나의 인스턴스를 기반으로 구현하는 패턴이므로 가 테스트마다 '독립적인' 인스턴스를 만들기가 어렵다

 

의존성 주입

• 사용하기 쉽고 실용적이지만 모듈 간의 결합을 강하게 만들 수 있다 => 의존성 주입을 통해 모듈간의 결합을 조금 느슨하게 만들어 해결

 

의존성 주입의 장점

• 모듈을 쉽게 교체할 수 있어 테스팅이 쉽고 마이그레이션하기도 수월
• 의존성 방향이 일관되고 애플리케이션을 쉽게 추론할 수 있다
• 모듈간의 관계들이 조금 더 명확

 

의존성 주입의 단점

• 모듈들이 더욱더 분리 복잡성 증가
• 런타임 패널티가 생김

 

의존성 주입 원칙

• " 상위 모듈은 하위 모듈에서 어떠한 것도 가져오지 않아야 합니다. 또한 둘다 추상화에 의존해야하며 이때 추상화는 세부 사항에 의존하지 말아야 합니다"

 

팩토리 패턴

• 팩토리 패턴은 객체를 사용하는 코드에서  객체 생성 부분을 떼어내 추상화한 패턴이자 상속 관계에 있는 . 두클래스에서 상위 클래스가 중요한 뼈대를 결정하고 하위 클래스에서 객체 생성에 관한 구체적인 내용을 결정하는 패턴
• 느슨한 결합을 가지면 더 많은 유연성을 가지고 있다
• 유지보수성 증가
• 자바스크립트에서 팩토리 패턴을 구현한다면 newObject()로 구현할 수 있습니다.

 

전략 패턴

• 정책 패턴이라고도 하며, 객체의 행위를 바꾸고 싶은 경우 '직접' 수정하지 않고 '전략'이라고 부르는 캡슐화한 알고리즘'을 컨텍스트 안에서 바꿔주면서 상호 교체가 가능하게 만드는 패턴입니다. 

ex) 어떤 것을 살때 네이버페이, 카카오페이 등 다양한 방법으로 결제하듯이 결제 방식의 '전략'만 바꿔서 두 가지 방식으로 결제하는것

전략패턴을 활용한 라이브러리는 passport => 서비스 내의 회원가입된 아이디와 비번을 기반으로 인증하는 LocalStrategy 전략, OAuth 전략 등을 지원

자바스크립트에서는 passport.use(new LocalStrategy( ... 처럼 매서드에 전략을 매개변수로 넣어서 로직을 수행하는 것

 

옵저버 패턴

• 주체가 어떤 객체의 상태 변화를 관찰하다가 상태변화가 있을 때마다 매서드 등을 통해 옵저버 목록에 있는 옵저버들에게 변화를 알려주는 디자인 패턴

 

주체 : 객체의 상채 변화를 보고 있는 관찰자 
옵저버 : 이 상태의 변화에 따라 전달되는 메서드 등을 기반으로 '추가 변화 사항'이 생기는 객체를 의미

주체와 객체를 따로 두지 않고 상태가 변경되는 객체를 기반으로 구축

=> 트위터

ex) 내가 어떤 사람인 주체를 팔로우 했다면 주체가 포스팅을 올리게 되면 알림이 '팔로워'에게 가게 되는

주로 이벤트 기반 시스템을 사용하며 MVC 패턴에도 사용된다.

주체라고 볼 수 있는 모델에서 변경사항이 생겨 update()메서드로 옵저버인 뷰에 알려주고 이를 기반으로 컨트롤러등이 작동하는 것

 

자바스크립트에서의 옵저버 패턴

• 프록시 객체를 통해 구현 가능
• 프록시 객체: 프록시 객체는 어떠한 대상의 기본적인 동작의 작업을 가로챌 수 있는 객체를 뜻하며, 두개의 매개변수를 가진다

target: 프록시할 대상
handler: target 동작을 가로채로 어떠한 동작을 할 것인지가 설정되어 있는 함수

 

상속과 구현의 차이 

• 상속은 일반 클래스, abstract 클래스를 기반으로 구현하며, 구현은 인터페이스를 기반으로 구현

 

프록시 패턴과 프록시 서버

• 프록시 패턴: 대상 객체에 접근하기 전 그 접근에 대한 흐름을 가로채 해당 접근을 필터링하거나 수정하는 등의 역할을 하는 계층이 있는 디자인 패턴
• 이를 통해 객체의 속성, 변환 등을 보완하며 보안, 데이터검증, 캐싱, 로깅에 사용합니다. 프록시 객체로 쓰이기도 하지만 프록시 서버로도 활용

 

• 프록시 서버: 서버와 클라이언트 사이에서 클라이언트가 자신을 통해 다른 네트워크 서비스에 간접적으로 접속할 수 있게 해주는 컴퓨터 시스템이나 응용 프로그램을 가리킨다.
• 프록시 서버로 쓰는 nginx : 비동기 이벤트 기반의 구조와 다수의 연결을 효과적으로 처리 가능한 웹 서버 주로 node.js 서버 앞단의 프록시 서버로 활용
• 실제 포트를 숨길 수 있고 정적 자원을 gzip 압축하거나 메인 서버 앞단에서의 로깅을 할 수 있다

 

• 버퍼 오버플로우 : 버퍼는 보통 데이터가 저장되는 메모리 공간으로 메모리 공간을 벗어나는 경우를 말함 이때 사용되지 않아야 할 영역에 데이터가 덮어씌워져 주소, 값을 바꾸는 공격이 발생하기도 한다.
• 프록시 서버로 쓰는 cloudFare : 전 세계적으로 분산된 서버가 있고 이를 통해 어떠한 시스템의 콘텐츠 전달을 빠르게 할 수 있는 CDN 서비스 이다 DDOS 공격 방어, HTTPS 구축

CDN: 각 사용자가 인터넷에 접속하는 곳과 가까운 곳에서 콘텐츠를 캐싱 또는 배포하는 서버 네트워크를 말한다 이를 통해 사용자가 웹서버로부터 콘텐츠를 다운로드하는 시간을 줄일 수 있다

 

CORS와 프론트엔드의 프록시 서버:

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

 

이터레이터 패턴

• 이터레이터를 사용하여 컬렉션 요소들에 접근하는 디자인 패턴, 이를 통해 순회할 수 있는 여러가지 자료형의 구조와는 상관없이 이터레이터라는 하나의 인터페이스로 순회가 가능하다

이터레이터 프로토콜 : 이터러블한 객체들을 순회할 때 쓰이는 규칙
이터러블한 객체 : 반복 가능한 객체로 배열을 일반화한 객체

 

• 노출모듈 패턴: 즉시 실행함수를 통해 private, public 같은 접근 제어자를 만드는 패턴, 자바스트립트는 private, public 같은 접근제어자가 존재하지 않고 전역범위에서 스크립트가 실행된다. 그렇기 때문에 노출 모듈 패턴을 통해 접근제어자를 구현하기도 한다.

public: 클래스에 정의된 함수에서 접근 가능하며 자식 클래스와 외부 클래스에서 접근 가능한 범위
protected: 클래스에 정의된 함수에서 접근 가능, 자식 클래스에서 접근 가능하지만 외부 클래스에서 접근 불가능한 범위
private: 클래스에 정의된 함수에서 접근 가능하지만 자식 클래스와 외부클래스에서 접근 불가능한 범위
즉시실행함수: 함수를 정의하자마자 바로 호출하는 함수, 초기화 코드, 라이브러리 내 전역 변수의 충돌 방지 등에 사용한다.

 

MVC 패턴: 모델, 뷰, 컨트롤러로 이루어진 디자인 패턴

• 애플리케이션의 구성요소를 세가지 역할로 구분하여 개발 프로세스에서 각각의 구성요소에만 집중해서 개발할 수 있다. 재사용성과 확장성이 용이하다는 장점이 있고, 애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡해지는 단점

모델 :  애플리케이션의 데이터인 데이터베이스, 상수, 변수를 뜻한다
뷰에서 데이터를 생성하거나 수정하면 컨트롤러를 통해 모델을 생성하거나 갱신한다

뷰 : inputbox, checkbox, textarea등 사용자 인터페이스 요소를 나타낸다. 사용자가 볼 수 있는 화면을 뜻한다
정보를 따로 저장하지 않아야하며, 화면에 표시하는 정보만 가지고 있어야 한다
변경이 일어나면 컨트롤러에 이를 전달해야 한다

컨트롤러: 하나 이상의 모델과 하나 이상의 뷰를 잇는 다리 역할을 하며 이벤트 등 메인 로직을 담당
모델과 뷰의 생명주기도 관리하며 뷰의 변경통지를 받으며 이를 해석하여 각각의 구성 요소에 해당 내용에 대해 알려준다
MVC의 대표적인 대표적인 예로는 리액트, 스프링

 

MVP 패턴 

• MVC 패턴으로부터 파생 되었으며 C에 해당하는 컨트롤러가 프레젠터로 교체된 패턴
• 프레젠터와 뷰는 일대일 관계이기때문에 MVC 패턴보다 더 강한 결합을 결합을 지닌 디자인 패턴이라고 볼 수 있다.

 

MVVM 패턴

• 컨트롤러가 뷰모델로 바뀐 패턴
• 뷰모델은 뷰를 더 추상화한 계층이며, 커맨드와 데이터 바인딩을 가지는것이 특징이다.
• 뷰와 뷰모델 사이의 양방향 데이터 바인딩을 지원하며 UI를 별도의 코드 수정없이 재사용할 수 있고단위 테스팅하기 쉽다는 장점이 있다 MVVM 패턴의 예: 뷰(View.js) 프론트엔트 프레임워크, watch와 computed등으로 쉽게 반응형적인 값을 구축할 수 있다.
• 함수사용하지 않고 값의 대입만으로도 변수가 병경되어 양방향 바인딩, html을 토대로 컴포넌트 구축 가능

커맨드: 여러가지 요소에 대한 처리를 하나의 액션으로 처리할 수 있게 하는 기법이다
데이터 바인딩: 화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법으로 뷰모델을 변경하면 뷰가 변경된다.