최적화 상태를 위한 리펙토링
BEFORE : 매 반복문마다 DOM을 생성하고 삽입하는 로직을 갖고있다. DOM을 직접 수정하기 때문에 매번 렌더링을 새로하기 위한 돔트리생성과 스타일 계산이 발생하고 있을 것이다.
makeHotDealTpl() {
this.slideArea = _.$('.hot_deal_list');
for (let i = 0; i < this.titleArr.length; i++) {
if (i % 5 === 0) {
this.slideLi = document.createElement('ul');
this.slideLi.className = 'panel';
}
//...
this.slideLi.insertAdjacentElement('beforeEnd', slideDiv);
if (this.slideLi.children.length === 5)
this.slideArea.insertAdjacentElement('beforeEnd', this.slideLi);
}
}
AFTER: 템플릿 리터럴을 활용해서 돔에는 마지막에 삽입만 시키는 방법으로 노드들을 모아 한번만 DOM에 추가하는 방법으로 스타일을 계산하는 비용을 줄였다.
makeHotDealTpl() {
let carouseolTpl = '';
for (let i = 0; i < this.titleArr.length; i++) {
if (i % NUMBER_TO_SHOW === 0) {
carouseolTpl += `<ul class='panel'>`;
}
//...
if (i % NUMBER_TO_SHOW === NUMBER_TO_SHOW - 1) {
carouseolTpl += `</ul>`;
}
}
this.slideArea.insertAdjacentHTML('afterbegin', carouseolTpl);
}