[항해99] NEFLIX Clone Coding (D+4)

고정원·2021년 4월 7일
0

2021.04.06

expor할때 default이냐 아니냐에 따라 { }로 들어가냐 마냐
import axios, { _baseURL } from "../shared/axios";

<생각하면서 따라하기>
1. 처음에 나는 Browse에 LocoRow랑 PosterRow를 따로 컴포넌트로 만들어서 넣어주면 되겠구나 생각했는데,
그것보다는 LocoRow 하나에 imgUrl 형태에 따라서 style만 다르게 (styledComponent) 주면 더 좋았다.
2. backdrop
img와 poster를 어떻게 구현할까?
img가 더 많으니까
로그인헤더 분기 했을때처럼 img일때는 img_url받아오고, poster일때는 poster_url로 받아오자. 또는 삼항연산자 사용하기

*JSX 내부의 자바스크립트 표현식에서 if문을 사용할 수 없다.
그래서 조건에 따라 조건부렌더링이 필요할 때는,
1. JSX밖에서 if문을 사용해서 사전에 값을 설정한다.
2. { }안에 조건부 연산자_ 삼항연산자를 사용한다.

return( 
...

<ImgWrap>
        {movies.map((movie) => {
          if (movies.length > 0) {
            return (
              <span>
                {movie.poster_path != "" && Poster ? (
                  <Modal {...movie} Poster isRow />
                ) : movie.backdrop_path != "" ? (
                  <Modal {...movie} isRow />
                ) : (
                  ""
                )}
              </span>
            );
          }
        })}
      </ImgWrap>
      ...
    });

[멘토링]
Q1. Trailer 와 TrailerTitle를 한 컴포넌트로?
A1. 상태값 관점에서 컴포넌트를 분리할지 말지 고민해보기
상태값 => 배경, 정보 한번에 가져오는 게 좋다

Q2. 필요한 데이터 = original.movies인데 여러개의 컴포넌트에서 각자 또 불러오면 컴포넌트 개수만큼 불러오니까, 어떻게 한 번만 불러올 수 있을까?

A2. 일단 개발하고! 그 후에 재사용이 가능할까? 고민해보기
어떻게 공유할수있을까? useContext이 있는데
store에 있으면 다 넣을 수 있지! 근데 우리는 아마 redux store로

Browse.js
1. Trailer + TrailerTitle => Trailer 하나로!
2. 상세모달
2.1 Trailer 참고해서 최대한 활용하기
2.2 박스사이즈 생각말고 나중에 패딩/마진으로 사이즈조절해서 가운데정렬

Modal 개념 이해하느라 엄청 고생했다... 아직도 아리송해... 주여

profile
해결문제에 대해 즐겁게 대화 할 수 있는 프론트엔드 개발자

0개의 댓글