안녕하세요

선택한 영화의 id와 같은 url 주소로 이동하도록 하여 영화를 소개하는 페이지를 만듭니다. 1. App.js 에서 Route로 list 페이지를 만듭니다. 영화의 id에 해당하는 페이지로 이동한다는 것을 알 수 있도록 path는 "/list/:id" 로 이름을 주었습니다. 2. Movie.js에서 영화데이터를 받아와 영화 목록을 보여줍니다. 영화의 이미지를 클릭하면 이동하는 주소를 영화데이터의 id로 지정해줍니다. return ( ex) http://localhost:3000/megabox-react/list/894205 해당 영화의 데이터의 id가 984205라면 위와 같은 url로 이동하게 됩니다. http://localhost:3000/megabox-react/list/894205 3. usePa..

스크롤바를 커스텀합니다. scroll이 적용된 영역에서 ::-webkil-scrollbar 에 관련된 css로 형태를 지정할 수 있습니다. .scroll { overflow-y: scroll; height: 450px; width: 100%; &::-webkit-scrollbar { width: 6px; /* 스크롤바의 너비 */ } &::-webkit-scrollbar-thumb { background: #555555; /* 스크롤바의 색상 */ border-radius: 10px; } &::-webkit-scrollbar-track { background: rgba(33, 122, 244, 0.1); /*스크롤바 뒷 배경 색상*/ } }

TMDB의 영화 데이터를 받아와 검색기능을 구현합니다. TMDB의 search API는 url에 query로 보낸 값과 일치하는 제목의 영화들을 가져옵니다. const { default: axios } = require("axios"); const url = "https://api.themoviedb.org/3"; const key = "KEY_VALUE"; const instance = axios.create({ baseURL: url, params: { api_key: key, language: "ko-KR", }, }); const category = { search: "search/movie?query=", }; export { instance, category }; 1. App.js 에서 get..

네이버 검색API와 영화진흥위원회 API를 이용하려다 보니 이미지가 작은게 불만이었습니다. 그러던 중 TMDB라는 영화나 드라마 데이터를 제공하는 API를 발견하고 이 API를 통해 영화 검색 기능을 구현하기로 합니다. 우선 영화 데이터를 받아오도록 합니다. 1. TMBD 사이트에 회원가입을 하고 api_key를 발행받습니다. https://www.themoviedb.org/settings/api 2. 기본 url과 받아온 api_key는 axios instance를 생성하여 설정합니다. const { default: axios } = require("axios"); const url = "https://api.themoviedb.org/3"; const key = "fd372a536c70d731cd66..