#TIL wecode Bootcamp Day 30(1차 프로젝트 Day 10)✊🏼

Jung Hyun Kim·2020년 7월 1일
0

wecode

목록 보기
34/42

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로 화면 중간에 보여지는데, 상품 상세 페이지에 이를 적용했다.
    ami logo

  • 로딩 페이지는 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 />) : (
          <>중략</>
  )}
profile
코린이 프론트엔드 개발자💻💛🤙🏼

0개의 댓글