[220725] 유튜브 클론코딩 5

 

1. 주말 숙제 상세페이지 채널 정보 넣기

강사님이 보내준 api 주소 :

https://youtube.googleapis.com/youtube/v3/channels?part=statistics&part=snippet&id=channelId&key=[YOUR_API_KEY]

 

1) api.js

export function channelUrl(channelId){

  return `https://youtube.googleapis.com/youtube/v3/channels?part=statistics&part=snippet&id=${channelId}=${API_KEY}`

}

→ channelId를 매개변수로 url 하나 export

 

2) VideoItem

- api 주소 정보에 snippet안에 channelId가 있었음 그걸 꺼내서 쿼리값으로 넘겨줄 것임

- navigate(`/watch?id=${id}&channelId=${item.channelId}`) 로 수정 → id 는 비디오 아이디, channelId 는 내가 선택한 비디오의 채널 아이디가 들어가도록

 

3) VideoView

- {id} 를 props 로 받아준 것처럼 상위 컴포넌트인 Watch 에서 channelId 도 쿼리값 받아주기

 

4) Watch

- const channelId=query.get('channelId') 추가

- <VideoView id={id} channelId={channelId} /> → channelId={channelId} 추가해서 VideoView 에 내려주기

 

5) VideoView

- props channelId 추가

- import { channelUrl } from '../../lib/api'; → 채널 정보 받아올 api url import

- 정보 받아서 store 에 저장해서 쓸 것임

 

6) store > videoSlice

export const getChannelInfo = createAsyncThunk(

    "GET_CHANNEL_LIST",

    async(url)=>{

     try{

         const res=await axios.get(url)

         return res.data.items

     }catch(err){

         console.log(err)

     }

    }

 )

→ getChannelInfo 라는 뭐 하나 더 추가????

- initialState 에 channel 초기값으로 '' 빈스트링 추가

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

            console.log('비디오채널정보', action.payload)

            state.channel=action.payload;

        })

→ extraReducers 에 추가

 

7) VideoView

import { getChannelInfo } from '../../store/video/videoSlice';

import { useSelector, useDispatch } from 'react-redux/es/exports';

 

const dispatch = useDispatch();

  useEffect(()=>{

    const channelIdInfo = channelUrl(channelId)

    dispatch(getChannelInfo(channelIdInfo))

  },[])

→ ??????

 

- const {channel} =useSelector((state)=>state.channel) 추가

- return 안에 채널 정보 들어갈 곳에

{

        channel && (

          <div className='descriptionContainer'>

            <div className='channel-img'>

              <img src={channel[0].snippet.thumbnails.default.url} alt="" />

            </div>

            <div className='channel-data'>

              <h3 className='channel-title'>

                {channel[0].snippet.title}

              </h3>

              <p className='channel-des'>

                {channel[0].snippet.description}

              </p>

            </div>

          </div>

        )

      }

→ 각 정보 넣어서 마크업

 

 useEffect(()=>{

    const channelIdInfo = channelUrl(channelId)

    dispatch(getChannelInfo(channelIdInfo))

  },[channelId, dispatch])

→ 의존 잡아줘야 상세페이지 목록을 클릭해도 채널정보가 맞게 뜸

 → 동영상 하단에 채널 정보가 맞게 뜸 완성! (스타일링은 알아서)

 

 

 

 

2. 빌딩??? 최적화??? !!!다시!!!

1) 설치

- npm run build

- build 폴더가 생겼을 것임

- 빌딩된 걸 로컬에서 보려면? : npm 사이트 가보면 서버가 없어서 서버를 하나 설치해야함, npm install -g serve

- 서버 실행시키는 방법? serve -s build

- npm start 는 개발자 모드, 빌드는 배포?

- 디플로이 배포?

- git 에 먼저 올리기

- netlify????

- heroku?????: Config Vars 에 환경변수 설정, 키랑 밸류 넣기 .env 에 해준 것 복붙

커넥트 가서 깃이랑 연결 확인하고 디플로이 클릭,