[project] 웹 포트폴리오_JS_디버깅

HTML

<div class="work__categories">
          <button class="category__btn" data-filter="*">
            All<span class="category__count">3</span>
          </button>
          <button class="category__btn" data-filter="static">
            Static(HTML/CSS)<span class="category__count">2</span>
          </button>
          <button class="category__btn" data-filter="dynamic">
            Dynamic(JavaScript)<span class="category__count">1</span>
          </button>
          <button class="category__btn" data-filter="react">
            React<span class="category__count">0</span>
          </button>
        </div>

        <div class="work__projects">
          <a href="https://dev-jn-first-portfolio.netlify.app/"
            class="project"
            target="blank"
            data-type="dynamic"
          >
            <img
              src="imgs/project_numbers-remove.png "
              alt="Number game"
              class="project__img"
            />
            <div class="project__description">
              <h3>Random Number Game</h3>
              <span>build using JS</span>
            </div>
          </a>

          <a href="https://portfolio4-hopper.yenachoi1.repl.co/"
            class="project"
            target="blank"
            data-type="static"
          >
            <img
              src="imgs/project_hopper-remove.png "
              alt="Hopper"
              class="project__img"
            />
            <div class="project__description">
              <h3>Hopper website</h3>
              <span>static website build using bootstrap</span>
            </div>
          </a>

          <a href="https://portfolio3-Louis-Vuitton.yenachoi1.repl.co"
            class="project"
            target="blank"
            data-type="static"
          >
            <img
              src="imgs/project_LV-remove.png"
              alt="Luis Vuitton"
              class="project__img"
            />
            <div class="project__description">
              <h3>Luis Vuitton clone coding</h3>
              <span>static website clone coding using bootstrap</span>
            </div>
          </a>
        </div>

HTML에서 data-filter와 data-type을 지정하고, 각 카테고리 버튼을 클릭했을 때, 필터링을 통해 항목에 맞는 project를 가져오는 코드를 만든다. 이때, 카테고리 버튼에 커서를 hover하면 넘버링이 뜨게 만드는 것이 목표다.

 

JS

const workBtnCotainer = document.querySelector('.work__categories');
const projectContainer = document.querySelector('.work__projects');
const projects = document.querySelectorAll('.project');
workBtnCotainer.addEventListener('click', (e) => {
    const filter = e.target.dataset.filter;
    console.log(filter);

 

 

 

그런데... a 테그에 data-type을 지정해주고 넘버링을 클릭하면 콘솔창에 undefined로 뜬다..!

해당 문제를 해결하려면 debugging tool을 사용하여 어디서 문제가 발생하는지 알아본다. 

 

개발자 도구 > source > 문제 발생지점에 브레이크 포인트를 걸어주고, 코드를 쭉 훓어 본다.

문제지점을 찾기 어려울때는 whatch 항목에 문제가 될만한 포인트를 찾아본다.

 

이 경우에는, <span> tag의 parentNode가 <a> tag가 아닌 <button> tag로 지정되어 있었다.

 

 

문제를 찾은 후 다시 JS로 돌아와서, if not 조건을 걸어준다.

const filter = e.target.dataset.filter **|| e.target.parentNode.dataset.filter**;

 

그리고 다시 콘솔창으로 돌아가 확인하면 filter 값이 잘 찍히는 것을 확인할 수 있다!