자바스크립트 시작, 노마드코더 강의 다 보고와서 어려움없이 이해 다 되는듯, 오늘 배운 navbar 복기

'use strict';

// Make navbar transparent when it is on the top

const navbar = document.querySelector('#navbar');
const navbarHeight = navbar.getBoundingClientRect().height;

document.addEventListener('scroll', () => {
	if(window.scrollY > navbarHeight){
    	navbar.classList.add('navbar--dark');
	} else {
   	navbar.classList.remove('navbar--dark'); 
	}
});	

'use strict';

*strict mode (엄격 모드)

strict mode는 흔히 발생하는 코딩 실수를 잡아내서 예외를 발생시킨다.
상대적으로 안전하지 않은 액션이 발생하는 것을 방지하거나 그럴 때 예외를 발생시켜준다.
혼란스럽거나 제대로 고려되지 않은 기능들을 비활성화시킨다.

결론적으로, 모던하게 javscript 코드를 작성하고 싶다면 'use strict'를 사용하도록 하자.

// Make navbar transparent when it is on the top

const navbar = document.querySelector('#navbar');

navbar을 정의 = querySelector을 사용해 html안에 있는 #navbar을 지정한다.

const navbarHeight = navbar.getBoundingClientRect().height;

navbarHeight를 정의 = navbar함수에 getBoundingClientRect를 실행 후 height값을 지정한다.

*getBoundingClientRect란, 
element의 최종 모습(뷰포트에서의 모습)을 기준으로 위치정보를 제공해주는 API이다.

document.addEventListener('scroll', () => {
if(window.scrollY > navbarHeight){
navbar.classList.add('navbar--dark');
} else {
navbar.classList.remove('navbar--dark');
}
});

addEventListener을 사용해 scroll을 했을때 화살표함수를 사용하여 아무 값도 출력하지 않고,

만약 윈도우에서 스크롤 한 값이 navbarHeight보다 크다면
navbar에 'navbar--dark'라는 클래스를 추가시킨다.

만약 그렇지 않다면,
navbar에 'navbar--dark'클래스를 제거시킨다.


*navbar--dark는 css에서 navbar의 background-color을 추가시키는 클래스이고,
이렇게 해서 정확히 뷰포트에서 스크롤을 navbar의 높이만큼 했냐 안했냐에 따라
navbar의 배경색을 추가시키거나 제거시킬 수 있게 되었다.