📸 2022-11-10

🔥 오늘 어디에 도전해보셨고, 무엇을 배우셨나요?

• 프로그래머스 인사 정보 SPA 리뉴얼 - Javascript

🌊 학습하시면서 궁금하신 부분이나, 어려웠던 점은 뭘까요?

• 자바스크립트만으로 SPA를 구현하기 위해서 History API에 대한 이해가 필요하다.

  • KimKwon님의 frontend-basic gitHub 저장소 : History API

• 직접 이벤트를 만들 수 있는 Web API CustomEvent를 사용하면 된다.

  • Event와 CustomEvent의 차이점은 CustomEvent의 두 번째 인수엔 객체가 들어갈 수 있는데, 이 객체에 detail이라는 프로퍼티를 추가해 커스텀 이벤트 관련 정보를 명시하고, 정보를 이벤트에 전달할 수 있다.

  const newEvent = new CustomEvent("hello", { detail: { name: "예은" } });
  
  // 이벤트 객체를 생성한 다음엔 dispatchEvent(event)를 호출해 요소에 있는 이벤트를 반드시 '실행’시켜줘야 합니다
  // (dispatch는 일을 '처리하다’라는 뜻을 가진 영어단어입니다 – 옮긴이).
  // 이렇게 이벤트를 실행시켜줘야 핸들러가 일반 브라우저 이벤트처럼 이벤트에 반응할 수 있습니다.
  newEvent.dispatchEvent(newEvent);
  

  🐝 참고

  커스텀 이벤트 디스패치 - 모던 JavaScript 튜토리얼

• 바닐라 자바스크립트로 무한 스크롤 구현하기

  • 아래 참고한 포스트는 모두 Intersection Observer API를 이용해 무한 스크롤을 구현한다. 미세한 차이는 관찰 대상을 무엇으로 지정하느냐다. (1️⃣ 현재 화면에서 보이는 목록 요소의 가장 마지막 요소를 관찰)할 것인지 혹은 (2️⃣ 목록 요소 하단에 관찰을 위한 대상을 미리 정의)할 것인지다.
  • 1️⃣ 현재 화면에서 보이는 목록 요소의 가장 마지막 요소를 관찰하는 경우는 ul의 last-child를 관찰하다가 만약 뷰포트 내로 들어온다면 새로운 요소 append한다. 그러면 맨 마지막으로 새 요소가 들어오면서 last-child가 갱신된다. 즉, 원래 관찰하던 last-child는 더 이상 마지막 요소가 아니므로 관찰을 중지하고 새로운 last-child를 관찰 대상으로 설정하고 다시 마지막 요소가 루트 요소로 들어오면 새 요소를 만들어서 관찰 대상을 갱신하는 것을 반복한다.

  • 2️⃣ 목록 요소 하단에 관찰을 위한 대상을 미리 정의하려면 ul 태그 바로 다음에 임의의 요소를 생성하고 이 요소가 루트 요소 내로 들어오는지 계속 관찰한다. ul의 last-child가 루트 요소 내로 들어오게 되면 바로 아래에 위치한 관찰 대상도 들어오게 되므로 목록이 갱신된다.

    🐝 참고

    바닐라 JS로 무한스크롤 구현을 위한 베이직 공부

    실무에서 느낀 점을 곁들인 Intersection Observer API 정리

🌟 내일은 어떻게 해보고 싶으세요?

• 프로그래머스 인사 정보 SPA 리뉴얼 과제 테스트 다시 풀어보기
• 그 외 프로그래머스에서 제공하는 과제 테스트 풀어보기