- 프로젝트 진행현황

• 내가 만든 페이지 : 리스트 페이지
• 기능 구현 :

1. 제품 호버시 상품 디테일 연속 4번 변경,
2. 색상별 제품 사진 변경
   
3. 무한 스크롤 및 로딩 표현
4. 반응형 상품 갯수를 5개에서 2개로
   
5. 하단에 gototopbutton과 top으로 가능 기능 구현
6. 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🔑

1. this.setState(prev => ({...prev, listData: newDatalistData, currentState: prev.currentState + 1, totalState: data.totalCount,})); 로 이전 state값들을 prep... 스프레드로 받아서 저장할 수 있다.
2. 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 브랜치에 합칠 수 있었음
• 1. merge 하기 전 리뷰 2개 승인 받고 git merge버튼 누르기

2. 팀원 한 명이 본인의 브랜치를 merge했으면 다른 팀원이 자신의 작업 브랜치,feature에서 merge한 main 브랜치 git pull 받고 conflict 해결하기
3. conflict 해결되면 다시 git add와 commit 남기고 push하기
4. 이 과정을 모두 마쳐 마지막 팀원이 최종적으로 merge하여 작업물 합치기

- 잘한 점과 개선할 점

• 집에오자마자 일주일간의 피로를 위해 바로 잔 점과 일찍 일어난 점은 잘한 것같다~
• 팀원들과 함께 하면서 프론트엔드 부분의 리팩토링과 수정을 더 할 수 있는 시간이 있음에도 열심히 집중하지 않은 것 반성하자!

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

1. 백엔드 모델링 및 프리즈마 통일 팀원 진행
2. 벡엔드 서버 생성 및 레이어드 패턴 제작
3. 벡엔드 관련 강의 2개 듣기