📝Day 78(52)일차 WE_MOTIVATION_DIARY

김민재·2021년 10월 8일

빡코딩 다이어리

목록 보기

75/87

- 프로젝트 진행현황

내가 만든 페이지 : 리스트 페이지

기능 구현 :

제품 호버시 상품 디테일 연속 4번 변경,

색상별 제품 사진 변경

무한 스크롤 및 로딩 표현

반응형 상품 갯수를 5개에서 2개로

하단에 gototopbutton과 top으로 가능 기능 구현

gototopbutton에 버튼에 하이라이트 기능

- 프론트 프로젝트 최종현황

태규님의 메인페이지, 나의 리스트 페이지, 동권님의 디테일 페이지

창현님의 로그인, 회원가입 휘민님의 nav,footer

- TODAY I LEARN ERROR 🦠

fetch를 10개씩 끊어서 모두 뿌렸을 때 마지막 로딩 이미지가 사리지지 않는 오류에 대해서

<script>
class ProductList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      listData: [],
      totalCountDataFetched: 10,
      loading: false,
      noData: false,
    };
  }
 // 데이터를 10개씩 페치받는 함수
  fetchMoreData = async () => {
    const LIST_API = '/data/ProductList/PRODUCT_LIST_DATA.json';
    const { totalCountDataFetched, noData } = this.state;
    fetch(LIST_API)
      .then(res => {
        return res.json();
      })
      .then(data => {
        const duplicatedData = [...data.LIST_DATA.product];
        const newDatalistData = duplicatedData.slice(0, totalCountDataFetched);
        this.setState({
          listData: newDatalistData,
        });
        if (this.state.listData.length === 50) {
          this.setState({
            noData: !noData,
          });
          return window.removeEventListener('scroll', this.handleScroll);
        }
      })
      .catch(console.error);
  };
</script>

- HOW TO FIX MY ERROR 💊

임시방편으로 데이터의 총갯수, 50개가 되었을 때 state값 noData을 true로만듬으로서 마지막 스크롤 이벤트가 발생하지 않도록 조치를 해놓았음.

멘토님께 여쭤보니 실제로는 벡엔드에서 프론트가 요청한 만큼의 데이터를 보내줄 것이고 이를 벡엔드의 과정없이 진행하게된다면 json 목데이터를 한 번에 보내는 것이 아닌 10개씩 잘라서 보내는 것으로 구현할 수 있다고 하심

ERROR를 해결한 setstate의 인자 prep🔑

this.setState(prev => ({...prev, listData: newDatalistData, currentState: prev.currentState + 1, totalState: data.totalCount,})); 로 이전 state값들을 prep... 스프레드로 받아서 저장할 수 있다.
currentState, 전체 페이지네이션 수, 즉 나의 경우 로딩을 몇번할 건지와 totalState, 전체 상품 갯수를 백엔드로부터 받아서 데이터를 저장한 뒤 fetch(LIST_API + this.state.currentState + '.json')처럼 json 목데이터를 5개로 나눠서 fetch 받아올 수 있다.
3.this.state.currentState === data.totalCount 벡엔드에서 받아온 수가 일치했을 때 스크롤 이벤트를 멈춰줘야하고 componentWillUnmount 메서드로 이벤트 취소까지 해주면 된다.

수정된 코드

<script>
class ProductList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      listData: [],
      totalCountDataFetched: 10,
      loading: false,
      currentState: 1,
      totalState: 1,
    };
  }
  componentDidMount() {
    this.fetchMoreData();
    return window.addEventListener('scroll', this.handleScroll);
  }
  componentWillUnmount() {
    // 이벤트 리스너에서 삭제
    window.removeEventListener('scroll', this.handleScroll);
  }
  fetchMoreData = async () => {
    const LIST_API = '/data/ProductList/PRODUCT_LIST_DATA_'
    const { totalCountDataFetched } = this.state;
    fetch(LIST_API + this.state.currentState + '.json')
      .then(res => {
        return res.json();
      })
      .then(data => {
        const duplicatedData = [...data.LIST_DATA.product];
        const newDatalistData = duplicatedData.slice(0, totalCountDataFetched);
        if (this.state.currentState === data.totalCount) {
          // 이벤트 리스너 삭제
        }
        this.setState(prev => ({
          ...prev,
          listData: newDatalistData,
          currentState: prev.currentState + 1,
          totalState: data.totalCount,
        }));
      })
      .catch(console.error);
  };
</script>

- 모르는 점

만든 작업물들을 하나로 merge하는 과정에 대해서

comnponentdidupdata🔑 , componentWillUnmount🔑 무한 스크롤이 페이지 끝에서는 사라지도록 하기 위해서 라이프사이클 메서드 내부에 스크롤을 멈추는 조건을 걸어야한다는 것에 대해서

- 배운점

팀원들과 토요일부터~목요일까지 작업한 프론트엔드 과정을 merge하는 과정을 경험하였음

merge하는 과정에서 conflict가 발생하고 충돌을 해결하고 다시 merge하여 최종적으로 모든 페이지를 main 브랜치에 합칠 수 있었음

merge 하기 전 리뷰 2개 승인 받고 git merge버튼 누르기

팀원 한 명이 본인의 브랜치를 merge했으면 다른 팀원이 자신의 작업 브랜치,feature에서 merge한 main 브랜치 git pull 받고 conflict 해결하기

conflict 해결되면 다시 git add와 commit 남기고 push하기

이 과정을 모두 마쳐 마지막 팀원이 최종적으로 merge하여 작업물 합치기