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

영화 정보를 다루는 웹 애플리케이션을 개발하기 위해 TMDB API를 활용하여 카드리스트를 만드는 프로젝트를 진행하고 있습니다. 이 글에서는 첫 번째 날의 진행 상황과 배운 점들을 상세히 기록하고자 합니다.

프로젝트 개요

이번 프로젝트는 TMDB API를 통해 인기 영화를 불러오고, 이를 카드 형태로 웹 페이지에 표시하는 것입니다. 목표는 사용자에게 영화 정보를 쉽게 제공하고, 사용자가 흥미를 느낄 수 있도록 하는 것입니다.

이를 위해 HTML, CSS, 그리고 JavaScript를 사용하며, jQuery와 같은 라이브러리 없이 순수 자바스크립트로 구현할 계획입니다.

항목	내용
프로젝트 명	TMDB 카드리스트
사용 기술	HTML, CSS, JavaScript (순수)
API	TMDB API
목표	인기 영화 정보를 카드 형태로 보여주기

TMDB API 발급 받기

TMDB API를 사용하기 위해서는 먼저 API 키를 발급받아야 합니다. TMDB의 공식 웹사이트에 가서 회원가입을 한 후, API 키를 요청하는 절차를 밟았습니다.

이 과정에서 API 키를 설정하는 방법과 필요한 권한에 대해 안내를 받았습니다. API 키를 발급받은 후에는 이를 활용하여 영화 데이터를 요청할 수 있습니다.

TMDB API는 다양한 데이터 포맷과 요청 방식을 지원하므로, 필요한 데이터에 맞춰 요청을 구성하는 것이 필요합니다. 특히, 인기 영화를 가져오기 위해서는 /movie/popular 엔드포인트를 사용해야 하며, 이를 통해 JSON 형식으로 데이터를 반환받을 수 있습니다.

항목	내용
API URL	https://api.themoviedb.org/3/movie/popular
요청 방식	GET
응답 형식	JSON
필요한 파라미터	api_key (발급받은 API 키)

다른 내용도 보러가기 #1

카드리스트 UI 구현

API로부터 받은 데이터를 기반으로 카드리스트 UI를 구현하는 단계로 넘어갔습니다. 각 카드에는 영화의 제목, 포스터, 개요 등이 포함될 예정입니다.

이를 위해 CSS Flexbox를 활용하여 카드 배열을 정렬하고, 각 카드의 디자인 요소를 조정하였습니다. HTML 구조는 다음과 같으며, CSS를 통해 각 요소들을 스타일링했습니다.

“`html

“`

CSS를 사용하여 각 카드의 크기, 여백, 정렬 등을 설정하고, Flexbox를 통해 카드들이 수평으로 정렬되도록 하였습니다. 다음은 카드 스타일에 대한 CSS 예시입니다.

“`css
.card {
display: flex;
flex-direction: column;
width: 200px;
margin: 10px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
}

.card img {
width: 100%;
height: auto;
}

.card h2 {
font-size: 1.5em;
margin: 10px;
}

.card p {
padding: 10px;
font-size: 0.9em;
}
“`

요소	설명
카드	영화 정보를 담는 컨테이너
이미지	영화 포스터
제목	영화 제목
개요	영화 개요

데이터 받아오기

API에서 데이터를 받아오는 과정에서는 fetch() 메서드를 사용하였습니다. 이 메서드는 비동기적으로 데이터를 요청하고, Promise를 반환하여 응답을 처리할 수 있습니다.

데이터 요청 후, JSON 형식으로 변환하여 필요한 정보를 추출하는 과정을 구현했습니다.

javascript
fetch(`https://api.themoviedb.org/3/movie/popular?api_key=YOUR_API_KEY`)
.then(response => response.json())
.then(data => {
const movies = data.results;
// 카드 리스트에 영화 정보 추가
})
.catch(error => console.error('Error:', error));

데이터를 성공적으로 받아온 후, 각 영화 정보를 카드 형태로 변환하여 화면에 표시하도록 로직을 구성했습니다. 이 과정에서 발생할 수 있는 오류를 처리하기 위해 try-catch 구문을 사용하여 에러를 관리했습니다.

항목	설명
fetch	데이터 요청을 위한 메서드
Promise	비동기 처리를 위한 객체
Error Handling	오류 발생 시 처리 방법

배운 점 및 느낀 점

첫날 진행하면서 여러 가지를 배우고 느꼈습니다. 특히, API를 통해 데이터를 받아오고 이를 효과적으로 UI에 반영하는 과정에서 많은 경험을 쌓았습니다.

또한, CSS Flexbox를 활용하여 레이아웃을 정리하는 것이 매우 유용하다는 것을 깨달았습니다. 처음에는 데이터의 위치를 제대로 설정하지 못해 애를 먹었지만, 튜터님의 조언을 통해 변수에 배열 형태로 데이터를 담는 방법을 습득하였습니다.

이처럼, 코딩을 하면서 발생하는 문제를 해결하는 과정은 매우 보람찬 경험이었습니다.

배운 점	내용
API 활용	TMDB API를 통해 영화 데이터 요청 및 처리 방법 습득
CSS Flexbox	레이아웃을 정리하는 데 유용한 방법 이해
문제 해결	발생하는 오류를 해결하는 과정에서 성장

다른 내용도 보러가기 #2

마무리

제작한 카드리스트는 아직 완성되지 않았지만, 첫날의 진행 상황에 대해 정리해 보았습니다. 앞으로 영화 검색 UI를 구현하고, 영화 정보를 더 다양한 방식으로 제공할 수 있는 기능을 추가할 계획입니다.

두 번째 날에는 검색 기능을 추가하여 사용자 경험을 더욱 향상시키고자 합니다. 이 글이 다른 개발자들에게도 도움이 되기를 바라며, 계속해서 발전하는 모습을 보여드리겠습니다.

관련 영상

같이 보면 좋은 글