React_netflix-clone_2

 

이전 내용

 

• netflix-clone 2에서 포스팅 내용 중 마지막에 네비게이션 바를 만들면서

이렇게 삼항 연산자 쓰는 법.... 요상하다고 했었음.....

 

 

https://velog.io/@rlaghwns1995/JavaScript-%ED%85%9C%ED%94%8C%EB%A6%BF-%EB%A6%AC%ED%84%B0%EB%9F%B4

[JavaScript] 템플릿 리터럴

 

규진 오빠가 보다 답답했는지 알려줌.. 호호^_^...

이렇게 또 배워갑니다... 따흑

 

---

 

2. netflix-clone_1

: 이미지 배너 생성하기

 

 

 

이미지 배너를 생성하기 위해 먼저 배너로 사용할 이미지 정보를 가져오자!!

 

 

우선 movie state를 만들고 useState에는 여러 movie data를 넣어줄 것이기 때문에 빈 배열을 초기값으로 넣었다.

 

 

그리고 useEffect를 사용해서 (이미지 배너는 화면이 띄워지면서 바로 나오니까!!) fetchData 함수를 콜했다.

 

 

 

이제 이 fetchData 함수를 작성하좌

흠흠 우선 가장 눈에 낯선 async await 이 뭔지 부터 알아야겠지!!

async와 await 문법을 사용하면 promise를 더 편하게 사용할 수 있다.

 

우선, async는 함수 앞에 위치해서 async를 붙이면 해당 함수는 promise를 반환한다.

이 async 안에서는 await을 사용할 수 있는데 이는 promise가 처리될 때까지 말 그대로 함수 실행을 기다린다.

 

여기서 await을 하는 이유는 우리가 영화 정보를 얻으려고 요청을 하면 거기서 받은 요청을 처리하는 동안 시간이 걸리기 때문에.. 요청한 정보가 오면 처리를 한 다음에 request에 들어가기 위해!! await을 쓰는 것이다. (어우 말이 길다 길어)

 

작동하는지 보려고 콘솔 찍어놨고,,

 

axios.get을 통해 movie db에 접근하고 requests.fetchNowPlaying을 가져온다. 이는 requests.js에 있다.

 

따라서 이렇게 import를 해오고 (경로 주의!!)

 

 

App.js에서 Banner를 import 해와야 함!! 잊지 말귀...

 

 

 

그러면

이렇게 데이터를 잘 가지고 오는 것을 확인할 수 있다!!!

 

 

---

 

 

이제 받아 온 여러 개의 영화 중 하나를 잡아야겠지?? 화면을 렌더링 할 때 랜덤으로 바뀔 거고 한 화면에서 배너에는 하나의 영화만 떠야 하니까!

 

 

따라서 movieId는 request.data.results의 배열로부터 가져온다.

왜 냐 면

 

이렇게 아까 가져온 영화들을 data의 results에 속해있고 영화마다 각각 id를 가지고 있는 것을 확인할 수 있음!!

 

영화들 중 랜덤으로 하나를 선택할 것이니까 Math.random함수를 쓰고 가지고 온 총 영화의 갯수를 위해 length 사용!

마지막에 배열에 .id를 작성하면 원하는 영화의 id를 가지고 오게 되는 것이다!!....휴우.....

 

 

---

 

이제 하나의 영화를 선택했다면 해당 영화의 상세 정보도 가지고 와야한다.

 

 

그래서 이렇게 써 줌.... 상세 정보가 params에 들어간다고 함.... 받아오는 response에 비디오도 받아오는 것이다..!

 

저러고 콘솔을 찍으면

이렇게 나온당... 여기 data 안에 moviedetail들이 있다.. 이 정보가 필요하기 때문에 이 정보들을

 

이렇게 data : movieDetail로 써주면 이 movieDetail 안에 위의 정보들이 다 들어가게 되는 것이다.

 

그리고 setMovie를 해주면 movie state 안에 이렇게 선정한 영화의 data 정보들이 들어가게 된다....

 

흐어어 복잡하군...

 

 

---

 

 

이제 UI를 작성해보자

 

 

가장 먼저 헤더 부분은... 이렇게 작성했다.

 

배너의 배경 이미지는 가지고 온 영화의 속성 중 backdrop_path를 사용함!!

 

 

헤더 내부에 div 태그를 사용해 배너의 내부 요소들을 작성했다.

영화마자 title, name, original_name 이렇게 세 가지 요소로 각기 다르게 가지고 있을 수 있기 때문에 셋 중 하나를 가지면 해당 영화 명을 h1 태그로 보여주고

두 개의 버튼도 달아 줌!! 그리고 overview까지..... 그냥 그 data에 있는 속성들... 필요한 것을 써줬다~ 뭐 이거지...

 

 

마지막으로

스타일링을 주기 위한 div까지 추가로 작성해줬다.

 

 

 

그러면 이렇게 영화 내용이 잘 나옴ㅎㅎ...

 

 

css는...길어서 일단 생략하면 하하 App.css 부분은 지워놔야 안 먹혀서 Banner.css가 먹힘....

 

 

그래서 이렇게만 해두고....

 

 

화면을 확인하면.... 이따구임

하 근데 강의 코드랑 정말 다를게 없는데 왜 난 이따구야 정말정말정말 돌아방구 환장ㅜㅜㅠㅠㅜ

흐퓨퓨퓨퓨......

 

 

 

강의 코드로 하면 잘 나옴... 짜증나...... 하ㅠㅠㅠ

 

 

우선 위의 코드들에서 추가된 부분은 저렇게 영화 상세 정보들에서 100자 이상 넘어가면 ...로 바뀌도록 해주는 것이다.

 

 

 

이렇게 truncate라는 함수를 만들어서 인자로 str 과 n을 받는다.

str의 길이가 n보다 크다면 substr 메소드를 이용해서 n만큼 잘라내고 뒤에 ...을 붙이는 방식이다.

n보다 크지 않다면 그냥 str를 return한다.

 

따라서

decription 부분에... 이렇게 truncate함수를 쓰고 str에 overview를, n에 100을 넣어주면

위의 귀여운 장화 냥이처럼 ...이 나오는 것을 확인할 수 있다.

 

 

하... 진짜 이거 이미지 배너 개짜증난다

콱씨...... 24분 강의를 4시간 넘게 잡고 있으니 화가 나~ 안 나~ ㅎㅎ....ㅠㅠ

 

 

 

 

---

 

2. netflix-clone_2

: Styled Component를 이용한 비디오 배너 생성하기

 

 

Styled Component란 Css-in-JS라고 하는 자바스크립트 파일 안에서 CSS를 처리할 수 있도록 해주는 대표적인 라이브러리이다.

 

요롷게 설치함

 

이 styled component를 이용해서 비디오 배너를 만들어보자.

 

이전에 네비게이션 바에서 만든 play 버튼을 클릭하면 비디오로 전환되도록 해줄 것이다.

 

 

 

우선

play 버튼을 누르는 state를 isClicked로 생성했다.

 

play 버튼을 클릭하면 setIsClicked를 true로 바꿔주고

 

 

if 문에 isClicked가 false인 경우 지금까지 만든 return 문을 넣어주고 else 문에 이미지 배너가 나오도록 써주면 된당~!!

 

 

 

---

 

 

설치했던 styled component를 이용해서 UI를 작성해보자.

 

요로콤시 else 문에 Container와 HomeContainer 태그를 만들고

 

 

styled components는 이렇게 씀!! 태그를 컴포넌트로 만들고(첫 글자는 무조건 대문자여야 함).. styled.뭐시기 ` ` 요롷게.....

 

 

이제 비디오가 나오게 하려면 Iframe을 사용해야한다.

Iframe은 html inline frame 요소이며 inline frame의 약자이다.

 

이는 효과적으로 다른 html 페이지를 현재 페이지에 포함시키는 중첩된 브라우저로

iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불러와서 삽입할 수 있다.

 

 

 

여기서는 유튜브 링크를 가져와 사용할 것이다.

 

 

HomeContainer 태그 내부에 Iframe 태그를 써서.. 저렇게.. 하면 되는데ㅠㅠㅠㅠ흐앙

 

우선 유튜브에서 가져오니까 src 부분에 유튜브 링크의 동일한 부분은 embed까지 작성하고 그 뒤의 동적인 부분은 우리의 해당 영화의 id 값을 넣어줘야 한다.

이때 movie.videos,results[0].key인 이유는

 

콘솔을 찍었을 때

요롷게!! 여기에 들어있는 key 값을 쓸 것이기 때문이당.... ㅎ...

그리고 뒤에 이어지는 부분은

이렇게 생김... 하 선생인간 시간에 쫓긴건지 왜 설명을 제대로 안 해주냐!!!!

뭐... 띄어쓰기 하면 안 먹히는 걸 보아하니... autoplay를 1로 주면 play 눌렀을 때 자동 재생 되는 것 같고... 처음에 mute로 해놓고.. loop는 반복 재생에... 뭐 그런 것 같다!!!

 

 

 

그리고 이 Iframe의 style은

이렇게 씀.... ㅎ하하하

모르는 것 투성이... 바보 멍청이....

 

1. z-index

: 레이어의  z축 위치는 렌더링 될 때 쌓임 순서를 결정하는 하나의 정수로 결정된다. 큰 정수는 사용자에게 가까운 것을 의미한다..

값을 따로 설정하지 않으면 디폴트 값은 0이고 만약 a 박스에 1을 넣으면 a 박스가 다른 박스들 보다 제일 앞에 나오는 것.. 숫자가 클수록 더 앞에서 보인다. 왓더 근데 지금처럼 음수도 사용할 수 있음;;;

 

2. opacity

: 요소의 불투명도를 설정한다. 오 신기함

 

3. ::after

: 아니 여기서는 &::after임 &는 왜 써주는거지......

우선 가상 요소는 html 태그로 표현하기 어려운 콘텐츠의 특정 부분만 동적으로 선택하거나, html 콘텐츠 내용을 변경하지 않고도 선택한 요소 앞 뒤에 새 콘텐츠를 추가하는 기능이다.

이건 어느정도 느낌쓰로 알고 있었음.... 훔냐링...

 

 

 

암튼 저렇게 쓰면

 

 

 

 

비디오가 있는 경우엔 이렇게 play 누르면 잘 나온당..

꺄 아바타 다시 보고싶당~~~>.< 뿡뿡뿡 나 저 친구가 젤 좋았는데 이름 모더라