유튜브 클론코딩 - ③

엘리님의 강의를 보면서 여러가지를 만들어보았다. 비록 따라해보는 것이지만 어떻게 받아오고 출력하는지 이따금 다시 공부하게 되는거 같다. 되게 어려웠던 것 같은데 엘리님은 너무 쉽게 하신다....내공 파워는 어쩔 수없다. 내가 못하는 것이지만 그래도 할 수 있다. 이렇게 작성하다 보면 어느샌가 내것이 되지 않겠는가??
서두가 너무 길었다. 오늘은 썸네일을 불러오고 검색창을 만들어 검색했을 때 검색결과를 보여주는 것까지 해봤다.

1. 유튜브 썸네일(이미지) 및 타이틀 갖고 오기

일단 postman에서 설정해 놨던 api에서 most popular를 선택하고 보이는 것과 같이 설정해 주었다.
그러면 받아올때 25개의 비디오 정보를 갖고 올 수있다.(maxResults가 25이기 때문에!)
그리고 위에 보면 code라고 있는데 그것을 클릭하면

위와 같이 받아올 수있는 코드를 작성할 수 있게 코드가 작성돼 있는 것을 볼 수 있다. 일단 작성자는 fetch를 써 봤는데 axios로 다음에 바꿀것이다.

그런다음 코드를 작성해야하는데 리액트는 웬만하면 제일 상단에서 내려주는 것이 정석? 이라고 들어서 모든 정보 처리는 제일 상단인 main에서 다룰 것이다. 그리고 각 components로 필요한 정보를 내려줄 것이다.

const [videos, setVideos] = useState([]); // 비디오를 저장해주는 역할
useEffect(() => { //컴포넌트가 업데이트 될때 마다 호출
    const requestOptions = {
      method: "GET",
      redirect: "follow",
    };

    fetch(
      `https://www.googleapis.com/youtube/v3/videos?part=snippet&chart=mostPopular&maxResults=25&key=${YOUTUBE_API}`,
      requestOptions
    )
      .then((response) => response.json())
      .then((result) => setVideos(result.items))
      .catch((error) => console.log("error", error));
  }, []);//마운트가 되었을 때만 함수가 실행되게끔해준다.(컴포넌트가 업데이트 될때마다 호출이 되면 좋지 않기 때문)

위와 같이 작성해준다!. 그리고 이 정보를 받을 컴포넌트로 내려주면 된다.(아래처럼)

<VideoList videos={videos} />

2. 검색창 및 검색 결과 갖고 오기

이것도 똑같이 포스트맨에서 확인해보자. 통신하는 부분은 거의 똑같다

  const search = (query) => {
    const requestOptions = {
      method: "GET",
      redirect: "follow",
    };

    fetch(
      `https://www.googleapis.com/youtube/v3/search?part=snippet&maxResults=25&q=${query}type=video&key=${YOUTUBE_API}`,//위에서는 video라고 돼 있는데 여기서는 search라고 돼 있다.
      requestOptions
    )
      .then((response) => response.json())
      .then((result) =>
        result.items.map((item) => ({ ...item, id: item.id.videoId }))
      )
      .then((items) => setVideos(items))
      .catch((error) => console.log("error", error));
  };

그리고 나서

const Search = ({ onSearch }) => {
  const inputRef = useRef(); //input의 정보 메모하기 용도
  const handleSearch = () => {
    const value = inputRef.current.value;
    console.log(value);
    onSearch(value);
  };
  const handleClick = () => {
    handleSearch();
  };
  const pressKey = (event) => {
    if (event.key === "Enter") {
      handleSearch();
    }
  };
  return (
    <header className={styles.header}>
      <div className={styles.logo}>
        <img className={styles.img} src="/images/youtubeLogo.png" />
      </div>

      <input
        ref={inputRef}
        className={styles.input}
        type="search"
        placeholder="Search..."
        onKeyPress={pressKey}
      />
      <button className={styles.button} type="submit" onClick={handleClick}>
        <img src="./images/search.png" />
      </button>
    </header>
  );
};

위와 같이 작성하면 검색 결과까지 갖고 올 수 있는 로직이 완성이다.

아직 갈길이 멀다. 더욱더 배움에 게을리 하면 안되겠다.
오늘은 여기까지
다음에 계속