자바스크립트) navbar menu의 item을 클릭하면 해당 item 페이지로 스크롤하게 만들기, 문자열을 인자로 만들어 함수를 받게 만드는 querySelector의 개념 다시 정리

// Handle scrolling when tapping on the navbar menu

const navbarMenu = document.querySelector('.navbar__menu');
navbarMenu.addEventListener('click', (event) => {

    const target = event.target;
    const link = target.dataset.link;

    if(link == null){ //null은 undefined도 포함한다.
        return;
    }

    const scrollTo = document.querySelector(link);
    scrollTo.scrollIntoView({behavior: 'smooth'});

})

 const navbarMenu = document.querySelector('.navbar__menu');

navbarMenu를 정의 = html에서 navbar__menu 클래스를 가져온다.

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

        const target = event.target;
        const link = target.dataset.link;
        

navbarMenu에 addEventListener을 적용한다.
'클릭'을 했을 때, 그 event값을 'event'라고 정의하고, 화살표 함수를 사용해 아래와 같은 값을 실행시킨다.
{
target을 정의 = event의 target(이벤트가 일어날 객체)
link를 정의 = target의 dataset의 link값(즉, html에서 data-link="#about" 처럼
각 엘리먼트의 버튼마다 그 버튼을 의미하는 섹션의 id값을 link로 지정해뒀었다.
따라서 link상수는 navbarMenu에서 클릭한 엘리먼트의 경로의 data-link값인 것이다.

event.target의 더 많은 정보들

 if(link == null){ //null은 undefined도 포함한다.
                return;
            }

만약 link상수가 null or undefined라면 아무것도 실행 하지 않는다. (return)

const scrollTo = document.querySelector(link);
        scrollTo.scrollIntoView({behavior: 'smooth'});

    })

현재 'link'는 문자열이다.
콘솔창에 출력하면 #home과 같은 내가 지정했었던 엘리먼트의 경로의 data-link값이 출력된다.
따라서 이 link가 함수를 받기 위해서는 따로 querySelector를 사용해 인자로 만들어줘야 받을 수 있다.
즉, scrollTo라는 상수를 만들어 link를 scrollTo라는 인자로 만든다.
그리고 그 인자에 scrollIntoView라는 API를 적용시키고, 움직임을 부드럽게 만들어준다!

querySeletor는 문자열을 인자로 받는 함수다.
따라서 link는 현재 #home과 같은 하나의 문자열에 불과하다.
따라서 querySeletor를 사용해서 scrollTo라는 상수에 link를 대입시켜 link를
인자로 만들어 준 것이다.
그리고 인자가 되었으니 이제 scrollIntoView를 사용할 수 있게 되었다.