📝Day(51) 77일차 WE_MOTIVATION_DIARY

- 프로젝트 진행현황

- TODAY I LEARN ERROR 🦠

• 데이터를 다 받아온 뒤 스크롤이 페이지 최하단에 다았을 때 로딩 이미지가 잠깐 나타났다가 사라지는 현상에 대해서
• 무한 스크롤을 구현하다보니 데이터를 받아오는 갯수와 스크롤 핸들러 이벤트를 활용해서 로직을 짜보았는데 라이프 사이클을 잘 이해해야만 수월하게 진행할 수가 있었다. 내일 오전에 merge하기 전 이 문제를 꼭 해결해야겠다.

<script>
// 로딩이미지를 발생시키는 메서드
  showLoadingSvg = resolve => {
    const { listData, totalCountDataFetched, loading } = this.state;
    return new Promise(resolve => {
      if (listData.length !== totalCountDataFetched) {
        this.setState({
          loading: false,
        });
      } else {
        this.setState({
          loading: !loading,
        });
        setTimeout(() => {
          resolve();
        }, 1000);
      }
    });
  };
// 스크롤 관련 메서드
handleScroll = async () => {
    const { totalCountDataFetched } = this.state;
    const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
    let scrollTotalHeight = scrollHeight;
    let scrollHeightFromTop = scrollTop;
    let scrollHeightOfListCard = clientHeight;
    const isOverEndPointScroll =
      scrollHeightFromTop + scrollHeightOfListCard >= scrollTotalHeight;
    if (isOverEndPointScroll) {
      this.setState(
        {
          totalCountDataFetched: totalCountDataFetched + 10,
        },
        await this.showLoadingSvg()
      );
      this.fetchMoreData();
    }
  };</script>

- HOW TO FIX MY ERROR 💊

• ERROR를 해결한 KEYWORD 🔑
• 로딩 이미지를 시간을 두고 보여주다보니
  setTimeout과 같은 🔑비동기함수나 🔑Promise 생성자를 만들어 resolve를 전달하여 비동기 함수를 동기처리하는 등의 로직이 필요했다.
• 이처럼 어제 배웠던 라이프 사이클 및 조건부 렌더링🗝과 동기 비동기🗝같은 키워드가 해당 기능과 밀접한 관련이 있는 듯보이니 이 두가지 키워드를 좀 더 공부해봐야겠다.
• 찾아보니 componentDidUpdate🗝를 쓰면 state값 바뀌었을 때 실행되는 메서드로 변경된 스테이트값을 가지고 로직을 구현할 때 활용할 수 있을 듯 싶다.

<script>
// 스크롤이 끝에 다달았을 때 콜백함수로 showLoadingSvg를 await를 걸어 줌으로서 로딩의 시간 지연을 표현하였다.
if (isOverEndPointScroll) {
      this.setState(
        {
          totalCountDataFetched: totalCountDataFetched + 10,
        },
        await this.showLoadingSvg()
      );
      this.fetchMoreData();
    }</script>

- 모르는 점

[Advanced Routing]

• 에러를 해결하기 위해서 키워드A🔑를 검색했는데 이런거를 몰랐었더라~
• 사이트에 동적으로 URL이 변경되어 새로운 view를 그리는 프로세스를 알기 위해서 1> 다이나믹 라우팅과 2> 패스 파라마리터, 3> 쿼리스트링 개념을 알아야한다.

- 배운점

• Router dom라이브러리에서 제공하는 this.props.location🔑를
  this.props.match.params.id🔑을 통해서 리액터 파일에서 동적 라우팅 처리를 해줄 수 있다.

- 잘한 점과 개선할 점

• 일찍자려고 일정을 최대한 타이트하게 잘한 점 굿굿 최고!
• 더 일찍 잘 수 있었는데 집중을 잘 못해서 시간을 제대로 활용하지 못한 아쉬운 시간들에 대해서 다시 한 번 반성!

- 목표와 마감기한: 2021-10-08

• 1. 내일 꼬꼬꼬꼭 일찍 일어나서 라우팅 세션 복습하고 블로깅마친 뒤 과제까지 최대한 해보자, 장현님 말씀대로 중요한 부분인거 같다.
• 2. 리팩토링 1차 마치기
• 3. merge 이후 리팩토링 2차 진행하기
• 4. 백엔드 라우팅 부분 공부하기