학습 목표
- netflix를 만들어 보자고!!!!!
1. netflix-clone_1
: The Movie DB API Key 생성하기
가장 처음으로는 react-netflix-clone 최상위 폴더를 만들고 터미널에
요롷게 해당 디렉토리에 리액트 앱을 설치해준다.
넷플릭스를 만들기 위해선 우선적으로 영화 정보를 가져와야겠지??
그 곳이 바로 The Movie DB이고 API를 사용해서 가져올 것이다. 이때 중요한 것은 API Key 가 있어야 가져올 수 있다.
그렇다면 이 API Key는 어디서 가져올 것이냐!!
The Movie Database (TMDB)
Welcome. Millions of movies, TV shows and people to discover. Explore now.
www.themoviedb.org
오호... 이런게 다 있다.....
여기서 (회원 가입 후) 로그인하고 api key를 가져오면 된다.
흐앙 이렇게 설정에서
api key를 받도록 개인 정보 넣고 나면.. 키를 휘리릭!! 줌ㅋㅋ.... 아무래도 저작권.. 뭐 그런 것 때문인가???
좀 무서웟음 ㅎ..
이 키 값은 코드에서 이따 쓸 거기 때문에 킵!!!
이제 the movie db를 api를 통해 가져오는 방법에 대해 알아보자.
1. Get Movie By Latest
: 최근 영화를 가져올 때 사용
2. Get Movie Detail
: 영화의 상세 정보를 가져올 때 사용
3. Get Movie Reviews
: 영화의 리뷰를 가져올 때 사용
4. Get Treding
뭐... 이런 식으로 해서
이미지까지 추가해서 가져올 수 있다고 한다...
1. netflix-clone_2
: The Movie DB API 요청을 위한 Axios 인스턴스 생성 및 요청 보내기
Axios란 무엇인가?
: 브라우저, Node.js를 위한 Promise API를 활용하는 http 비동기 통신 라이브러리이다.
즉, 쉽게 말해서 백앤드와 프론트 앤드의 통신을 쉽게 하기 위해 Ajax와 더불어 사용한다고....한다.
지금 여기선!! The movie DB Api서버에 영화 정보를 달라고 프론트에서 Axios를 통해 말하고!!
The movie DB Api서버에도 마찬가지고 Axios를 통해 영화 정보를 프론트에 주는 것이지!! 히히.. 역시 쉬운게 최고
이렇게 Axios를 설치해보자.
그럼 이렇게 잘 설치된 것을 확인할 수 있다!!
이제 이렇게 설치한 Axios를 인스턴스화 할 것이다.
그 이유는 무엇이냐!! 위에서 api url를 가져오는 4가지 방법이 있었다.
이때 동일한 부분이 계속 중복되었기 때문에 이 부분을 계속 입력하지 않기 위해서 인스턴스화 하는 것이다.
어떻게 하냐면!!!
우선 src 폴더에 하위 폴더로 api를 만들고 axios.js와 requests.js 파일도 맹글러줌....
이제 axios.js에 공통되는 부분을 Axios 인스턴스로 만들어 주고 다른 부분만 requests.js에 넣어주면 된다!!
우선 axios를 import 해오고 axios의 create 메소드를 이용한다.
공통되는 url 부분을 baseURL로 쓰고 params에도 공통되는 부분을 적어준다.
여기서 아까 가져왔던 api key를 적어주고 우린 한국어로 작성할 것이기 때문에 언어를 한국어로 설정해줬다!!
이제 requests.js로 가서
요로콤시... 필요한 부분들의 달라지는 것들을 따로 작성해주면 준비 끝!!
1. netflix-clone_3
: 넷플릭스 애플리케이션 전체 구조 생성하기
구현하고자 하는 넷플릭스의 전체적인 구조는
Navigation Bar, Banner, Row, Footer로 이루어져 있다.
따라서 폴더 구성은 위와 같고
row에서 영화를 클릭했을 때 나오는 화면을 modal이라고 해서 MovieModal이라는 폴더도 만들어 놨다.
1. netflix-clone_3
: 네비게이션 바 컴포넌트 생성하기
우선 가장 상단에 있는 네비게이션 바부터 만들어 보자!!
Nav 컴포넌트를 생성하고
이를 App.js에 가져왔다.
이제 Nav 컴포넌트의 UI를 작성하자
우선 div 태그가 아닌 네이게이션 바니까 nav 태그를 사용했다.
내부에 img 태그를 두 번 사용하여 각각 넷플릭스 메인 이미지와 로그인 이미로 넣어줬다.
여기서 alt 속성은 이미지 내용과 같은 text를 작성하여 브라우저에게 이미지 내용을 전달하는 역할을 한다.
그리고 넷플릭스 메인 이미지를 클릭하면 화면이 리로드 되도록 하기 위해 window.location.reload()를 사용했다.
이렇게 넣어준 이미지들의 css도 작성해보자
우선 이렇게 작성했는데.. 만들다가 수정될 것 같은 느낌이 크게 든다^^ 하하
이제 스크롤 시 네이게이션 바의 컬러가 변경되게 해보자
흠흠 우선 useState와 useEffect를 사용하기 때문에 react에서 import 해옴!
좌ㅏ... 그리고 스크롤 시 네비게이션 바의 컬러가 바뀌도록 show라는 state를 만들어줬고 기본 값은 false다.
이제 useEffect에서 addEventListener와 removeEventListener 를 등록하는데... 둘 다 scroll 이벤트를 할 때 등록해주는 것이다!!
addEventListener에는 우선 화면에 잘 구현되는지 확인하기 위해 콘솔을 찍어줬고
window.scrollY가 50 이상이면 setShow를 true로 해서 네이게이션 바의 컬러가 변경되게 해주고 그렇지 않은 경우는 false로 기존 컬러로 돌아오게 한다.
return 문에서는 removeEventListener를 사용해서 등록한 스크롤을 없애주는 것이다..!
그리고 dependency 부분은 지금 필요하지 않아서 빈 배열로만 넣어줬다. (이 부분을 없애면 리렌더링 될 때마다 실행된다고 한다!!)
자세한 useEffect 설명은 아래를 참고하자... ㅎㅎ
+) useEffect 함수는 컴포넌트가 렌더링 될 때마다 특정 작업를 실행하는 리액트 훅이다.
인자로 function(실행하고자 하는 함수)과 deps(배열 형태. function을 실행시킬 조건)
컴포넌트가 mount될 때(나타날 때)는 useEffect 내부에 그냥 작성하면 되고 deps를 생략하면 컴포넌트가 렌더링 될 때마다 useEffect가 실행된다. 한 번만 실행하고 싶다면 deps에 빈 배열!!
컴포넌트가 unmount되었을 때(사라질 때)는 return문에 작성하면 된다. 이를 cleanup이라고 한다.
콘솔로 찍어준 부분을 확인하기 위해
이렇게 height를 주면
스크롤 바가 생김!!! ㅋㅋ....
그래서 스크롤 하면
이렇게 scrollY를 볼 수 있당...
이제 스크롤이 50을 넘으면 바탕이 검정색! 아니면 투명으로 해주자
Nav.js의 nav태그의 classname을... nav라고는 유지하되 show state가 true인 경우에만 이미 구현했던 nav_black css가 작동하도록 써준다!!!
(이렇게 쓸 수가 있구나...? 모지 자바스크립트에서 쓰는건가 모야모야 나 왜 이거 쓸 줄 몰라....)
그러면 스크롤이 50을 넘어갈 때
이렇게 블랙으로 바뀜ㅠㅠ 흑흑 이렇게 해서 네비게이션 바 구현 끝....
츄하....
'React > Netflix 앱' 카테고리의 다른 글
| React_netflix-clone_6 (0) | 2023.02.07 |
|---|---|
| React_netflix-clone_5 (0) | 2023.02.07 |
| React_netflix-clone_4 (0) | 2023.02.06 |
| React_netflix-clone_3 (1) | 2023.02.06 |
| React_netflix-clone_2 (1) | 2023.02.05 |