[220722] 유튜브 클론코딩 4

1. 로딩 추가

1) VideoList

- useEffect 는 컴포넌트를 불러올 때 api 호출, 시간에 딜레이가 생기면 마운팅이 됐을 때 api 를 못 불러오는 경우가 생김 따라서 로딩 화면이 뜨는 게 필요함

- npm react-spinners 라이브러리 설치, npm install --save react-spinners

- npm 사이트에 검색해보면 Demo Page 에 로딩 화면에 뜰 다양한 아이콘 제공, Storybook 에서는 해당 아이콘의 구체적 코드 제공

 

import ClipLoader from "react-spinners/ClipLoader";

 

if(loading){

    return <ClipLoader color={color} loading={loading} cssOverride={override} size={150} />

   }

- return 문 밖에 if 문으로 로딩이 없으면 컨텐츠가 나오고 로딩이 있으면 로딩 컴포넌트가 보이도록

- loading 값은 리덕스로 가져올 것임

- ClipLoader 는 react-spinners 의 기능적인 것이 아니고 모양임 따라서 스토리북에서 원하는 모양을 가져다가 쓰면 됨

- 스토리북에서 가져올 때 control 에서 내가 원하는 값으로 설정해서 코드를 가져올 수도 있음 (색깔, 애니메이션 시간 등)

- 컴포넌트는 따로 클래스 네임을 지정하지 못하기 때문에 인라인 스타일로 줘야 함

- 스토리북에서 cssOverride 가 그것인데 control 에서 raw 해주면 스타일을 지정할 수 있고 상단에 show code 하면 해당 스타일의 코드가 나옴, 복사 붙여넣기

 

2) videoSlice

- initialState 에 기본값으로 loading: true, 넣어놓기

- extraReducers 에다가 fulfilled 말고 값을 판단하고 있는 상태를 추가

builder.addCase(getVideoList.pending,(state,action)=>{

            state.loading=true;

        })

→ pending 상태에서 loading 을 true

builder.addCase(getVideoList.fulfilled,(state,action)=>{

            state.data=action.payload;

            state.loading=false;

        })

→ 기존에 있던 것 수정, 나오면 loading 을 false

builder.addCase(getVideoList.rejected,(state,action)=>{

            console.log('액션페이로드',action.payload)

            state.loading=true;

        })

→ rejected 거부됐을 때 loading 을 true

 

3) VideoList

- loading 값 가져오기

- 기존에 있던 데이터 불러온 것과 축약해서 설정

- const {data, loading} = useSelector((state) => state.video)

- 이렇게 하면 잘 뜸

 

 

 

2. 동영상 현재 날짜 기준 몇일 전 올렸는지 날짜 표시

- 가져온 데이터 보면 snippet 에 publishedAt 에 시간이 나오는데 현재 시간과 비교해서 빼고 시분초로 나눠서 표시해줄 것

 

1) VideoItem

- 그냥 <p className='date'>{item.publishedAt}</p> 로 추가하면 2019-06-03T23:00:05Z 이렇게만 나옴

 

2) lib > common.js 생성

- export function convertDate(dateValue) 하나 생성

- const publishedDate = new Date(dateValue); → publish 된 시간의 객체 받아옴

- const currentDate = new Date(); → 현재 시간의 객체 받아옴

- const seconds = (currentDate.getTime()-publishedDate.getTime()) / 1000 → 1970년을 기준으로 지정한 날짜까지의 초를 반환하는 getTime 메서드로 현재시간 빼기 publish 시간

- 따라서 뺀 사이 간격으로 1000 으로 나눠서 초, 60 으로 나눠서 분, 몇으로 나눠서 시 로 만들 것

let result;

if (seconds<10){

  result = `방금 전`;

}else if (seconds < 60) {

  result = `${seconds}초 전`;

}else if (seconds < 3600) {

  result =  `${Math.floor(seconds / 60)}분 전`;

}else if (seconds < 86400) {

  result = `${Math.floor(seconds / 3600)}시간 전`;

} else if (seconds < 604800) {

  result = `${Math.floor(seconds / 86400)}일 전`;

} else if (seconds < 2592000) {

  result = `${Math.floor(seconds / 604800)}주 전`;

} else if (seconds < 31536000) {

  result = `${Math.floor(seconds / 2592000)}달 전`;

} else {

  result = `${Math.floor(seconds / 31536000)}년 전`;

}

return result;

 

3) VideoItem

- 위에 것 import, import { convertDate } from '../../lib/common';

- 아까 만들었던 <p className='date'>{item.publishedAt}</p> 부분을

- <p className='date'>{convertDate(item.publishedAt)}</p> 로 수정

 

 

 

3. 상세페이지 동영상 목록 일렬로 수정

1) Watch

- videoData 부분을 data 로 바꿔줘서 통일시켜주기

- const {data} = useSelector((state) => state.video);

2) Home

- const display = useSelector((state) => state.video.listLayout) 부분을

- const {listLayout} = useSelector((state) => state.video) 로 수정

- <VideoList display={display} /> 부분을

- {listLayout &&  <VideoList display={listLayout} />} 로 수정

3) Search

- const display = useSelector((state)=>state.video.listLayout); 부분을

- const {listLayout} = useSelector((state)=>state.video.listLayout); 로 수정

- <VideoList display={display} /> 부분을

- {listLayout &&  <VideoList display={listLayout} />} 로 수정

 

4) Watch

- <ul className='watchList' > 클래스 네임에 VideoRowList 추가해서 style 설정

 

 

 

4. 주말 숙제 : 동영상 하단에 채널 정보 뜨도록 설정하기

1) 하는 방법

- youtube.api 사이트로 가서 Reference > video > list

- part 부분에 statistics 라고 적기, + 눌러서 snippet 도 추가

- show 코드

https://youtube.googleapis.com/youtube/v3/videos?part=statistics&part=snippet&chart=mostPopular&maxResults=30®ionCode=kr&key=본인키

- 주소에 복붙하면 statistics 가 있는 걸 볼 수 있음

- 서치가 있을 때만 저 값이 있도록 해줘야 함

- 채널 정보 부분은 channels > list 에 part : snippet, ~ channelId 꼭 추가해서 보면 채널 정보가 포함되어 있음

- 그래서 상세페이지 아래에 넣을 컴포넌트에 위 정보를 뿌려서 나오도록 만들기