안녕하세요

채널의 최신 영상을 가져옵니다. 구독한 채널별로 컴포넌트를 만들어 channelId를 전달한다. {subscribeList.map((subscribedChannel, index) => { {subscribedChannel.title} )} => map을 통해서 컴포넌트를 불러온다. 전달받은 channelId를 이용하여 해당 채널의 최신 영상을 불러온다. useEffect(() => { (async () => { const recentVideoData = await getChannelRecentVideos(channelId, VIDEO_AMOUNT); setVideoArray([...recentVideoData]); console.log(videoArray); })(); }, []); => 각 컴포넌트가 ..

redux로 state에 class를 저장하려했다. const youtubeApiSlice = createSlice({ name: "youtubeApiSlice", initialState: [], reducers: { setYoutubeApi(state, action) { state.push(action.payload); }, getYoutubeApiClass(state) { return state; }, }, }); 그리고 이를 불러와 메소드를 활용해보려 했으나 에러가 발생했다. A non-serializable value was detected in an action, in the path: `payload`... 관련 내용: https://velog.io/@kingyong9169/Redux-Tool..

***STATE에 CLASS는 저장할 수 없습니다.*** 뒤에서 에러가 생겨서 CLASS 이용 안합니다. 구독 페이지를 구현해보기 전에 YoutubeApi Class를 생성해봅시다. useEffect(() => { const params = { key: apiKey, part: "snippet", channelId: "UCUaT_39o1x6qWjz7K2pWcgw", order: "date", maxResults: 4, }; axios .get("/search", { params }) .then((res) => { console.log(res.data); }) .catch((error) => console.log("error", error)); }, [dispatch]); => 채널에서 최신 영상을 검색하..

URL이 너무 길면 수정해야 할 때나 읽을 때 알기 어렵습니다. .get(`https://youtube.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=20&key=${apiKey}`) 긴 한줄의 url을 아래처럼 url 주소의 video경로로 part=snippet chart=mostPopular maxResults=20 key=apikey 여러 줄에 걸쳐 놓으면 읽기도 쉽고, 20개가 아니라 5개만 출력하고 싶을 때 수정도 쉽습니다. axios.defaults.baseURL 로 기본 주소 정하기 axios.defaults.baseURL = "https://youtube.googleapis.com/youtube/v3"..