강의 출처 : The Complete JavaScript Course 2022 Jonas (Udemy)

Building a Slider Component

slider Component 흔한 로직
1. 슬라이드들을 평행한 위치로 옮겨 놓는다. index와 transform를 이용하라!
2. 왼쪽, 오른쪽 버튼을 클릭하면 그에 맞게 슬라이드 옮기는 구조. (transform)
3. 현재 슬라이드를 정하기 위해 글로벌변수로 let curSlide = 0 설정해줄 것! event에서 curSlide++ 또는 curSlide-- 를 함으로써 curSlide 값을 바꾸고자. 이 값은 transform할때도 이용 가능!
ex) slides.forEach((s, i) => (s.style.transform = translateX(${100 * (i - slide)}%))
);
4. 재사용한 코드들은 반드시 함수로 만들어주어 refactoring 해줄 것!
5. 초기에 바로 실행해야하는 함수들은 따로 init함수를 만들어주거 한번에 담아주자!
++ 로직을 짤 때 각 element들의 index와 dataset의 번호를 같게하여 이를 잘 활용하자
ex) 해당 slide마다 활성화되어야 하는 버튼의 각각의 dataset의 slide를 실제 slide들의 index 번호로 하기 const btn1 = document.querySelector(.btn[data-slide= '1')

// Slider
const slider = function () {
  const slides = document.querySelectorAll('.slide');
  const btnLeft = document.querySelector('.slider__btn--left');
  const btnRight = document.querySelector('.slider__btn--right');
  const dotContainer = document.querySelector('.dots');

  let curSlide = 0;
  const maxSlide = slides.length;

  // const slider = document.querySelector('.slider');
  // slider.style.transform = 'scale(0.2) translate(-800px)';
  // slider.style.overflow = 'visible';

  //0%, 100%, 200%, 300%

  //Functions
  // 각 slide마다 dot 만들기
  const createDots = function () {
    slides.forEach(function (_, i) {
      dotContainer.insertAdjacentHTML(
        'beforeend',
        `<button class="dots__dot" data-slide="${i}"></button>`
      );
    });
  };

  const activateDot = function (slide) {
    document
      .querySelectorAll('.dots__dot')
      .forEach(dot => dot.classList.remove('dots__dot--active'));
    document
      .querySelector(`.dots__dot[data-slide="${slide}"]`)
      .classList.add('dots__dot--active');
  };

  const goToSlide = function (slide) {
    slides.forEach(
      (s, i) => (s.style.transform = `translateX(${100 * (i - slide)}%)`)
    );
  };

  // Next slide
  const nextSlide = function () {
    if (curSlide === maxSlide - 1) {
      curSlide = 0;
    } else {
      curSlide++;
    }
    goToSlide(curSlide);
    activateDot(curSlide);
  };

  const prevSlide = function () {
    if (curSlide === 0) {
      curSlide = maxSlide - 1;
    } else {
      curSlide--;
    }
    goToSlide(curSlide);
    activateDot(curSlide);
  };
  const init = function () {
    createDots();
    activateDot(0);
    goToSlide(0);
  };
  init();
  //Event handlers
  btnRight.addEventListener('click', nextSlide);
  btnLeft.addEventListener('click', prevSlide);

  document.addEventListener('keydown', function (e) {
    e.key === 'ArrowLeft' && prevSlide();
    e.key === 'ArrowRight' && nextSlide();
  });

  dotContainer.addEventListener('click', function (e) {
    if (e.target.classList.contains('dots__dot')) {
      const { slide } = e.target.dataset; // const slide = e.target.dataset.slide
      goToSlide(slide);
      activateDot(slide);
    }
  });
};
slider();

Lifecycle DOM Events

HTML 페이지에서 lifecycle은 세가지의 중요한 이벤트를 가지고 있다.
DOMContentLoaded, load, beforeunload/unload

document.addEventListener('DOMContentLoaded', function (e) {
   console.log('HTML parsed and DOM tree built!');
 });
 // script을 html 뒤에 적어두어서 html이 다 parse가 된 후에 js file을 읽기 때문에 이 event필요 없음.

window.addEventListener('load', function (e) {
   console.log('Page fully loaded', e);
 });

window.addEventListener('beforeunload', function (e) {
   e.preventDefault();
   console.log(e);
   //e.returnValue = ''; // 새로고침을 할 때 팝업이 뜬다.
 });

Efficient Script Loading : defer and async

Regular vs Async vs Defer

Regular in the end of body

<script src ="script.js">

Parsing HTML -> Fetch Script -> Execute (excute가 끝나면 DOMContentLoaded 실행된다)

• Scripts are fetched and executed after the HTML is completely parsed.

Async in head

<script async src ="script.js">

Parsing HTML과 Fetching Script가 동시에 일어난다. Fetch 가 끝난 script는 바로 실행이 되고 실행이 되는 동안 html은 기다리고, 다시 실행이 끝나면 html parsing을 계속한다. 이후 DOMContentLoaded 실행.

• Scripts are fetched asynchronously and executed immediately.
• Usually the DOMContentLoaded event waites for all scripts to execute, except for async scripts so DOMContentLoaded does not wait for an async script.
• Scripts not guaranteed to execute in order.
• Use for 3rd-party scripts where order doesn't matter. ex) google Analytics)

Defer in head

<script defer src ="script.js">

Parsing HTML 과 Fetching Script 동시에 일어난다. Parsing이 끝나면 script 실행이 되고 그 때 DOMContentLoaded 일어남.

• Scripts are fetched asychronously and executed after the HTML is completely parsed
• DOMContentLoaded event after defer script is executed
• Scripts are executed in order
• This is overall the best solution! Use for your own scripts and when order matters.