TMDB API로 영화 카드리스트 만들기 - 1일차 진행기

영화는 언제나 많은 사람들에게 흥미로운 주제입니다. 특히, 영화를 사랑하는 사람이라면 언제 어디서든 영화를 검색하고 정보를 얻을 수 있는 플랫폼이 필요할 것입니다.

이번 글에서는 TMDB API를 활용하여 영화 카드리스트를 만드는 과정을 소개하겠습니다. 이 프로젝트는 영화 정보를 수집하고, 이를 카드 형태로 보여주는 웹 애플리케이션을 만드는 것을 목표로 합니다.

첫 번째 날에는 TMDB API 발급과 기본적인 카드리스트 UI를 구현하는 데 중점을 두었습니다.

TMDB API 발급받기

TMDB(The Movie Database)는 영화 및 TV 프로그램에 대한 정보를 제공하는 오픈 소스 데이터베이스입니다. TMDB API를 사용하면 사용자들은 프로그램적으로 영화 정보를 검색하고, 해당 정보를 표시할 수 있습니다.

프로젝트의 첫 번째 단계는 TMDB API 키를 발급받는 것입니다.

  1. 회원가입 및 로그인: TMDB 웹사이트에 접속하여 회원가입을 진행합니다. 회원가입 후에는 로그인하여 자신의 계정으로 이동합니다.

  2. API 키 요청: 로그인을 마친 후, API 섹션으로 이동하여 새로운 API 키를 요청합니다. 필요한 정보를 입력하고, 사용 목적을 설명하는 간단한 양식이 있습니다. 요청이 승인되면 이메일로 API 키가 발송됩니다.

  3. API 키 저장: 발급받은 API 키는 프로젝트에서 영화 데이터를 요청할 때 필요하므로 안전한 장소에 저장합니다.

아래 표는 TMDB API를 활용하기 위해 필요한 주요 정보입니다.

항목 내용
TMDB 사이트 The Movie Database
API 키 발급 방법 회원가입 후 API 섹션에서 요청
사용 용도 영화 및 TV 프로그램 정보 검색

다른 내용도 보러가기 #1

카드리스트 UI 구현

TMDB API에서 발급받은 API 키를 사용하여 영화 정보를 가져오고, 이를 카드 형태로 보여주는 UI를 구현해야 합니다. 이 단계에서는 HTML, CSS, 그리고 JavaScript를 사용하여 기본적인 뼈대와 스타일을 만들어봅니다.

HTML 뼈대

HTML은 웹 페이지의 구조를 정의합니다. 영화 카드리스트의 기본 구조를 다음과 같이 설정할 수 있습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>영화 카드리스트</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>영화 카드리스트</h1>
    </header>
    <main>
        <section id="movie-list">
            <!-- 영화 카드가 동적으로 삽입될 영역 -->
        </section>
    </main>
    <script src="script.js"></script>
</body>
</html>

위 코드에서 #movie-list라는 ID를 가진 섹션은 영화 카드가 동적으로 삽입될 영역입니다. 이 구조는 매우 기본적이지만, 이후 JavaScript를 통해 영화 데이터를 가져와 여기서 카드 형태로 보여줄 것입니다.

CSS 스타일링

HTML 구조가 준비되었으니, 이제 CSS를 사용하여 디자인을 적용합니다. 아래는 카드 스타일을 정의하는 기본적인 CSS 코드입니다.

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

header {
    background: #35424a;
    color: #ffffff;
    padding: 20px;
    text-align: center;
}

#movie-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px;
}

.movie-card {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin: 10px;
    padding: 15px;
    width: 200px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.movie-card img {
    width: 100%;
    border-radius: 5px 5px 0 0;
}

.movie-card h3 {
    font-size: 1.2em;
    margin: 10px 0;
}

위 CSS 코드는 영화 카드의 기본적인 레이아웃과 스타일을 정의합니다. display: flex를 사용하여 카드들이 가로로 나열되도록 하였으며, 카드 내부의 이미지, 제목 등의 요소에 대한 스타일을 적용하였습니다.

아래 표는 카드 UI 디자인에 대한 정보를 정리한 것입니다.

요소 내용
카드 배경색 흰색(#ffffff)
카드 테두리 1px 실선 테두리
카드 그림자 0 2px 5px rgba(0,0,0,0.1)
카드 제목 1.2em 폰트 크기, 마진 10px

JavaScript로 데이터 가져오기

HTML과 CSS가 준비되었으니, 이제 JavaScript를 통해 TMDB API로부터 영화 데이터를 가져오는 로직을 구현합니다. API 키를 사용하여 영화 목록을 요청하고, 응답으로 받은 데이터를 카드 형태로 변환하여 UI에 표시하는 과정을 설명합니다.

데이터 요청

다음과 같은 JavaScript 코드를 사용하여 TMDB API로 영화 데이터를 요청합니다.

const apiKey = 'YOUR_API_KEY'; // 발급받은 API 키
const movieListElement = document.getElementById('movie-list');

async function fetchMovies() {
    const response = await fetch(`https://api.themoviedb.org/3/movie/popular?api_key=${apiKey}&language=ko-KR&page=1`);
    const data = await response.json();
    displayMovies(data.results);
}

function displayMovies(movies) {
    movies.forEach(movie => {
        const movieCard = document.createElement('div');
        movieCard.className = 'movie-card';

        movieCard.innerHTML = `
            <img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}">
            <h3>${movie.title}</h3>
            <p>${movie.release_date}</p>
        `;

        movieListElement.appendChild(movieCard);
    });
}

// 페이지가 로드될 때 영화 목록을 가져옵니다.
window.onload = fetchMovies;

위 코드는 영화 데이터 요청을 위한 함수를 정의합니다. fetchMovies 함수는 TMDB API에 요청을 보내고, 응답으로 받은 데이터를 displayMovies 함수에 전달하여 각 영화에 대한 카드 정보를 생성합니다.

아래 표는 JavaScript로 구현된 데이터 요청 및 처리에 대한 정보를 정리한 것입니다.

함수명 설명
fetchMovies TMDB API로부터 인기 영화 목록 요청
displayMovies 영화 목록을 카드 형태로 UI에 표시
window.onload 페이지 로드 시 fetchMovies 호출

다른 내용도 보러가기 #2

결론

1일차 진행기에서는 TMDB API를 통해 영화 정보를 가져오는 웹 애플리케이션의 기본 구조를 설정하였습니다. API 키를 발급받고, HTML, CSS를 사용하여 카드리스트 UI를 구현하며, JavaScript를 통해 API로부터 데이터를 가져와 카드 형태로 표시하는 과정을 진행했습니다.

다음 단계에서는 영화 검색 기능을 추가하고, 더 많은 사용자 인터페이스를 개선할 계획입니다. 영화 애호가를 위한 유용한 플랫폼이 될 수 있도록 지속적으로 발전시키겠습니다.

관련 영상

댓글

댓글 쓰기

이 블로그의 인기 게시물

단식 후 필수 보식 식단 완벽 가이드

이미지
단식은 단순히 음식을 먹지 않는 과정을 넘어, 우리의 몸과 마음을 재정비하고 건강을 회복하는 중요한 단계입니다. 하지만 단식을 마친 후의 '보식' 과정이 더욱 중요하다는 것을 아는 분들은 많지 않습니다. 이번 글에서는 단식 후 보식의 중요성과 올바른 보식 식단을 제안하여, 건강한 회복을 돕고자 합니다. 보식의 중요성 단식을 마친 후 보식은 단순히 음식을 다시 먹기 시작하는 과정이 아닙니다. 이는 단식의 효과를 극대화하고, 체중 관리 및 건강 회복에 매우 중요한 역할을 합니다. 보식을 어떻게 하느냐에 따라 단식의 효과가 달라질 수 있으며, 잘못된 보식은 요요 현상과 같은 부작용을 초래할 수 있습니다. 단식 중에는 음식을 먹지 않기 때문에 몸이 휴식을 취하고 재정비되는 시간을 갖습니다. 하지만 단식이 끝나고 음식을 다시 먹기 시작하면, 우리의 식욕은 자연스럽게 활성화됩니다. 이때 욕망을 통제하지 못하고 과식을 하게 된다면, 단식의 효과가 사라지고 이전의 몸 상태로 돌아갈 위험이 있습니다. 따라서 보식 기간은 자기 자신과의 싸움이라고 할 수 있으며, 절대 방심해서는 안 됩니다. 보식의 중요성을 강조하기 위해 몇 가지 포인트를 정리해 보았습니다. 포인트 설명 단식 효과 극대화 보식 방법에 따라 단식의 효과가 달라짐 체중 관리 과식 시 요요 현상이 발생할 수 있으므로 주의 필요 마음가짐 욕망을 통제하고 소식하는 것이 중요 신체 적응 체중 감량 후 신체가 다시 적응할 수 있도록 도와줌 보식은 단식의 연장선상에 있는 중요한 과정입니다. 어떻게 보식을 하느냐에 따라 우리의 식습관과 건강이 결정되기 때문에, 신중하게 접근해야 합니다. 보식 기간의 설정 보식 기간은 단식의 종류와 기간에 따라 달라집니다. 예를 들어, 생수 단식의 경우 단식 기간의 4배수 만큼 보식을 진행해야 합니다. 반면, 변형 단식의 경우 본 단식의 일수만큼 보식을 진행하게 됩니다. 이처럼 각 단식의 특성에 맞춰 보식 기간을 설정하는 것이 필요합니다. 보식 기간 동안에는 욕망을 통제하고 정해진 ...
자세한 내용 보기

중등산화와 경등산화 비교 최고의 선택은?

이미지
등산은 많은 이들에게 자연과의 교감을 제공하는 소중한 활동입니다. 하지만 올바른 장비, 특히 등산화의 선택이 필수적입니다. 이번 글에서는 중등산화와 경등산화의 차이점을 깊이 있게 비교하며, 각자의 장단점을 살펴보겠습니다. 이 정보를 통해 독자님께서 본인에게 가장 적합한 등산화를 선택하는 데 도움을 드리고자 합니다. 중등산화의 특징과 장점 중등산화는 일반적으로 높은 안정성과 내구성을 제공하는 제품으로, 다양한 험한 산악 환경에서의 사용을 염두에 두고 설계되었습니다. 이 섹션에서는 중등산화의 주요 특징과 이를 선택할 때의 장점을 상세히 설명하겠습니다. 내구성과 안정성 중등산화는 일반적으로 고급 가죽이나 합성 소재로 제작되며, 특히 내구성이 뛰어난 제품이 많습니다. 이러한 특성은 거친 지형에서의 마모와 충격에 강한 저항력을 제공합니다. 예를 들어, 돌멩이와 나무 뿌리 등이 있는 등산로에서 발을 보호하는 데 큰 도움이 됩니다. 또한, 중등산화는 발목을 잘 지지해 주어, 불안정한 지면에서 발목이 삐거나 다치는 위험을 줄여줍니다. 특히 하이컷 디자인의 경우, 발목을 잘 감싸주어 보다 안정적인 보행을 가능하게 합니다. 특징 설명 내구성 고급 가죽 및 합성 소재 사용으로 강한 내구성 안정성 발목 지지 및 험한 지형에서의 안전성 제공 충격 흡수 두꺼운 중창으로 충격 흡수 성능 우수 충격 흡수 성능 중등산화의 두꺼운 중창은 발바닥에 가해지는 충격을 효과적으로 흡수하여, 장시간의 산행에서도 피로감을 줄이는 데 큰 역할을 합니다. 이로 인해 발바닥의 통증이나 발의 피로를 최소화할 수 있습니다. 많은 등산가들이 장거리 산행을 할 때 중등산화를 선호하는 이유 중 하나이기도 합니다. 다양한 환경에서의 활용성 중등산화는 다양한 산행 환경에서 활용할 수 있습니다. 겨울철에는 보온성과 방수 기능이 뛰어난 제품이 많아, 눈이나 추위로부터 발을 보호할 수 있습니다. 여름철에는 통기성이 좋은 제품을 선택하면, 더운 날씨에도 쾌적하게 사용할 수 있습니다. 단점 하지만 중등산화는 무게가 다소 무겁고,...
자세한 내용 보기

현지인이 추천하는 도쿄 클럽 핫플레이스!

이미지
안녕하세요! 오늘은 도쿄의 현지인들에게 인지도가 높고 많은 사람들이 즐겨 찾는 클럽 6곳을 추천해 드리겠습니다. 일본 여행을 계획하고 계신 분들이라면, 이곳들을 방문하여 특별한 밤문화를 경험해 보시기를 권장합니다. 저도 일본인 지인들과 함께 방문하여 재미있게 놀았던 곳들이니, 부담 없이 즐기실 수 있을 것입니다. 도쿄의 클럽은 크게 두 지역으로 나눌 수 있습니다. 바로 시부야와 롯폰기입니다. 이 두 곳은 한국의 홍대와 강남에 비유할 수 있는 지역으로, 다양한 클럽과 바들이 밀집해 있습니다. 그러면 지금부터 각 클럽의 매력과 특징을 자세히 소개해 드리겠습니다! 아톰 도쿄 (Atom Tokyo) 클럽의 개요 아톰 도쿄는 시부야 클럽 중 가장 유명한 핫플레이스로, 일본의 연예인들도 즐겨 찾는 곳입니다. 이 클럽은 역사와 전통이 있는 인기 클럽으로, 평일과 주말 모두 활발하게 운영되고 있습니다. 총 4층에서 6층까지 3개의 층을 클럽으로 운영하며, 각 층마다 다양한 장르의 음악을 즐길 수 있습니다. 층수 음악 장르 특징 4층 힙합 그루비한 분위기, 자유로운 춤 5층 EDM, 하우스, 덥스텝 신나는 일렉트릭 음악 6층 제이팝 믹스 일본 대중음악과 다양한 믹스 클럽의 분위기 아톰 도쿄의 가장 큰 매력은 다양한 음악 장르와 함께하는 활기찬 분위기입니다. 4층에서는 그루비한 힙합 음악이 흘러나오며, 젊은이들이 마음껏 춤을 추고 소통할 수 있는 공간이 마련되어 있습니다. 5층에서는 EDM과 하우스 음악이 주를 이루며, 대규모 DJ 파티와 함께 신나는 밤을 보낼 수 있습니다. 6층에서는 일본의 인기 대중음악인 제이팝이 믹스되어 흘러나오고, 일본의 음악 문화를 경험할 수 있습니다. 아톰 도쿄는 다양한 연령층이 어우러져 있는 곳으로, 혼자 방문하셔도 편안하게 즐길 수 있는 분위기를 제공합니다. 이곳은 정말 정신 없이 놀기 좋은 공간이며, 일본의 클럽 문화를 제대로 체험할 수 있는 곳입니다. 방문 정보 주소 : 〒150-0044 東京都渋谷区円山町２−４ ドクタージーカンズビル 운영 시간...
자세한 내용 보기