디자인 패턴(design pattern)이란?
소프트웨어 설계에서 공통으로 발생하는 문제에 대해 객체 간 상호관계 등을 통해 해결할 수 있도록, 자주 쓰이는 설계 방법을 정리한 것이다.
왜 사용하는가?
디자인 패턴을 고려해 개발할 경우 개발의 효율성과 유지보수성이 높아지고 프로그램의 최적화에 도움이 된다.
디자인 패턴
Singletone Pattern?
- 하나의 클래스에 하나의 인스턴스를 가지는 패턴
- 하나의 인스턴스를 여러 모듈에서 공유하기 때문에 생성 비용이 줄지만 독립적인 인스턴스를 만들기 어려워 의존성과 결합성이 높아짐
의존성 주입을 통해 간접적 의존
상위 모듈과 하위 모듈 모두 추상화에 의존해야 하며 이를 통해 테스팅과 마이그레이션 용이하다는 장점이 있다.
Observer Pattern?
- 옵저버들의 목록을 객체에 등록하여 상태 변화가 있을 때마다 메서드 등을 통해 객체가 직접 목록의 각 옵저버에게 통지
- 분산 이벤트 핸들링 시스템을 구현하는 데 사용
js proxy object
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 연산자 사용 가로채기
ex) vue.js ref
Proxy pattern?
- 대상 객체(subject)에 접근하기 전 그 접근에 대한 흐름을 가로채 대상 객체 앞단의 인터페이스 역할을 패턴
프록시 서버에서의 캐싱
캐시 안에 정보를 담아두고, 캐시 안에 있는 정보를 요구하는 요청에 대해 다시 저 멀리 있는 원격 서버에 요청하지 않고, 캐시 안에 있는 데이터를 활용하는 것을 말한다. 이를 통해 불필요하게 외부와 연결하지 않기 때문에 트래픽을 줄일 수 있는 장점이 있다.
ex) nginx
MVC, MVP, MVVM Pattern?
MVC 단점
어플리케이션이 복잡해 진다면 이런 데이터 흐름은 새로운 기능이 추가 될 때에 시스템의 복잡도를 증가 시키고, 예측 불가능한 코드를 만들게 된다.
- Flux의 가장 큰 특징은 단방향 데이터 흐름
- 데이터 흐름은 항상 Dispatcher에서 Store로, Store에서 View로, View는 Action을 통해 다시 Dispatcher
- 데이터의 변화에 대한 예측이 쉬움
React의 Virtual DOM은 무엇인가요?
답변
실제 DOM은 요소가 바뀔 때마다 새로운 render tree를 생성하여 렌더링 효율이 떨어집니다. Virtual DOM은 가상으로 UI를 메모리에 저장했다가, 실제 DOM과 동기화하는 프로그래밍 개념 또는 UI 객체를 말합니다. React에서는 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화되는데, 이런 과정을 재조정(reconciliation)이라 하고, 변화가 일어난 부분만 다시 렌더링하도록 합니다. Reconciliation은 React에게 원하는 UI 상태를 알려주고 DOM이 해당 상태와 일치하도록 합니다. 이 과정에서 이벤트 처리, 수동 DOM 업데이트를 추상화합니다.
