목록전체 글 (529)
안녕하세요
221018 메가박스 리액트 - 영화검색(2) TMBD 검색기능 구현
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..
221014 메가박스 리액트 - 영화검색(1) TMDB 데이터 받아오기
네이버 검색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..
221013 메가박스 리액트 - 극장 공지사항 테이블(table)
테이블 html 태그와 css를 정리합니다. 인라인 스타일의 문제점 {} === {}는 false이기 때문에, 리렌더링시에 인라인 스타일이 적용된 컴포넌트 / 일반태그가 다르다고 판단하여 돔을 새로 그리게 되어 불피요한 리로딩이 발생 style 속성의 재사용성이 떨어짐 [ 출처 ] 컬럼의 width에는 인라인 스타일을 적용하여 코드를 읽기 쉽게 하려고 했으나 리액트에서는 인라인스타일을 추천하지 않는다고 합니다. 하지만 인라인스타일을 함수로 만들어 전달을 하게되면 이 문제가 해결됩니다. const Table = () => { const colWidth = (px) => { const style = { width: `${px}px`, }; return ; }; 테이블 태그로 감싸는걸로 시작합니다. 태그에는 ..
221012 메가박스 리액트 - 리스트 4개만 출력하기
탭메뉴의 컨텐츠들을 컴포넌트로 만들어 스토어 페이지 첫 화면에 모두 볼 수 있도록 합니다. "더보기"를 누르면 해당 컨텐츠의 탭으로이동합니다. 현재 메가티켓 탭의 경우에는 5개 이상의 컨텐츠가 있는데, 본 페이지에서는 4개까지만 표시하기위해서서 컴포넌트에 props로 숫자 4를 전달합니다. 삼항연산자를 이용하여 num !== 4에 해당하는 경우엔 전체 리스트를 나타나도록 하고, 그렇지 않은 경우에는 리스트를 4개만 나타나도록 합니다. {num !== 4 ? ( 전체 {MEGAPICKDATA.length}건 ) : ( "" )} 다른 페이지에서도 같은 방식으로 삼항연산자를 이용해 조건에 따라서 전체 몇 건의 리스트가 있는지 나타나도록 합니다. {num !== 4 ? ( 전체 {MEGAPICKDATA.len..