1차 프로젝트 Day 10🔥

(로딩 페이지)

Daily standing meeting log (1 차 프로젝트 Day 10)✊🏼

Back-end

Done

• CSV 넣기
• product merge DB테스트 완료
• 데이터 베이스 CSV 밀어 넣기 (ING)
• 비밀번호 validation
• 인가 데코레이터
• 뷰 논의
• 위시리스트 view 작성 중 ing
• CSV 작업

Today's To-do's

• 카테고리 뷰 만들기
• 위시리스트 뷰 만들기

blocker

• x

Front-end

아래 굵은 글씨 부분이 내가 구현 한 /구현 할 부분

Done

• Newsletter, search 페이지 만들기
• 메인 페이지 슬라이더 이벤트
• 메인 페이지 사진 간 틈 해결하기
• 제품 상세 페이지 레이아웃 구현 완료
• data 형식 백엔드 공유
• 장바구니 페이지 레이아웃 완료
• log-in/password 인가 backend와 맞추기
• log-in/password detail 구현
• 장바구니 페이지 /팝업 형 장바구니 페이지
• img 모달 만들기
• 상품 페이지 scroll event 구현
• 로딩 페이지 화면 구현
• 네브바 scroll event 구현

Today's To-do's

• log-in/password detail 구현
• 네브바 mypage 이름 변경 이벤트 구현
• 위시리스트 페이지 만들기
• 팝업 형 장바구니 페이지 기능 구현
• 네브바 mypage 이름 변경 이벤트 구현
• 상품 리스트 페이지 / 상품페이지 코드 리펙토링
• 상품 동적 라우팅 로직 구현

blocker x

• x

---

⏳ 로딩 페이지 구현

고려 사항

• 페이지가 로딩 될때 화면에 아미 로고가 gif로 화면 중간에 보여지는데, 상품 상세 페이지에 이를 적용했다.
  

• 로딩 페이지는 boolean 값으로 state로 관리 되어야 하고, fetch되기 전에 화면에 보여줘야 함으로 ComponentDidMount()내 에서 fetch 전 true, fetch되면 false 값으로 설정이 중요하다.

• fetch 되기 전의 찰나가 너무 짧아서 화면에 보여지지 않을 것 같아 발표 시 구현 될 수 있도록 fetch를 setTimeout 비동기 함수에 넣어서 렌더 1 초 후 fetch 되도록 설정 하였다.

코드 정리

    componentDidMount() {
    const { id, colorId } = this.props.match.params;
  //동적라우팅 적용 관련은 다음 포스팅에서 다룰 예정 
    this.setState({ isLoading: true });
  //먼저 fetch 전 isLoading의 state를 true로 업데이트 한다. 
    setTimeout(() => {
      fetch(`http://13.125.209.103:8000/product/${id}/color/${colorId}`)
        .then((res) => res.json())
        .then((res) =>
          this.setState({  
            isLoading: false,
          })
  //response를 성공적으로 받아 올때 isLoading을 false로 업데이트 한다. 
        );
    }, 1000);
  //setTimeout을 통해 fetch를 1초 후에 되게끔 설정하면 초반에 loading중 화면을 확인 할 수 있다. 

• 전체 화면 구현은 삼항 연산자를 통해 isLoading이 true일때 LoadingPage컴포넌트(이미지를 포함한 화면)을 보여주고 아니면 상세 페이지를 보여주는 코드를 작성했다.

  {isLoading ? (<LoadingPage />) : (
          <>중략</>
  )}