[다이어리프로젝트] TMDB API연동 가이드

송나·2025년 2월 1일

다이어리 프로젝트

목록 보기

2/5

💡 TMDB API 연동

목표 : 영화와 드라마 정보를 제공받을 수 있는 api를 찾아봄. 무료이면서 영화, TV프로그램을 모두 제공하는 TMDB로 선정함. TMDB API 사용법 정리하기.

📑 API 사용 준비

⦁ https://www.themoviedb.org/
⦁ 회원가입후 API발급
⦁ 개발자 계정으로 전환 (url없어도 발급가능)
⦁ 가이드 https://developer.themoviedb.org/reference/intro/getting-started

📑 주요 엔드포인트

⦁ 기본url구조
https://api.themoviedb.org/3/endpoint?api_key=YOUR_API_KEY&language=ko-KR
⦁ 영화 / TV

/search/movie(tv) : 검색
/genre/movie(tv)/list: 장르 목록
/movie(tv)/popular : 인기 있는 목록
/movie(tv)/top_rated: 평점이 높은 목록
/movie(tv)/{movie(tv)_id} : 상세 정보

⦁ 엔드포인트마다 쿼리 파라미터로 필터

📑 API 연동 (server)

⦁ 서버에서 API 호출
⦁ API 키는 환경변수로 설정

const API_KEY = process.env.TMDB_API_KEY;
const BASE_URL = "https://api.themoviedb.org/3";

router.get("/", async (req, res) => {
    console.log("목록접근");
    try {
        const axiosres = await axios.get(`${BASE_URL}/movie/popular`, {
            params: {
                api_key: API_KEY,
                language: "ko-KR",
                page: 1,
            },
        });
        res.status(200).json(axiosres.data);
    } catch (error) {
        console.error("데이터불러오기 오류:", error);
        res.status(500).json({ message: "데이터 요청에 실패했습니다." });
    }
});

📑 API 연동 (client)

⦁ 데이터를 배열로 저장
⦁ 콘솔창으로 응답받은 데이터 형식 확인

⦁ poster_path는 MDB API에서 제공하는 이미지 기본 URL https://image.tmdb.org/t/p/ 과 같이 사용해야함
⦁ map함수로 데이터 출력

const [contents, setcontents] = useState([]);
    useEffect(() => {
        const reqdata = async () => {
            try {
                const res = await axios.get(`${URL}/list`);
                console.log("데이터확인", res.data);
                setcontents(res.data.results);
            } catch (error) {
                console.log(error);
            }
        };
        reqdata();
    }, []);
    return (
        <div>
            <h1>List</h1>
            {contents.map(movie => (
                <div key={movie.id}>
                    <p>{movie.title}</p>
                    <p>{movie.release_date}</p>
                    <div>
                        <img
                            src={`https://image.tmdb.org/t/p/w300${movie.poster_path}`}
                            alt={movie.title}
                        />
                    </div>
                </div>
            ))}
        </div>
    );