이터레이터(iterator)를 사용하여 컬렉션의 요소에 접근하는 디자인 패턴
순회 가능한 여러 가지 자료형의 구조와 상관없이 이터레이터라는 하나의 인터페이스로 순회할 수 있음
const mp = new Map();
mp.set('a', 1);
mp.set('b', 2);
mp.set('cccc', 3);
const st = new Set();
st.add(1);
st.add(2);
st.add(3);
const a = [];
for (let i = 0; i < 10; i++) a.push(i);
for (let aa of a) console.log(aa);
for (let a of mp) console.log(a);
for (let a of st) console.log(a);
/*
a, b, c
[ 'a', 1 ]
[ 'b', 2 ]
[ 'c', 3 ]
1
2
3
*/
다른 자료 구조인 set, map → 같은 for a of b 의 이터레이터 프로토콜을 통해 순회 가능
*이터레이터 프로토콜 : 이터러블한 객체들을 순회할 때 쓰이는 규칙
*이터러블한 객체 : 반복 가능한 객체로 배열을 일반화한 객체
즉시 실행 함수를 통해 private, public 같은 접근 제어자를 만드는 패턴
자바스크립트는 전역 범위에서 스크립트가 실행 → 노출모듈 패턴을 통해 private, public 접근 제어자 구현
노출모듈 패턴 원리 기반의 자바스크립트 모듈 방식으로는 CJS(CommonJS) 모듈 방식이 있다.
const pukuba = (() => {
const a = 1;
const b = () => 2;
const public = {
c: 2,
d: () => 3,
};
return public;
})();
console.log(pukuba);
console.log(pukuba.a);
// { c: 2, d: [Function: d] }
// undefined
MVC 패턴은 모델(Model), 뷰(View), 컨트롤러(Controller)로 이루어진 디자인 패턴
애플리케이션의 구성 요소를 세 가지 역할로 구분하여 개발 프로세스에서 각각의 구성 요소에만 집중해서 개발할 수 있다.
장점 - 재사용성과 확장성이 용이
단점 - 애플리케이션이 복잡해질수록 모델과 뷰의 관계가 복잡
MVC 패턴을 이용한 대표적인 라이브러리 → React.js
가상 DOM을 통해 실제 DOM을 조작하는 것을 추상화하여 성능 개선함
불변성(immutable)
단방향 바인딩의 적용과, 높은 자유도로 메타(페이스북)가 운영하고 있으며 넷플릭스, 트위터, 드롭박스, 우버, 페이팔, 마이크로소프트 등에서 사용하는 인기있는 FE 라이브러리이다.
MVP 패턴은 MVC 패턴으로부터 파생되었으며 MVC에서 C에 해당하는 컨트롤러가 프레젠터(presenter)로 교체된 패턴
뷰와 프레젠터는 일대일 관계이기 때문에 MVC 패턴보다 더 강한 결합을 지닌 디자인 패턴이다.
MVVM 패턴은 MVC의 C에 해당하는 컨트롤러가 뷰모델(view model)로 바뀐 패턴
뷰모델 - 뷰를 더 추상화한 계층
MVC 패턴과는 다르게 커맨드와 데이터 바인딩을 가지는 것이 특징이다.
장점
MVVM 패턴을 이용한 대표적인 프레임워크 → Vue.js
반응형(reactivity)이 특징인 프런트엔드 프레임워크
재사용 가능한 컴포넌트 기반으로 UI를 구축할 수 있으며 BMW, 구글, 루이비통 등에서 사용한다.
*커맨드 : 여러 가지 요소에 대한 처리를 하나의 액션으로 처리 가능하게 하는 기법
*데이터 바인딩 : 화면에 보이는 데이터와 웹 브라우저의 메모리 데이터를 일치시키는 기법으로, 뷰모델을 변경하면 뷰가 변경
면접을 위한 CS 전공지식 노트 - 주홍철