[React] TMDB API를 활용한 넷플릭스 클론 코딩 - 3. API 호출과 Local Storage를 활용한 영화 데이터 관리

API 호출과 Local Storage를 활용한 영화 데이터 관리

이번 단계에서는 TMDB API를 활용한 데이터 호출과 로컬 스토리지를 활용한 사용자 데이터 저장 방법을 살펴봅니다. 아래는 API 호출과 로컬 스토리지 관련 코드의 주요 내용입니다.

---

1. TMDB API 설정

• TMDB(The Movie Database)는 영화 데이터 API를 제공합니다.

이 프로젝트에서는 TMDB API를 사용해 인기 영화, 특정 영화 정보, 영화 검색 등의 데이터를 가져옵니다.

API 설정 코드는 다음과 같습니다:

import axios from "axios";

// TMDB API 기본 설정
const BASE_URL = "<https://api.themoviedb.org/3>";
const API_KEY = process.env.REACT_APP_TMDB_API_KEY; // 환경 변수에서 API 키 읽기
const BEARER_TOKEN = process.env.REACT_APP_TMDB_BEARER_TOKEN;

// Axios 인스턴스 생성
const api = axios.create({
  baseURL: BASE_URL,
  params: {
    api_key: API_KEY,
    language: "en-US", // 기본 언어 설정
  },
  headers: {
    accept: "application/json",
    Authorization: `Bearer ${BEARER_TOKEN}`, // Authorization 헤더 추가
  },
});

• BASE_URL: TMDB API의 기본 URL.
• API_KEY와 BEARER_TOKEN: 환경 변수에서 보안 키를 가져옵니다.
• Axios 인스턴스: 매번 API 호출 시 기본 URL과 공통 파라미터를 설정하지 않도록 도와줍니다.

---

2. TMDB API 활용

TMDB API를 사용해 다양한 데이터를 호출할 수 있습니다. 아래는 이 프로젝트에서 사용한 주요 기능들입니다:

• 인기 영화 데이터 가져오기

// 인기 영화 가져오기
export const getPopularMovies = async (page = 1) => {
  try {
    const response = await api.get("/movie/popular", {
      params: { page },
    });
    return response.data;
  } catch (error) {
    console.error("Error fetching popular movies:", error);
    throw error;
  }
};

• 영화 검색

// 영화 검색
export const searchMovies = async (query, page = 1) => {
  try {
    const response = await api.get("/search/movie", {
      params: { query, page },
    });
    return response.data;
  } catch (error) {
    console.error("Error searching movies:", error);
    throw error;
  }
};

• 특정 영화 정보 가져오기

// 특정 영화 정보 가져오기
export const getMovieDetails = async (movieId) => {
  try {
    const response = await api.get(`/movie/${movieId}`);
    return response.data;
  } catch (error) {
    console.error("Error fetching movie details:", error);
    throw error;
  }
};

---

3. 로컬 스토리지(Local Storage) 활용

사용자의 선호 영화 목록, 최근 검색어 등을 저장하기 위해 로컬 스토리지를 활용했습니다.

이를 통해 사용자가 새로고침해도 데이터가 유지되며, 지속적인 사용자 경험을 제공합니다.

주요 함수는 다음과 같습니다:

• 데이터 저장

// Local Storage 저장
export const saveToLocalStorage = (key, value) => {
  localStorage.setItem(key, JSON.stringify(value));
};

• 데이터 가져오기

// Local Storage에서 데이터 가져오기
export const getFromLocalStorage = (key) => {
  const value = localStorage.getItem(key);
  return value ? JSON.parse(value) : null;
};

• 데이터 삭제

// Local Storage에서 데이터 삭제
export const removeFromLocalStorage = (key) => {
  localStorage.removeItem(key);
};

---

4. 사용자 데이터 관리

• 즐겨찾기 영화 목록 저장이 함수는 영화 데이터를 중복 저장하지 않도록 처리합니다.

// 즐겨찾기한 영화 목록 저장
export const saveFavoriteMovies = (movie) => {
  let favoriteMovies = getFromLocalStorage("favoriteMovies") || [];
  // 중복 방지
  if (!favoriteMovies.some((fav) => fav.id === movie.id)) {
    favoriteMovies.push(movie);
    saveToLocalStorage("favoriteMovies", favoriteMovies);
  }
};

• 최근 검색어 저장최대 5개의 검색어만 유지하며, 중복 검색어를 방지합니다.

// 최근 검색어 저장
export const saveRecentSearch = (searchTerm) => {
  let recentSearches = getFromLocalStorage("recentSearches") || [];
  // 검색어 중복 방지
  if (!recentSearches.includes(searchTerm)) {
    recentSearches.push(searchTerm);
    // 최대 5개의 최근 검색어만 저장
    if (recentSearches.length > 5) {
      recentSearches.shift(); // 첫 번째 검색어 제거
    }
    saveToLocalStorage("recentSearches", recentSearches);
  }
};

---

🛠️ 로컬 스토리지와 API 활용의 결합

위에서 구현한 TMDB API 호출과 로컬 스토리지를 활용해 다음과 같은 사용자 경험을 제공합니다:

1. 인기 영화 목록 불러오기
2. API를 호출해 사용자가 최신 인기 영화를 볼 수 있도록 합니다.
3. 즐겨찾기 영화 저장
4. 사용자가 특정 영화를 클릭해 즐겨찾기 목록에 추가할 수 있습니다. 이 데이터는 로컬 스토리지에 저장되며, 페이지를 새로고침해도 유지됩니다.
5. 검색어 저장
6. 사용자의 최근 검색어를 로컬 스토리지에 저장하여, 빠른 검색 기능을 제공합니다.

---

🔗 블로그에서 다룰 내용 요약

이 포스팅에서는 다음 내용을 자세히 다룹니다:

• TMDB API 설정 및 활용 방법
• 로컬 스토리지를 사용한 데이터 저장과 관리
• 인기 영화, 검색어, 즐겨찾기 영화 목록 저장 구현

---

다음 단계에서는 UI 컴포넌트와 로직 결합에 대해 작성하겠습니다. 😊