ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • api 파트 2
    React 2019. 11. 11. 23:10
    • Append To Response: video[예고편]나 image[포스터] 같은 것들을 append(덧붙이기) 할때 사용
    1.  the movie database API 에 접속하면 시뮬레이션을 해볼수있다.
    2. 사진의 빨간동그라미 부분에 vidoes를 입력하면
    3. json오브젝트 맨 하단에 videos라는 객체가 추가됨

     

    • app.js
    import axios from "axios";
    
    const api = axios.create({
      baseURL: "https://api.themoviedb.org/3/",
      params: {
        api_key: "d72dd1ba6c0d1b77338e9259724d1db9",
        language: "en-US"
      }
    });
    
    export const moviesApi = {
      nowPlaying: () => api.get("movie/now_playing"),
      upcoming: () => api.get("movie/upcoming"),
      popular: () => api.get("movie/popular"),
      movieDetail: id =>
        api.get(`movie/${id}`, {
          params: {
            append_to_response: "videos"
          }
        }),
      search: term =>
        api.get("search/movie", {
          params: {
            query: encodeURIComponent(term) // encodeURIComponent()은 괄호안의 값을 인코딩해준다.
            // encodeURIComponent() 사용 않하면, url에 스페이스값을 넣어줄경우 %로 표시되어 오류가남
          }
        })
    };
    
    export const tvApi = {
      topRated: () => api.get("tv/top_rated"),
      popular: () => api.get("tv/popular"),
      airingToday: () => api.get("tv/airing_today"),
      showDetail: id =>
        api.get(`tv/${id}`, {
          params: {
            append_to_response: "videos"
          }
        }),
      search: term =>
        api.get("search/tv", {
          params: {
            query: encodeURIComponent(term) // encodeURIComponent()은 괄호안의 값을 인코딩해준다.
            // encodeURIComponent() 사용 않하면, url에 스페이스값을 넣어줄경우 %로 표시되어 오류가남
          }
        })
    };
    
    • 라우터,파라미터들을 개별적으로 설정하는 방식. (! api 전체를 위한 것은 아님)

    'React' 카테고리의 다른 글

    Home ,TV, Search, Detail Container  (0) 2019.11.14
    #5 Container Presenter Pattern  (0) 2019.11.13
    api 파트 1  (0) 2019.11.11
    # 4 Movie DB API 를 활용한 Axios  (0) 2019.11.11
    GlobalStyles  (0) 2019.11.11

    댓글

Designed by Tistory.