24/05/08 TIL

오늘 한 것

1. 팀 과제

• 상세 페이지에서 제공하는 추천 영화에서도 상세페이지로 진입할 수 있도록 코드를 작성했다.
• localStorage, sessionStroage 를 통해 이것저것 해보았던 것 같아 좋았다.

const handleClick = (evt) => {
  const target = evt.target;
  const targetId = evt.target.parentElement.parentElement.id;
  const targetImg = evt.target.parentElement.parentElement.firstChild.src;

  const cardData = target.parentElement.childNodes;

  window.sessionStorage.setItem("img", targetImg); // 유사 영화의 poster src 를 별도로 로컬에 저장
  window.localStorage.setItem("currentMovieId", targetId);

  cardData.forEach((elem) => {
    window.sessionStorage.setItem(
      elem.localName,
      elem.textContent ? elem.textContent : elem.src
    );
  });
};

기존에 사용한 코드를 재활용했다. 앞으로 어떻게 코드를 짜야 재사용하기 쉬울지 고려해볼 수 있는 좋은 기회였다.

1. 딥 다이브 JS 스터디

• 변수에 대한 내용을 학습하고 정리했다.
• 호이스팅에 대해서 간단히 복습했고, let 이나 const 의 경우 호이스팅이 이루어지지 않는다고 생각했는데 관련자료를 찾아보니 조금 차이가 있었다.
• 모든 선언 키워드는 호이스팅이 진행되지만, undefined 가 할당이 이루어지는 시점 또한 차이가 있다는 것이었다.
• var 는 호이스팅이 되면서, undefined 로 초기화가 되지만 let 은 여전히 초기화 되지 않은 상황이라는 것이다. const 도 비슷하지만 초기화 이후 재할당이 안된다는 차이점이 있다는 것을 기억하면 좋을 것 같다.