6주차 미션 : nextJS로 netflix 클론코딩 - 2

이번 미션은.. 지난주 netflix 프로젝트 업그레이드 버전!!

 

이번에 구현해야 할 것은 다음과 같았다.

1. 동적라우팅을 이용한 상세페이지 이동

2. 검색페이지에서 검색어를 입력하면 실시간으로 결과화면 반환

 

그럼.. 각각 어떻게 구현했는지 알아보자!!!!

 

1. 동적라우팅을 이용한 상세페이지 이동

동적 라우팅이란?? 

/detail/[id].tsx 와 같이 [ ] 로 감싼 파일명을 정의해준 후,

link를 이용해서 'detail/12345' 와 같은 주소로 이동하면,

nextJS가 알아서 query.id 에 12345 를 담아서 /detail/[id].tsx 화면을 띄워준다!!!

 

한마디로, 내가 /detail/[id]의 주소를 따로 지정해주지 않아도 /detail/[임의의어떤값] 으로 이동하고 싶어하는 페이지가 있다면

알아서  /detail/[id]로 이동해준다는 것이다!!!

 

난 home -> detail / search -> detail로 이동하기 위해 다음과 같은 코드를 짰다.

 

home.tsx

// randomId 를 가진 영화포스터를 메인에 띄워준 후 클릭하면 페이지 이동

<Link href={{ pathname: `/detail/${upcoming.results[randomId].id}`}}>
	<MainImg src={`${imgPath}/${upcoming.results[randomId].backdrop_path}`} />
</Link>

 

detail/[id].tsx

// getServerSideProps를 이용해 가져온 detail의 사진을 보여줌.
export default function Detail({ detail }: any) {
  return (
    <div className={styles.container}>
      <Img src={`${imgPath}/${detail.backdrop_path}`} alt="poster" />
      {/* ... */}
    </div>
  );
}

// home에서 보내준 query.id를 통해 데이터 fetch 
export const getServerSideProps = async (context: any) => {
  const movieId = context.query.id;

  let res = await fetch(`${api}/movie/${movieId}?api_key=${apiKey}`);
  const detail = await res.json();

  return { props: { detail } };
};

 

 

2. 검색페이지에서 검색어를 입력하면 실시간으로 결과화면 반환

첫 화면은 getServerSideProps 를 이용해 현재 가장 인기있는 영화들의 데이터를 가져와 보여주고

그 후에는 text ( 검색어 ) 의 값이 변경될 때마다 useEffect를 이용해서 실시간으로 fetch를 해서 가져온 정보를 보여줬다!

초간단.. 하지만 처음에는 초기값을 useEffect를 이용해서 가져오지 않고 setMovie(data.results)를 냅다 박아버려서 오류가 났었다..ㅎ

props로 가져온 정보는 바로 박으면 안되고 useEffect를 이용해서 박아야한다!! 기억하자⭐️

 

search.tsx

export default function Search({ data }: any) {
  const { text, handleChange, resetText } = useInput("");
  const [movieData, setMovie] = useState([]);
  
  // 첫 화면은 popular api 연결한 화면으로
  useEffect(()=>{
    setMovie(data.results);
  },[data])
  
  // 이후 text 받을 때마다 실시간으로 fetching
  useEffect(()=>{
    async function searchData (){
      let searchRes = await fetch(`${api}/search/movie?api_key=${apiKey}&query=${text}`);
      let searchDt = await searchRes.json();
      setMovie(searchDt.results)
      console.log("searchDt : ", searchRes);
    }
    if(text!='') searchData();
  },[text])
  
  return (
  // ...
  );
}

// 첫 화면 ( Popular api 연결 ) 은 ssr로 띄우기
export const getServerSideProps = async () => {
  const res = await fetch(`${api}/movie/popular?api_key=${apiKey}`);
  const data = await res.json();

  return { props: { data: data } };
}

 

마지막으로.. 항상 하는 Key Questions 정리!!

 

Key Questions

1. 정적 라우팅(Static Routing)/동적 라우팅(Dynamic Routing)이란?

 

(1) Static Routing (정적 라우팅)
Router(라우터)에게 필요한 정보들을 수동으로 사전 입력해야 한다. 
고정된 페이지로 라우팅되기 때문에 누가 언제 접속하더라도 같은 페이지로 라우팅된다.

(2) Dynamic Routing (동적 라우팅)
Routing Table(라우팅 테이블)에서 현재 상태에 따라 경로를 자동 조정하는 것이다. 
가변적인 페이지로 라우팅되기 때문에 실제 소스코드는 한 페이지지만 글 번호나 글의 id에 따라서 주소가 변경된다.
Next.js에서 동적 라우팅 시, 대괄호 안에 들어있는 문구는 변수의 기능을 한다.
라우터 객체를 이용해 이 변수의 값을 지정해줄 수 있으며, 이 변수는 문서 내에서 자유롭게 활용이 가능하다.

2. 성능최적화를 위해 사용한 방법

1. 내부 스타일시트 사용 : styled-component 를 이용한 내부 스타일링 
4. 중복 코드 제거 : 중복되는 값은 props를 이용 & 외부 컴포넌트로 분리하여 재사용
5. 필요한 함수만 가져오기 : 실행하지 않는 함수 정리
6. ssr 렌더링 : 사용자가 js이 렌더링 하기 전 볼 수 있게함

 

배포링크

https://next-netflix-16th-k7yg.vercel.app/

Netfilx

이번주 배포링크는 저번주와 같다!! vercel로 배포하면.. 변경사항이 연동되기 때문 ^~^

우짜지 저번주에 한 배포결과는 날아갔네..

그래도 저번주거보다 이번주 거가 완성도가 더 높다!! 오히려 좋아~