[TIL] 190801

오늘 한 일

• 프론트엔드 개발자를 위한 자바스크립트 프로그래밍 노랭이 책 8장 [브라우저 객체 모델] 완독.
• 인프런 [Vue.js 완벽 가이드] 강의 이벤트 버스와 하이 오더 컴포넌트에 대해 공부.

공부 내용

BOM

• 브라우저 객체 모델(BOM)은 브라우저 제조사에서 제공하는 브라우저 관련 기능을 모아놓은 객체 집합이다.
• window객체는 ECMAScript의 전역(Global) 객체로, 전역에 정의하는 모든 변수 및 함수는 window객체의 프로퍼티가 된다.
• ECMAScript에서 제공하는 네이티브 생성자 및 함수는 처음부터 window객체에 존재한다.
• window.open()을 통해 새로운 창이나 탭을 열면 opener프로퍼티를 이용해 새 창을 호출한 페이지를 참조 할 수 있다.
• location 객체를 이용해 URL의 일부나 전체를 변경 가능하다.
• replace() 메서드는 URL을 이동하는 동시에 현재창을 덮어씌워서 히스토리에 현재 페이지가 남지 않는다.
• navigator 객체를 통해 브라우저에 관한 정보를 얻을 수 있다. 제공하는 타입이 브라우저마다 다르긴 하지만 userAgent 같은 공통 프로퍼티도 존재한다.
• screen 객체는 클라이언트 화면에 관한 정보를 제공하고 history 객체는 브라우저 페이지 히스토리를 보여준다.

이벤트 버스

• 이벤트 버스란, 관계 없는 컴포넌트끼리 데이터를 주고받을 수 있는 방법이다.
• 원래 Vue의 모든 컴포넌트는 부모가 자식에게만 데이터를 전달 할 수 있는데, 이벤트 버스라는 빈 Vue 객체를 만들어서 그 객체를 통해 서로 이벤트를 발생(?)시켜서 통신할 수 있다.
• const bus = new Vue(); 이렇게 빈 버스 객체를 만들어준 뒤, bus.$emit(), bus.$on(), bus.$off() 이렇게 이벤트를 추가해 준다.
• 데이터 보내는 컴포넌트에서 bus.$emit('이벤트명', 데이터); 으로 이벤트를 호출 및 데이터 전송
• 데이터 받는 컴포넌트에서 bus.$on('이벤트명', function(데이터){}); 으로 데이터 수신 및 후처리.
• 주의할 점은 이벤트 버스는 addEventListener와 같은 역할을 하기 때문에 이벤트 해제 해주지 않으면 이벤트 객체가 계속 쌓인다.
• 따라서 컴포넌트 종료 훅인 beforeDestroy와 같은 시점에 bus.off('이벤트명', $on에서 추가해준 후처리 함수.

HOC(하이 오더 컴포넌트) 그리고 Mixins

• 하이 오더 컴포넌트란 컴포넌트 코드를 재사용 가능하게 해주는 기능이다.
• 재사용할 컴포넌트 옵션들을 묶어서 함수로 정의한다.
• 해당 함수 내에서 render()를 이용해 새로운 컴포넌트를 하나 만들면서 리턴해준다. (아래와 같이)

//재사용할 컴포넌트 옵션들을 정의한 함수 내에 삽입.
render(createElement) {
	return createElement(ListView);
}

• HOC의 장점은 하나의 함수로 여러 컴포넌트를 만들 수 있어서 코드가 단축되고 컴포넌트 파일 마저도 줄일 수 있다.
• 그러나 단점은 depth가 한 단계 더 깊어지기 때문에 나중에 골치아파질 수 있다.
• 이에 비해 Mixins는 재사용할 옵션들을 묶은 파일 하나를 이용해 재사용할 컴포넌트들의 mixins 속성에 넣어주기만 하면 된다.
• 따라서 depth는 추가되지 않지만 컴포넌트 파일들은 그대로 유지해야한다. (옵션 코드만 줄이기 가능.)
• 둘 다 장단점이 있기에 선택은 자유.