Javascript filtering

HINT! 각각의 카테고리와 프로젝트에 data-* 를 넣어줘서 클릭할 때마다 class를 추가해 어떤 프로젝트를 노출시킬지 정해준다!

기억하고 싶은 코드

category.addEventListener('click', (e) => {
  projects.forEach((project) => {
    if (
      e.target.dataset.filter == 'All' ||
      e.target.dataset.filter == project.dataset.type
    ) {
      project.classList.remove('hide');
    } else {
      project.classList.add('hide');
    }
  });
});

document.querySelectorAll

지정된 셀렉터 그룹의 리스트를 받아온다! 내 프로젝트에서는 각각의 프로젝트 리스트를 받아오는 것!

foreach문

• for문을 좀 더 간결하게 사용할 수 있다. forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행

  https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach 참고

• for / foreach

const items = ['item1', 'item2', 'item3'];
const copy = [];


//for
for(let i=0; i<items.length;i++) {
  copy.push(items[i]);

//foreach
items.foreach(item =>{
  copy.push(item)
});

각각의 요소들에 대한 조건문을 실행시킬때 편하게 사용할 수 있을 것 같다!!

display : none 과 visibility : hidden 차이점

둘 중 뭘 써야할까??

display :none

• 아예 사라져버린다! 레이아웃상에서도 사라져 다른 요소들에 영향을 주지 않는다!

visibility : hidden

• 그냥 우리 눈에만 안보이는 것! 레이아웃 상에서는 존재한다! width,height를 줬다면 그만큼 공간을 차지하고 있는 것.

여기서는 클릭할 때 마다 레이아웃도 변화해야 하기에 display : none을 써줘야 한다!