Javascript_30_05

안녕하세요!

Derek 입니다! 😄

어제 코로나 확진 환자가 1079명.. 최대수치를 기록했다고 합니다 😢

다들 집콕! 하셔서 무사하셨으면 좋겠어요.🙏

오늘은 Javascript 30 의 5번째 주제를 가지고 포스팅 해보려고 해요!

Day 05 project 는 웹 홈페이지에서 보이는 메뉴판들을 조정하는, 눈에 보여 더욱 재밌었던 주제였던것 같아요.

시작해보겠습니다!

05. Flex Panel Gallery

목표

클릭하여 각각 패널이 확장되도록, 이벤트를 구현해본다.

상단에 gif 파일은 제가 IT 을 클릭했을때, 일어나는 상호작용입니다. 원래 처음 페이지는 아래 그림처럼 구성이 되어있답니다.
이 패널들을 5개씩 클릭하여 확대하고, 이를 다시 누르면,
이런식으로 다시 줄어들게 만들어보았습니다!

그럼 어떤식으로 이벤트를 처리했는지, 정리해볼게요!

Derek 구현 코드

const panels = document.querySelectorAll(".panel");

function toggleOpen(){
  this.classList.toggle('open');
}

function toggleActive(event){
  if(event.propertyName.includes('flex')){
    this.classList.toggle('open-active');
  }
}

panels.forEach(panel => panel.addEventListener("click", toggleOpen));
panels.forEach(panel => panel.addEventListener("transitionend", toggleActive));

사실 javascript 30 에는 HTML, CSS 파일들을 모두 제공받고, .js 파일만 작성하면 되므로, CSS 파일을 잘 살펴보고 하면 많이 어려운 과제는 아니였습니다!

1. addEventListener 함수 적용

panels.forEach(panel => panel.addEventListener("click", toggleOpen));
panels.forEach(panel => panel.addEventListener("transitionend", toggleActive));

panel class를 querySelectorAll 로 긁어모으고, 이를 forEach 문을 통해 모든 panel 에게 addEventListener 함수를 적용시켰습니다.

그럼 각각 toggleOpen 함수와 toggleActive 함수를 살펴볼게요.

2. toggleOpen 함수

function toggleOpen(){
  this.classList.toggle('open');
}

toggle 함수! 이 친구를 정리해보려고 합니다.

MDN 에 따르면, toggle 의 정의는 아래와 같습니다.

The toggle() method of the DOMTokenList interface removes a given token from the list and returns false. If token doesn't exist it's added and the function returns true.

즉, 없으면 추가하고, 있으면 제거한다! 간단히 말해서 이렇게 볼 수 있을것 같아요.

<span class="a b">classList is 'a b'</span>

이렇게 생긴 HTML 파일에서,

let span = document.querySelector("span");
let classes = span.classList;

span.addEventListener('click', function() {
  let result = classes.toggle("c");

  if (result) {
    span.textContent = `'c' added; classList is now "${classes}".`;
  } else {
    span.textContent = `'c' removed; classList is now "${classes}".`;
  }
})

해당 파일을 실행시켜보면,
이런식으로 클릭할때마다 c class가 추가되거나, 제거하는 역할을 하고 있습니다.

따라서, open class를 추가한다면, 제가 패널을 클릭했을때 하단의 css 가 적용됩니다.

.panel.open {
  font-size: 40px;
  flex: 5;
}

이 친구가 적용되어서, font-size 가 확대되고, flex 가 5로, flex-grow 가 5배정도 하게 됩니다. 해당 설명은 MDN flex에 기술되어있어요!

3. toggleActive 함수

이 친구는 transitionend 이벤트에 걸려있는 함수에요.

transitionend 이벤트는 2번째 게시물에서 제가 정리를 한번 했었어요! CSS 전환이 되는 이벤트가 모두 일어나면, 그제서야 비로소 다른 이벤트를 발생시키는 것이 핵심입니다 :)

그럼 일단 toggleActive 함수부터 살펴볼게요.

function toggleActive(event){
  if(event.propertyName.includes('flex')){
    this.classList.toggle('open-active');
  }
}

이 친구는, 2번에 toggle 로 open class를 추가하고, 그 변화가 마치면 일어나는 이벤트입니다.

두 번째 문장의

event.propertyName.includes('flex')

이 구문은, transitionend 가 일어난 event 에 flex 이벤트가 포함되어 있다면~ 이라는 뜻이에요.

즉, flex property가 바뀌고 나서 open-active class 를 toggle 한다는 뜻이에요.

이번 시간 프로젝트는 비교적 간단했어요! 사실 CSS 를 다루는게 아니다보니.. 그런 것 같아요.
CSS 에 대해서 포스팅 하다보면.. 글이 꽤나 길어질 것 같네요 🙄 기회가 되면 CSS 도 정리해서 연재해보도록 할게요.

틀린내용이나 수정할 내용이 있다면 언제든지 피드백 부탁드립니다!
감사합니다!🤗