✨ 배포시 라우팅 적용이 안됨.. /search, /movie 둘다 안들어가진다.
✨ vuetify 연동
✨ stylelint 연동
이미지 레이지 로딩 및 에러 처리
'tmdb/configuration'을 최초에 호출해서 기본 세팅하기
uetify 연동 => 간단한 UI 사용하기 위해서
'src/api/index.js'
: 각 API를 담당하는 인스턴스 생성
'src/api/movie.js'
: axios 인스턴스를 import해서 실제 요청을 보내는 함수를 정의하고 export하는 역할
// /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 };
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',
},
};
}
}
: ✨ 참고 글을 통해서 api 조회 성공/실패 시 return할 기본 구조를 정의했다.
해당 글에서는 타입스크립트를 사용해서 인터페이스를 정의했는데, 이번 프로젝트에서는 타입스크립트를 사용하지 않으므로 함수를 이용해서 각 성공 response, 에러 response를 처리할 계획이다.
return {
isError: false,
data,
};
return {
isError: true,
errorData: {
message: response?.data?.status_message || error.message || 'undefined error',
statusCode: response?.data?.status_code || 'undefined code',
},
};