TIL 04.27

자바스크립트 주요 메소드 사용법

난이도가 좀 있는 하루였다. 최근들어 문득 느끼는 건데 내가 알고 있는 지식들은 구멍이 좀 많은 것 같다. 😫

어렴풋이 알고만 있고 제대로 된 설명을 블로그 포스트에 적으려니 슬슬 힘들어지고 있다.

꾸준한 공부를 통해 모두 내 것으로 만들어야겠다. 💎

자투리

1. DOM 요소를 지정하는 변수는 모두 참조 데이터 타입이다.

당연한 말이다. DOM 요소가 객체인 만큼 참조일 수밖에 없다.

2. 이벤트 핸들러에 지역 변수를 선언해 사용한다면??

window.onload = () => {
  const number = document.querySelector(".number");
  const addBtn = document.querySelector(".addBtn");
  let counter = 1;

  addBtn.addEventListener("click", () => {
    number.innerText = counter++;
  });
};

window.onload에 할당한 코드는 웹 브라우저의 모든 요소가 사용 가능할 때 실행된다.

이 때 number, addBtn, counter는 해당 함수의 지역 변수다. 이때 함수의 실행이 끝난다면 어떻게 될까?

addEventListener를 통해 버튼에 이벤트가 걸리니 버튼 DOM 요소에 이벤트가 생겼다.

하지만 counter는 지역 변수이기 때문에 함수의 실행이 종료되면 메모리가 반환되어야 한다.

여기서 클로저의 개념이 등장한다. 이벤트 핸들러가 counter를 계속 참조하고 있으니 자바스크립트 엔진의 가비지 컬렉터는 counter의 메모리를 가져가지 않는다.

알고 있었던 클로저의 개념이었지만, 이런 곳에서 사용되는 줄은 생각도 못했다. 얕은 지식의 한계가 드러나는 부분이다.

3. 무한 슬라이더 아이디어

무한 슬라이더를 만들 때 currentSlide가 인덱스 범위를 벗어나면 제자리를 찾아가는 식으로 만들었었다.

하지만 swiper처럼 자연스럽게 일직선으로 흘러가는 모습이 아니었는데 오늘 그 인사이트를 얻었다.

1. 슬라이더의 양 옆에 clone 요소 생성하기
2. 원래 슬라이더의 인덱스 범위를 벗어나면 슬라이드 애니메이션 일단 발생
3. 애니메이션 duration 만큼 대기 후 transition 없애기
4. clone이 아닌 원래 슬라이더의 인덱스 위치로 이동
   -> 이때 애니메이션이 사라지기 때문에 사용자는 육안으로 확인할 수 없다.
5. transition 재설정

추후 바닐라나 리액트로 구현해봐야겠다.