결과 각 포스터에 나오던 평점을 점수에 맞게 별 모양으로 출력되도록 하였다. Detail 페이지에 나오는 평점을 평점 점수에 맞게 별 모양으로 출력되도록 하였다. Star Rating npm i react-star-ratings을 활용하여 만들었다. 해보려고 이런 저런 시도를 하다가, 잘 만들어진 라이브러리가 있어서 이용하였다. 설명이 잘 되어있으니 참고하여 필요에 맞게 사용하면 될 것 같다. https://www.npmjs.com/package/react-star-ratings react-star-ratings A customizable star rating component for selecting x stars or visualizing x stars www.npmjs.com 수정 포스터 상단에 [..

결과 영화, TV 프로그램에 Detail Page를 만들어 세부 내용을 나타내 주었다. Route path를 "/movie/:id" , "/tv/:id"로 지정해 주었다. 영화는 IMDB 링크를 연결하였고, TV 프로그램은 각 Homepage와 연결하였다. 계획 이번에 해결하지 못한 평점을 ★7 이 아닌 ★★★☆☆ (star rating) 형태로 나타낼 예정이다. 포스터 상단에 [기본 정보 / 무비 클립 / 시즌 정보]를 클릭하면 각각의 내용을 보여주도록 할 예정이다. 느낀 점 class component로 한번 했던 내용이라 비교적 쉽게 하고 있다. function component로 다시 만들면서 코드의 길이가 줄어드는 것을 느끼고 있다. 만들면 만들수록 추가해보고 싶은 기능들이 너무 많아서 행복하면..

결과 [ 홈 / TV 프로그램 / 영화 ] Page에 데이터를 출력하였다. 제목, 날짜, 평점은 포스터 이미지에 hover 상태에만 출력되도록 하였다. 코드 구조 axios.create , axios.get을 통해 반복을 줄임 사용할 api를 함수 형태로 지정 api.js로부터 함수를 불러와 원하는 데이터를 Poster.js에 props 형태로 전달 데이터를 화면에 보여줌 API를 불러오는 동안에 보이는 화면 전체적인 배치를 담당 API axios를 사용하여 TMDB API를 불러옴 The Movie Database (TMDB) Welcome. Millions of movies, TV shows and people to discover. Explore now. www.themoviedb.org 계획 각 ..

결과 Header 부분을 완성 하였다. [ 홈 / TV 프로그램 / 영화 ]로 분류 하였고 각각 Router를 이용해 경로를 지정해주었다. createGlobalStyle로 GlobalStyle을 설정하였다. jsconfig.json을 사용하여 절대경로로 지정하였다. [JavaScript] import (상대경로 → 절대경로) path 설정 방법 절대 경로 설정 방법 프로젝트 최상위 폴더(root)에 jsconfig.json 파일을 추가한 뒤 아래 코드 입력 { "compilerOptions": { "baseUrl": "src" }, "include": [ "src" ] } 경로 (Path) 문서, 파일, 그림 등의 위.. shin1303.tistory.com Header npm i styled-comp..

서론 노마드 클론 코딩 React 챌린지에서 Class Component로 영화 프로그램을 만들었는데, 이를 function Component로 다시 만들면서 추가하고 싶은 기능들을 추가할 예정이다. 계획 기능적인 부분은 계속 추가할 예정이다. 일정 9월 19일까지 계획 중이다. 기능 포스터 슬라이드 기능. 스크롤을 통해 데이터 계속 불러오는 기능. Home 화면에 간단한 설명과 인기 있는 Movie, Tv 프로그램. function component로 구현. 여러 애니메이션 적용. API TMDB API를 사용하여 Movie, TV 프로그램을 불러올 예정이다. 목표 Class component로 작성했던 코드를 function component로 다시 작성하면서 hook에 대한 활용 능력과 각각을 비교..

서론 큰 이유 없이 둘을 혼용하여 사용하고 있다는 것을 느끼고, 둘의 차이를 비교하여 내 코드에 적용하기 위해 정리를 하게 되었다. Default Export Default Export는 딱 한개만 default export 할 수 있기 때문에 '메인'이라고 할 수 있는 것을 export 하는 것이 좋다. object, function, class 등이 될 수 있다. // import import DefaultValue from "./MyDefaultValue"; // export const DefaultValue = () => {} export default DefaultValue Default Export 특징 import 시 원하는 변수명을 지정해줄 수 있다. // import import Defa..