리액트 설치하기
create-React-App 을 사용해서 리액트를 설치한다.
이렇게 하면 Babel이나 Webpack 설정이 이미 다 되어있기 때문에
많은 시간이 걸리지 않고 리액트 앱을 시작할 수 있다.
The Movie DB API 생성하기
-
The Movie DB Website로 이동
https://www.themoviedb.org/
-
가입 후 로그인 & API_KEY 받기
API Key
34039c63967aacbc2429413a1757fbcf
- Text Editor에서 the MovieDB API를 위한 설정
The Movie DB API 요청을 위한 Axios 인스턴스 생성 및 요청 보내기
Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러이다.
쉽게 말해서 백엔드랑 프론트엔드가 통신을 쉽게 하기 위해 Ajax와 더불어 사용한다.
영화 정보 좀 보내줘 -> 비동기 요청
*Axios 사용 방법
axios 모듈 설치 npm install axios --save
axios.get('https://api.themoviedb.org/3/trending/all/week')
// axios.get('경로') -> 요청을 주고 영화 정보를 받아올 수 있다.
*Axios 인스턴스화 하는 이유
중복된 부분을 계속 입력하지 않아도 되기 때문이다.
*Axios 인스턴스 만드는 순서
-
인스턴스 생성할 폴더 파일 생성
-
axios.js
반복되는 부분
- request.js
다른 부분(반복X)
넷플릭스 애플리케이션 전체 구조 생성하기
네비게이션 생성하기
*Nav 컴포넌트 생성 후 Import
Nav.js
rfc + tab
App.js 필요 없는 부분 삭제
*UI 완성하기
Nav.js
<nav> 태그는 다른 페이지 또는 현재 페이지의 다른 부분과 연결되는 네비게이션 링크(navigation links)들의 집합을 정의할 때 사용한다.
- 개발자 도구 이용해서 이미지 경로 얻기
- 구글링해서 찾을 경우 새 탭에서 이미지를 연 후 경로 가져올 수 있다.
*스크롤 시 NavBar 색깔 변경
컴포넌트 안 쓸 때는 등록한 리스너를 제거해줘야 된다.
⚠️백틱 오타 주의
element style에 heght: 140vw를 주면 다음과 같이 스크롤을 내릴 때
네비게이션 바가 검정색으로 변한다.
*CSS
이미지 배너 생성하기
*배너로 사용할 이미지 정보 가져오기
Banner.js
rfc + tab
*자바스크립트로 랜덤 숫자 가져오기
Math.floor(Math.random() * max);
📍async, await
가장 최근에 나온 비동기 처리 패턴으로, 기존의 콜백함수와 프로미스의 단점을 보완
- 함수앞에 async를 붙이면 해당 함수는 자동으로 프로미스를 반환
- 비동기로 처리되는 부분에 await를 붙이면 해당 프로미스가 끝날때까지 기다린다. (동기적으로 처리)
- await은 async가 붙은 함수 안에서만 사용 가능
api 폴더에 있는 requests 가져오기 -> 자동완성
App.js 에 Banner.js import 해주기
axios.js에서 만든 instance를 사용해야 하므로 모듈 axios만 쓰면 안된다.
await을 쓰지 않으면 pending 상태가 된다.
request 안에 20개의 영화 정보가 있음을 확인할 수 있다.
*UI 생성하기
css 속성 안들어감 -> App.css의 속성과 충돌 다 지워줌
⚠️ 실수
1. 백틱
2. css 속성이 적용이 안돼서 계속 고민했는데 css 파일을 import 안해줬다.
3. 언더바 개수 실수
*CSS 붙여 넣기
코드 복붙함
*설명글 100자 이상이면 자른 후... 붙이기
Styled Component
Css-in-JS라고 하는 Javascript 파일 안에서 CSS를 처리 할 수 있게 해주는 대표적인 라이브러리이다.
리액트는 css를 처리하는 여러 라이브러리가 있는데 이게 많이 사용된다.
*설치 방법
# with npm
npm install --save styled-components
# with yarn
yarn add styled-components
Styled Component 를 이용한 비디오 배너 생성하기
*Play 버튼 클릭 시 비디오로 전환
Banner.js
if ~ else 문에 넣어주기
play버튼 클릭하면 다음과 같은 결과가 나온다.
*Styled Component를 이용한 UI 생성
- 컨테이너
- Iframe
비디오 삽입
-컴포넌트는 항상 대문자로 시작한다.
아이프레임은 HTML Inline Frame 요소이며 inline frame의 약자다.
효과적으로 다른 HTML 페이지를 현재 페이지에 포함시키는 중첩된 브라우저로 iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불러와서 삽입 할 수 있다.
영상 재생이 될때가 있고 key 오류가 뜨면서 안될 때가 있는데 이는 모든 넷플릭스 영화 id에 영상 key값이 없어서 그런 것 같다.
