[JS 포트폴리오 만들기] 선택한 항목만 필터링하기 (애니메이션 효과 적용)

2022.03.22

---

🤔❓ 버튼을 누르면 해당하는 정보가 필터링 되어 조회된다.

오늘부터는 JS를 입혀 조금 더 페이지를 동적으로 만드려 한다.

---

😃❗이렇게 해보자

 

1) 각 필터버튼의 결과값을 가져온다.

(1) data- 를 이용하자

<div class="section__container">
  <div class="work__categories">
    <button class="category__btn active" data-filter="*">All<span class="category__count active">5</span></button>
    <button class="category__btn" data-filter="js">Javascript<span class="category__count">3</span></button>
    <button class="category__btn" data-filter="react">React<span class="category__count">2</span></button>
  </div>
  <div class="work__projects">
    <!-- href: git url -->
    <a href="#" class="project" target="blank" data-filter="js">
    ...
  </section>

버튼에 해당하는 work__catergories의 각 버튼 클래스에 data-filter를 추가한다.
그리고 해당 버튼을 누르면 필터링되는 정보인 work__projects의 각 프로젝트에도 data-filter를 추가한다.

버튼과 각 프로젝트에 추가한 data-filter의 값이 같은 항목끼리 버튼을 누르면 필터링되어 나오도록 만들거다.

//project filtering
const workCategories = document.querySelector('.work__categories');
const workProjects = document.querySelector('.work__projects');
const projects = document.querySelectorAll('.project');

workCategories.addEventListener('click', (event) => {
  const filter = event.target.dataset.filter
  console.log(filter);
})

console.log로 확인해보면 event.target 으로 앞에서 설정한 data-filter의 값을 잘 가져오는 것을 볼 수 있다.

하지만, 프로젝트 개수를 나타나는 동그라미 안에 들어간 버튼을 누르면 undefined가 발생한다.
아마도 버튼 안에 span형태로 정의되어서 해당 버튼에는 값이 적용이 안된 듯 하다. (event가 발생하는 target을 특정하기 때문에 자식노드까지는 이벤트가 적용이 안되는걸까?)

(2) 부모노드의 값을 가져와보자

크롬 개발자 모드에서 확인해보자

이런 경우에는 크롬 개발자모드에 들어가서 undefined가 발생하는 부분에 breakpoint를 걸어두고 local 등에서 어떤 항목들이 적용되어 있는지 확인해본다. 여기서는 현재 event.target이 발생한 버튼(category__count.active)의 부모노드(button.category__btn.active)에 앞에서 filter를 설정해놓았던 클래스가 들어있기 때문에 해당 버튼을 눌렀을 때에는 부모노드로 올라가서 data를 가져오도록 설정하면 될 것 같다.

workCategories.addEventListener('click', (event) => {
  const filter = event.target.dataset.filter || event.target.parentNode.dataset.filter
  console.log(filter);
})

undefined는 조건문에서 false값을 가지니 'or'의 형태로 문법을 만들면 된다. 결과를 보니 잘 나온다.

2) 필터버튼을 누르면 해당값과 일치하는 프로젝트만 조회되도록 만든다.

(1) 필터버튼값과 비교할 프로젝트의 값을 구하기 위해 forEach문을 사용하여 조건을 순회한다.

//project filtering

//모든 프로젝트를 배열로 가져오기 위해 queryselectorall을 사용했다.
const projects = document.querySelectorAll('.project');

workCategories.addEventListener('click', (event) => {
  const filter = event.target.dataset.filter || event.target.parentNode.dataset.filter;

  if (filter == null) {
    return;
  }
  projects.forEach((project) => {
    console.log(project);
  });
});

foreach문을 사용하여 모든 프로젝트를 조회하는지 확인한다.

버튼을 누르면 target으로 지정한 값만 가져오기 위해, 모든 조건들을 조회해서 일치하는 값이 있는지 확인해야 한다.
그러러면 순회를 해야하는데 for문을 사용할 수도 있으나 forEach라는 더 간단한 조건문이 있으니 이를 사용하도록 한다.
출력해보니 잘 나온다.

...
if (filter == null) {
    return;
  }
  projects.forEach((project) => {
    console.log(project.dataset.filter);
    project.dataset.filter == 'js' ? console.log('true') : console.log('false');
  });

반복문들 돌며 나오는 값과, 해당 버튼에 설정되 있는 값이 동일하면 true가 나와야 하니, 테스트를 해본다.
그냥 project만 적으면 위와같이 project에 해당하는 모든 정보가 나오기 때문에 클래스를 특정해줘야할 것 같다.
그래서 dataset.filter라고 구체적으로 값을 지정해주었다.

여기서 드는 의문은, 비교대상이 되는 '상수값(위에서는 'js')'이 고정인데, 만약 그 비교대상이 더 많아지면 중첩 for문을 써야하는걸까?

---

아니다.
내가 뭘 잘못생각하고 있었다.

(1)에서 구했던 것이 필터버튼을 눌렀을 때 나오는 '상수값'이고
(2)에서는 조회대상이 되는 프로젝트들을 반복문으로 돌면서 (1)에서의 값과 비교하도록 만들면 된다.

[js]

workCategories.addEventListener('click', (event) => {

  //필터의 상수값 구하기
  const filter = event.target.dataset.filter || event.target.parentNode.dataset.filter;
  
  //필터버튼의 다른 곳을 눌렀을 때 undefiend가 나오므로 해당 클릭에 대한 이벤트를 없애준다.
  if (filter == null) {
    return;
  }
  
  //각 프로젝트의 값을 조회하기
  projects.forEach((project) => {

	// 필터값이 *이거나, 프로젝트 값과 동일하다면 항목이 모두다 보이도록 만들자
    if (filter === '*' || filter === project.dataset.filter) {
      project.classList.remove('invisible')
    } else {
      project.classList.add('invisible')
    }
  });
});

[css]

.project.invisible {
  display: none;
}

필터버튼을 눌렀을 때, 필터버튼값이 *이거나 해당 값과 프로젝트들의 값을 비교해서 일치하면 보이도록 만들어야 한다.
하지만 기본적으로 모든 프로젝트들이 '보여진'상태이니, 일치하지 않는 항목들에만 invisible 클래스를 넣어서 안보이도록 만들면 된다.

3) 애니메이션을 줘 보자

각 프로젝트 항목이 필터링 될 때, 애니메이션을 줘보도록 하자.

[js]

workCategories.addEventListener('click', (event) => {
...
  //애니메이션은 각 프로젝트를 담고있는 상자에다가 줌
  workProjects.classList.add('anime-out');
...
});

각 프로젝트에 주면 되나 했는데, 프로젝트를 담고있는 상자에다가 주면 한번에 애니메이션이 일어남으로 프로젝트를 담고있는 상자에다가 애니메이션을 주도록 한다.

[css]

.work__projects {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: var(--padding-20);
  opacity: 1;

  transition: all var(--animation-duration) ease-out;
}

.work__projects.anime-out {
  opacity: 0;
  transform: scale(0.96, 0.96) translateY(40px);
}

transition이 일어나는 건 메인 클래스(.work__projects)에 정의해야 해당 박스에 새로운 클래스(.anime-out)가 추가되며 변환될 때 애니메이션이 일어나게 된다.

애니메이션은 사라지면서 상자가 아래로 작아지도록 만들었다.

(1) 애니메이션을 적용했더니 상자가 사라져버렸다?

그런데 위 애니메이션을 적용해보면 상자가 사라진상태로 계속 존재한다.
왜냐하면 opacity가 0인 상태로 계속 적용되어있는 상태이기 때문이다.

그래서 애니메이션이 발생하고 일정시간 뒤에 해당 애니메이션을 종료해주는 명령을 해줘야 한다.

(2) setTimeout()

workCategories.addEventListener('click', (event) => {
...
  setTimeout(() => {
    workProjects.classList.remove('anime-out');
  }, 300);
...
});

300ms 후에 workprojects 안의 anime-out클래스를 제거해줘.라는 명령이다.
이렇게 적용하게 되면 보이는 것처럼 애니메이션이 적용된 후에 다시 상자들이 보이는 것을 볼 수 있다.

하지만, 애니메이션을 보면 이미 '필터링이 된 후에 애니메이션이 적용'되는 것을 볼 수 있다.
애니메이션이 의미가 있으려면 애니메이션이 적용 되면서 필터링이 되어야 하기에 방법을 다시 바꿔본다.
(즉, 지금은 필터링이 되고 -> 아래로 사라지면서 다시 올라오는 애니메이션이 적용되어있지만
아래로 사라지면서 다시 올라올 때 -> 필터링이 되도록 애니메이션을 바꾸겠다는 것이다.)

현재 이런 현상이 발생하는 이유를 살펴보자.
작성한 코드를 살펴보면
1. 애니메이션이 적용된다.
2. 선택한 항목이 필터링이 된다.
3. 애니메이션을 300ms 후에 제거한다.

현재 js는 defer하게 작동하도록 설정했기때문에, 모든 요소들이 동기적으로 발생하여 브라우저에 업데이트 된다.
즉, 1,2,3번 코드가 실행 할 준비를 동시에 한 후에, 대기를 했다가 브라우저에서 정보를 읽어오는 일이 모두 끝나면 그 때 실행된다.
단지 1,2번은 동시에 실행되고 3번은 300ms후에 실행되는 것이다.

그렇기 때문에 1번이 먼저 적용되고 2,3번이 나중에 실행되게 하기 위해서는 2번과 3번을 하나로 묶어주면 된다.
(1번이 먼저 적용되어야 하는 이유는 '아래로 사라지는 효과'를 적용 한 후에 -> '해당 효과를 없애면서 필터링 항목을 보여주고 싶기 때문'이다.)

하나로 묶어주기 위해서 3번 settimeout 함수 안에 2번 코드블럭을 넣으면 된다.

workCategories.addEventListener('click', (event) => {
  ...
  
  //애니메이션은 각 프로젝트를 담고있는 상자에다가 줌
  workProjects.classList.add('anime-out');

  setTimeout(() => {
  
  	//프로젝트 필터링 코드를 settimeout함수 안에 넣었다.
    projects.forEach((project) => {

      if (filter === '*' || filter === project.dataset.filter) {
        project.classList.remove('invisible')
      } else {
        project.classList.add('invisible')
      }
      
    workProjects.classList.remove('anime-out');
    });
    
  }, 300);
});

그러면 이렇게 상자가 아래로 사라지고 '올라오면서 필터링 되는' 애니메이션이 탄생한다.

오늘은 뭔가 js의 동기적처리에 대한 개념을 실제로 코드를 통해 확인해본 것 같아서 이해가 더 잘 된 것 같다.
점점 새로운 함수들이 나와서 재밌다.

---

eunne's github: https://github.com/eunne/Project_Portfolio.git