2021.06.15

브랜치: main-page

🎉 찾아볼 것 또는 TODO

1. ✨ 배포시 라우팅 적용이 안됨.. /search, /movie 둘다 안들어가진다.

2. ✨ vuetify 연동

3. ✨ stylelint 연동

4. 이미지 레이지 로딩 및 에러 처리

5. 'tmdb/configuration'을 최초에 호출해서 기본 세팅하기

6. uetify 연동 => 간단한 UI 사용하기 위해서

오늘 할 일

1. 메인 페이지 > 빌보드 영역 데이터 바인딩 ✔

🎉 TIL

😊 '영화 기본 정보 API' 연동

0. 폴더 구조

• 'src/api/index.js'
  : 각 API를 담당하는 인스턴스 생성

• 'src/api/movie.js'
  : axios 인스턴스를 import해서 실제 요청을 보내는 함수를 정의하고 export하는 역할

1. 영화 API를 위한 axios 인스턴스 만들기

• URL: 'https://api.themoviedb.org/3/movie/' 에 해당하는 요청을 담당하는 axios 인스턴스

// /src/api/index.js
import axios from 'axios';

const TMDB_ENDPOINT = 'https://api.themoviedb.org/3/';
const API_KEY = '5c641d77de2e4b7554d8ebbf14934986';

/**
 * movie API 요청 인스턴스
 * https://api.themoviedb.org/3/movie/
 */
const movieInstance = axios.create({
	baseURL: TMDB_ENDPOINT + 'movie/',
	params: {
		api_key: API_KEY,
        	language: 'ko-KR',
	},
});

export { movieInstance };

2. '영화 기본 정보'를 조회하는 함수 만들기

• URL:'https://api.themoviedb.org/3/movie/{movie_id}' 요청을 보내는 API 함수

import { movieInstance } from './index';

/**
 * 영화에 대한 기본 정보 가져오는 함수
 * https://developers.themoviedb.org/3/movies/get-movie-details
 * @param {Number} id : 영화 아이디
 */
export async function getMovieDetail(id) {
	try {
		const { data } = await movieInstance.get('' + id);

		return {
			isError: false,
			data,
		};
	} catch (error) {
		const response = error.response;

		return {
			isError: true,
			errorData: {
				message: response?.data?.status_message || 'undefined error',
				statusCode: response?.data?.status_code || 'undefined code',
			},
		};
	}
}

3. API response 처리

: ✨ 참고 글을 통해서 api 조회 성공/실패 시 return할 기본 구조를 정의했다.
해당 글에서는 타입스크립트를 사용해서 인터페이스를 정의했는데, 이번 프로젝트에서는 타입스크립트를 사용하지 않으므로 함수를 이용해서 각 성공 response, 에러 response를 처리할 계획이다.

• 성공 시 리턴하는 객체

return {
    isError: false,
    data,
};

• 에러 발생 시 리턴하는 객체
  : catch(error)의 인자로 들어오는 error.response를 통해서 axios가 생성해주는 error response 객체에 접근할 수 있다.
  : API 문서에 정의된 '401, 404' 에러 코드시 전달되는 데이터를 'error.response.data'로 접근할 수 있다.

return {
    isError: true,
    errorData: {
        message: response?.data?.status_message || error.message || 'undefined error',
        statusCode: response?.data?.status_code || 'undefined code',
    },
};