2주차 유튜브 API(6) - axios params 로 보기 좋게 GET요청하기

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";

const apiKey = process.env.REACT_APP_API_KEY;

function App() {

axios호출을 App에서 하여 여기저기로 데이터를 뿌리고 있기 때문에

App에서 기본 주소 설정을 합니다.

 

params 전달하기 

part=snippet

chart=mostPopular

maxResults=20

key=apikey

 

위에서 나열하여 적은 이 query문은 아래와 같이 작성하면 됩니다.

    const params = {
      part: "snippet",
      chart: "mostPopular",
      maxResults: 20,
      key: apiKey,
    };

 

그리고 get요청의 첫번째 인자로 경로를, 두번째 인자로 { params } 를 전달합니다.

    axios
      .get("/videos", { params })
      .then((res) => {
        dispatch(setPopularVideo([...res.data.items]));
      })
      .catch((error) => console.log("error", error));

---

전체 코드는 이렇습니다.

axios.defaults.baseURL = "https://youtube.googleapis.com/youtube/v3";

 

const apiKey = process.env.REACT_APP_API_KEY;

 

function App() {

  const dispatch = useDispatch();

  useEffect(() => {

    const params = {

      part: "snippet",

      chart: "mostPopular",

      maxResults: 20,

      key: apiKey,

    };

    axios

      .get("/videos", { params })

      .then((res) => {

        dispatch(setPopularVideo([...res.data.items]));

      })

      .catch((error) => console.log("error", error));

  }, [dispatch]);

---

이제 params 이용해서 구독한 채널의 최신 영상을 보여줍시다.

 

 

구독을 누르면 채널 ID를 구독 목록에 저장하도록 했습니다.

=> 구독기능을 실행하면 채널 이름과 채널 ID를 배열에 추가

 

    const params = {
      key: apiKey,
      part: "snippet",
      channelId: "UCUaT_39o1x6qWjz7K2pWcgw",
      order: "date",
      maxResults: 4,
    };

Beast Reacts 채널의 채널 ID를 일단 직접 저장하여 잘 되는지 봅니다. 

order:"data" (최신순으로)

4개만 가져와봅시다.

 

=> 이제 최신 영상도 찾을 수 있게 되었습니다.