프로젝트
1.[개인 프로젝트] 1. the moviedb API 생성하기
API key를 기반으로 the movie DB API 에 통신을 시도한다. 1\. https://www.themoviedb.org 로 이동2\. 로그인 후 API_KEY 발급프로필과 설정 -> 설정 -> APIAPI 요청 예 를 참고하여 서버 요청을 보내면
2.[개인프로젝트] 2. Axios 인스턴스 생성 및 요청 보내기
Axios : 브라우저, node.js를 위한 Promise API를 활용한 HTTP 비동기 통신 라이브러리쉽게, BE-FE 간 통신을 위한 라이브러리 이다.fetch의 단점은 응답 데이터를 json으로 변경한 뒤 작업을 해야한다. axios는 응답 데이터를 바로 j
3.[개인프로젝트] styled Component(css 다지기 1.)
NavWrapper : Nav 컴포넌트의 최상위 styled componentsemantic tag : navposition : fiexd 를 작용하여, Nav가 고정되도록 설정z-index : 3 / 네비게이션 컴포넌트가 최상단으로 고정되도록 설정display: fl
4.[에러핸들링] styled component 전역 스타일링(Global Style)
App Component에 전역 스타일링을 다음 과 같이 하려고 한다.Styled Component 에서 전역 스타일링을 하기 위한 방법으로 새로운 Styled Component A를 만들어 최 상위 컴포넌트로 만들면 되지 않을까 예상했지만, 권장사항이 아니었다.컴포넌
5.[개인프로젝트] API 호출(1)
Banner 컴포넌트에서 배경 이미지를 사용하려고 한다.사용될 이미지 소스는 The Movie DB API 에서 받은 데이터를 사용할 것이다.API 요청을 위한 Axios 인스턴스를 생성하여 재사용성을 높이려 한다. Banner 컴포넌트가 랜더링 될 때, Axios 인
6.[개인프로젝트] styled-component 외부 url : new URL vs props
배너 이미지 사용하기 배너 포지션 사이즈 문제 발생 styled-component 에서 background-image 에 외부 url을 전달 할 때 다음과 같은 에러가 발생했다. > TypeError: Failed to construct 'URL': Please u
7.[개인프로젝트] 비디오 배너 생성(Iframe 컴포넌트)
목표 the movie DB API로 받아온 영화 데이터 중 비디오 데이터를 배너 컴포넌트에서 재생하려고 한다. 비디오 데이터가 있을 경우, 배너에 Play 버튼이 활성화 된다. 해당 버튼을 클릭하여, 비디오를 재생한다. 방법 Play 버튼을 클릭하면, 기존의 배너
8.[개인프로젝트] Category Component
배너 컴포넌트와 margin-top: 30pxgrid로 배치하여, 5개의 컨텐츠가 25px 간격으로 동일한 비율로 공간을 차지하게 한다.768px 이하로 크기가 줄어들 경우, 1개의 컨텐츠만 공간을 차지하게 한다.Wrap Styled Component에 스타일링을 해서
9.[개인프로젝트] (에러핸들링) Row Component useEffect 경고( React Hook useEffect has a missing dependency eslintreact-hooks/exhaustive-deps)
태마 별로 영화를 나열 하기 위한 Row Component를 설계한다. 1) trending Now 2) Top Rated 3) Action Movies 4) Comedy Movies 모든 Row Component 의 UI는 같으므로, 재사용
10.[개인프로젝트] 상세 영화 정보 모달 만들기(1)
영화 상세 정보 모달 생성 Row 컴포넌트 내에서 영화를 클릭하면 해당 영화의 상세정보 페이지를 모달로 노출시키고자 한다. 이를 위해, 첫번째로 Row 컴포넌트에서 해야할 작업과 두번째, Row 컴포넌트에서 props로 전달 받은 영화 정보를 토대로 모달 컴포넌트에서