위 도서를 읽고 정리하여 기술 면접에 대비하는 글입니다.
1장 디자인 패턴과 프로그래밍 패러다임
1.1 디자인 패턴
1.1.1 싱글톤 패턴
1.1.2 팩토리 패턴
1.1.3 전략 패턴
1.1.4 옵저버 패턴
1.1.5 프록시 패턴과 프록시 서버
1.1.6 이터레이터 패턴
1.1.7 노출모듈 패턴
1.1.8 MVC 패턴
1.1.9 MVP 패턴
1.1.10 MVVM 패턴새롭게 알게 된 점
Gof Design Pattern Types
- Creational 생성 패턴
객체의 생성에 관련된 패턴
특정 객체가 생성되어도 프로그램의 구조에 큰 영향을 받지 않는 유연함- 추상 팩토리
- 팩토리
- 빌더
- 프로토타입
- 싱글톤
- Structural 구조 패턴
클래스나 객체를 조합해 더 큰 구조를 만드는 패턴
객체를 묶어 새로운 기능 제공- 어댑터
- 브릿지
- 컴포짓
- 데코레이터
- 파사드
- 플라이웨이트
- 프록시
- Behavioral 행위 패턴
클래스나 객체 간의 알고리즘이나 책임 분배에 관련된 패턴
한 객체가 수행할 수 없는 작업을 어떻게 분배할지,
그 과정에서 어떻게 결합도를 낮게 유지할지를 목표- 책임 체인
- 커맨드
- 인터프리터
- 이터레이터
- 중재자
- 메멘토
- 옵저버
- 상태
- 전략
- 템플릿 메소드
- 방문자
JS proxy Object
41쪽<자바스크립트에서의 옵저버 패턴>-프록시 객체를 이용한 옵저버 패턴
function createReactiveObject(target, callback) {
const proxy = new Proxy(target, {
set(obj, prop, value) {
if (value !== obj[prop]) {
const prev = obj[prop]
obj[prop] = value
callback(`${prop}가 [${prev}] >> [${value}]로 변경되었습니다.`)
}
return true
}
})
return proxy
}
const a = {
"형규": "솔로"
}
const b - createReactiveObject(a, console.log)
b.형규 = "솔로"
b.형규 = "커플"
// '형규가 [솔로] >> [커플]로 변경되었습니다.'- Proxy 객체는 다른 객체에 대해 프록시를 생성하는데, 이는 해당 객체를 중간에 가로채고 기본 작동 작업을 재정의할 수 있다.
- Proxy handler
-get(): target 속성에 접근
-set(): target 속성 값 설정
-has(): in 연산자 사용 가로채기
예상 문제
1. MVC pattern을 간략하게 설명하고, 발생할 수 있는 문제점에 대해 이야기해보세요.
답변
MVC는 Model, View, Controller를 구성요소로 가집니다.
Model은 데이터의 형태를 정의하고 수정하는 역할을,
View는 모델을 UI로 표현하고 사용자의 입력을 받아 Controller에 전달하며,
Controller는 입력받은 이벤트를 애플리케이션 내에 어떻게 처리할지 판단하고 가공하여 Model 또는 View를 조작하는 역할을 합니다.
MVC 패턴은 각 구성요소들끼리 양방향으로 통신하게 되므로 연쇄적인 변화가 발생하여 결국 애플리케이션의 동작 흐름을 분석하거나 예측할 수 없는 문제가 발생할 수 있습니다.
- 출처: 원티드 프리온보딩 프론트엔드 6차 황연욱 멘토님
2. React의 Virtual DOM은 무엇인가요?
답변
실제 DOM은 요소가 바뀔 때마다 새로운 render tree를 생성하여 렌더링 효율이 떨어집니다.
Virtual DOM은 가상으로 UI를 메모리에 저장했다가, 실제 DOM과 동기화하는 프로그래밍 개념 또는 UI 객체를 말합니다.
React에서는 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화되는데,
이런 과정을 재조정(reconciliation)이라 하고, 변화가 일어난 부분만 다시 렌더링하도록 합니다.
Reconciliation은 React에게 원하는 UI 상태를 알려주고 DOM이 해당 상태와 일치하도록 합니다.
이 과정에서 이벤트 처리, 수동 DOM 업데이트를 추상화합니다.
3. CORS는 무엇이고, CORS 에러를 방지하려면 어떻게 해야하나요?
답변
Cross Origin Resource Sharing의 줄임말로, 교차 출처 리소스 공유이며,
브라우저는 동일 출처 정책에 의해 출처가 다른 리소스 요청을 방지하는 HTTP 헤더 기반 메커니즘입니다.
출처가 다르다는 것은 도메인, 하위도메인, 포트, 프로토콜이 다르다는 것을 의미하는데,
CORS에 의해 요청이 차단되지 않으려면 이 네 가지가 모두 동일해야합니다.
또는 프론트엔드에서는 프록시 서버를 만들어 동일한 출처로 만드는 방법도 있습니다.
백엔드에는 express의 cors 미들웨어 라이브러리를 사용하거나,
응답 헤더에 Access-Control-Allow-Origin에 허용하고자 하는 도메인을 세팅하는 방법이 있습니다.
느낀 점
신입에게 과연 디자인 패턴 질문이 나올까?
나는 아니라고 생각한다!
디자인 패턴이 일종의 굳어진 약속이고, 개발 시 소통을 용이하게 만드는 장치로,
중요도는 일반 언어, 프레임워크 작동 방식 및 CS보다 떨어지는 것 같다고 생각한다.
따라서 면접 때는 가볍게 어떤 패턴이 있는지만 대략적으로 알고,
React의 MVC, Vue의 MVVM, Redux의 옵저버 / Flux 패턴만 잘 정리하면 되지 않을까 싶다.
