무비앱 인프런 강의 클론(1)

인트로

학교 동기들과 스터디를 만드는 스불재를 실천해 버렸습니다.

4월까지 각자 마음에 드는 클론 강의 듣고 애플리케이션을 완성하기로 했습니다. 

저는 인프런의 무비앱 시리즈를 선택하였습니다. 풀스택 맛이라도 보려고요.

 

Boiler-plate을 이용한 강의이기 때문에 초기 제공 자료에 로그인 기능이나 nav는 완성된 상태였습니다.

좀 아쉽지만 이 부분에 대한 강의도 있다고 하니 나중에 따로 찾아 듣기로 하죠.

 

그리고 이 강의가 나온지 꽤 되었기 때문에 감안하면서 들으려고 합니다. 

오늘 한 것

노드 환경 세팅 

node verison을 강의 세팅과 동일하게 해 주었습니다.

package.json에 대해 정확히 이해를 한 상태가 아니라서 그냥 강의에 맞추는 게 더 편하더라고요..

---

movie api를 사용하여 유명한 영화 가져오기

API를 사용하여 유명한 영화를 가지고 왔습니다. 

https://www.themoviedb.org api를 이용합니다.

  useEffect(() => {
    const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`;
    fetch(endpoint)
      .then((response) => response.json())
      .then((response) => console.log(response));
  });

가져온 결과

---

가져온 데이터를 이용하여 Main 화면에 유명한 영화 이미지 띄우기

  const [Movies, setMovies] = useState([]);
  const [MainMovieImage, setMainMovie] = useState(null);
  useEffect(() => {
    const endpoint = `${API_URL}movie/popular?api_key=${API_KEY}&language=en-US&page=1`;
    fetch(endpoint)
      .then((response) => response.json())
      .then((response) => {
        setMovies([...response.results]);
        setMainMovie(response.results[0]);
      });
  }, []);

가져온 데이터들은 모두 state에 넣어줍니다.

그 후 MainImage라는 컴포넌트를 하나 새로 만들었습니다.

function MainImage(props) {
  return (
    <div
      style={{
        backgroundImage: `url(${[props.image]})`,
        background: `linear-gradient(to bottom, rgba(0,0,0,0) 39%, rgba(0.,0,0,0) 41%, rgba(0,0,0,0.65) 100%), #1c1c1c`,
        height: "500px",
        backgroundSize: "100%, cover",
        width: "100%",
        position: "relative",
      }}
    >
      <div>
        <div
          style={{
            position: "absolute",
            maxWidth: "500px",
            bottom: "2rem",
            marginLeft: "2rem",
          }}
        >
          <h2 style={{ color: "white" }}> {props.title} </h2>
          <p style={{ color: "white", fontSize: "1rem" }}> {props.text} </p>
        </div>
      </div>
    </div>
  );
}

<MainImage
          image={`${IMAGE_BASE_URL}w1280${MainMovieImage.backdrop_path}`}
/>

이걸 이제 컴포넌트가 들어갈 위치에 넣어주기만 하면 될 줄 알았는데? api로 값을 가져오기 전에 페이지가 랜더링이 되면서 이미지 path를 가지고 오지 못합니다. (생각해보면 당연함) 다음과 같이 단축평가(&&)를 이용하여 해결할 수 있습니다.

  {MainMovieImage && (
        <MainImage
          image={`${IMAGE_BASE_URL}w1280${MainMovieImage.backdrop_path}`}
          title={MainMovieImage.original_title}
          text={MainMovieImage.overview}
        />
      )}

MainMovieImage에는 유명한 영화의 리스트 중 첫 번째 영화에 대한 정보가 들어있습니다. (영화 제목과 설명도 추가했습니다.)

 

여기까지 했을 때 사진과 같이 Main 화면에 이미지가 딱. CSS부분이 아쉽지만 이건 나중에 따로 고쳐보겠습니다.

굳

---

기억할 것

api값을 가져오기 전에 페이지가 랜더링 되어 오류가 발생한다! 이것은 단축평가를 통해서 해결할 수 있다!

 

---

막힌 부분

node 버전이 강의와 맞지 않아서 npm install부터 힘들었습니다.

npm install까지는 package.json을 수정하는 걸로 결판를 보았으나 npm run dev를 실행했을 때 문제가 있어...

결국 node 버전을 강의에 맞췄습니다. node 버전 맞춰주니 바로 성공했습니다.

 

Main 화면에 띄울 영화 이미지 데이터를 가지고 오지 못하는 상황이 잠시 있었으나 역시나 경로 문제였고요.. 사람이 잘못했다..

---

이제 자자..