221012 Mittwoch - 이벤트버블링 역이용/dataset

어제는 이벤트 버블링에 의해
모달창의 검은배경이 아닌 다른 어느 부분을 눌러도 모달창이 닫히는 문제를 
해결하는 방법에 대해 공부하였다. 
 

for (let i=0; i < $('.tab-button').length; i++) {
    $('.tab-button').on('click',function(){
        $('.tab-button').removeClass('orange')
        $('.tab-button').eq(i).addClass('show')
        $('.tab-content').removeClass('orange')
        $('.tab-content').eq(i).addClass('show')
    })
}

[JavaScript] 이벤트버블링

 
오늘은 이벤트 버블링을 역이용해
이벤트리스너의 불필요한 사용을 막는 방법을 배웠다.
 
 
 
그 전에 먼저 함수로 축약하여 코드를 정리하였다. 

for (let i=0; i < $('.tab-button').length; i++) {
    $('.tab-button')[i].on('click',function(){
        openTab(i) // 아래에 함수로 뺌
    })
}
function openTab(pick){
    $('.tab-button').removeClass('orange');
    $('.tab-button').eq(pick).addClass('orange');
	$('.tab-content').removeClass('show');
    $('.tab-content').eq(pick).addClass('show');
}

효과: 코드 재사용에 용이함, 알아보기 쉬움
 
 
 
위 코드의 경우 탭버튼 3개를 누르는 데 있어
for문을 이용하 eventListener가 총 세 번 사용된다. 

addEventListener는 램 용량을 잡아먹기 때문에 그것의 사용을 최소화 할수록 성능을 개선하는 데 도움이 된다. 

 
 
탭버튼 구현을 위한 html을 살펴보면

<ul class="list">
	<li class="tab-button">Products</li>
	<li class="tab-button orange">Information</li>
	<li class="tab-button">Shipping</li>
</ul>

각 'tab-button'의 상위 클래스로 'list'가 있음을 알 수 있다.
즉 하나의 탭버튼만 눌렀어도, 이벤트 버블링에 의해 'list' 클래스는 동시에 눌렸음을 알 수 있다. 
이를 이용해 'list' 클래스에 대한 하나의 eventListener로 코드를 업데이트하면 다음과 같다. 
 
 

$('.list').on('click', function(e){
	// 지금 누른 게 탭버튼0이면 탭버튼0에 orange 클래스를 추가, 탭콘텐츠0에 show 클래스를 추가
	if (e.target == $('.tab-button')[0]) {    
		openTab(0)
	} else if (e.target == $('.tab-button')[1]) {
		openTab(1)
	} else {
		openTab(2)
	}
});
function openTab(pick){
    $('.tab-button').removeClass('orange');
    $('.tab-button').eq(pick).addClass('orange');
	$('.tab-content').removeClass('show');
    $('.tab-content').eq(pick).addClass('show');
}

 
 
 
 
그러나!!
성능은 개선되었으나! 전체적인 코드의 길이가 짧아지지 않았다는 아쉬움이 남는다.
이때 dataset 이라는 것을 사용할 수 있다. 
 

dataset
: 일반 유저 몰래 html 안에 정보를 숨겨놓을 수 있는 문법
<div data-데이터이름="값"></div>

 
id라는 이름으로 "0"/'1"/"2"인 데이터를 심은 html은 다음과 같다. 

<ul class="list">
	<li class="tab-button" data-id="0">Products</li>
	<li class="tab-button orange" data-id="1">Information</li>
	<li class="tab-button" data-id="2">Shipping</li>
</ul>

 
이렇게 몰래 보관한 데이터를 출력하는 방법은

셀렉터.dataset.데이터이름

 
 
결국 원하는 기능은 openTap()이므로
클릭한 클래스에 내가 지정한 dataset과 클래스의 인덱스가 일치한다면 
단 한 줄로 완성된다!

$('.list').on('click', function(e){ 
	//탭버튼1 누르면 탭콘텐츠1이 열려야 함
	openTab(e.target.dataset.id) 
	//지금 누른 것이 몰래 갖는 dataset과 클래스의 인덱스가 일치하도록
}
function openTab(pick){
    $('.tab-button').removeClass('orange');
    $('.tab-button').eq(pick).addClass('orange');
	$('.tab-content').removeClass('show');
    $('.tab-content').eq(pick).addClass('show');
}

dataset의 값이 숫자가 아닐 경우를 대비하여
parseInt(e.target.dataset.id) 자체를 넣는 것도 좋은 방법이 될 것 같다. 
 
 
 
 
 

---

오늘은 Interaction Engineering 수업의 OT를 다녀왔다.
machine과 humand의 interaction을 구현한다니
재밌게 들을 수 있는 실기형 수업을 기대하였다.
 
그런데 매주 과학 논문을 summary 해야 하고
내가 가진 기술력으로 뭘 할 수 있을지 감이 전혀 오지 않아서
이 수업에 대한 확신이 서지 않는다.
 
솔직히 굳이 스트레스 받고 싶지 않기도 하고
내가 지금 당장 하고 있는 공부와도 노선이 달라 선택과 집중에 또 실패하게 될까 두렵기도 하다.
동시에,
독일에 있는 동안 여기서만 배울 수 있는 것을 놓치는 것 같아 아쉽고
영어로 된 논문읽기부터 소통, 프로젝트까지 많은 걸 배울 수 있을 것 같아 궁금하다.
 
 
 
내가 지금 당장 하고 싶은 공부는 웹개발이긴 하지만
독일에 있으면서 이렇게 혼자 공부하는 게 이곳에서의 시간을 현명하게 보내는 건지
매일같이 의심하고 있다.
선택과 집중....
집중은 내가 할테니 누가 의심할 여지 없이 선택해주면 얼마나 인생이 편할까 싶다...
 
 

오늘 공부한 건 위가 다다.
진도를 많이 나가진 못했지만 github에 새로운 repository를 만들어 그동안의 JS공부기록을 진도별로 업로드했다. 
(뿌듯)
매일의 공부기록을 블로그에 이렇게 남기는 것도
처음엔 너무 어려웠는데,
점점 내 글로 풀어쓰는 과정을 통해 한 번이라도 더 고민하는 과정의 소중함을 느끼는 중이다.
 
 
벌써 두 시 반
Guten Nacht~!~!