YouTube URI에서 id 추출해서 사용하기

YourTube는 내가 원하는 채널과, 재생목록을 저장해두고 유튜브에 들어가지 않고, 필요한 영상만 시청하기 위해 만든 개인프로젝트입니다.

좋아하는 작업용 음악들을 모아두고 재생할 때 유용해요👍🏻
‣YourTube 바로가기

목표

오늘은 YourTube의 기능 중 원하는 영상을 추가할 때 단어로 검색해서 단어에 대한 영상목록을 반환 하거나, URI을 붙여넣었을 때는 영상목록을 반환하지않고 URI에서 영상ID를 추출해 영상을 바로 추가해주는 기능에 대해 정리해보았습니다:)

URI를 붙여넣어 영상 추가 키워드로 영상 검색

---

URI 분석

우선 코드를 보기 전에 YouTube의 URI가 어떤식으로 구성되어 있는지 파악해보자.

영상플레이 중 URI
https://www.youtube.com/watch?v=BmrB4yiyuUc
재생목록 URI
https://www.youtube.com/playlist?list=PL6tJGXUHkMaBss3OA9OyMukLVX4a3nzgK
재생목록에서 영상플레이 중일 때 URI
https://www.youtube.com/watch?v=NtNFpHnIfo0&list=PLt1UurYmHeMaTBM4S_CaKXwmLOoI4W4YD&index=7

살펴보면 영상의 ID는 ?v=다음에 나오고 재생목록의 ID는 ?list=다음에 나온다. 재생목록에서 플레이중일 경우에는 index도 표기된다. 그리고 각각 영상 ID와 재생목록 ID, index는 &으로 연결되어 있다.
여기서 ?v=과 &를 이용해서 영상의 ID만 뽑아 낼 것이다.

코드

아래 코드에서 주석으로 설명하겠습니다.

//form을 통해서 입력값을 받아오는 형태입니다.
const onSearch = (event) => {
    event.preventDefault();
    if (value === '') return;
  	//입력값을 value로 할당해줍니다.
    const value = inputRef.current.value;
    //영상ID가 있는지 체크합니다. 입력 값을 '?v='으로 split 했을 때 배열의 길이가 1보다 크다면 영상ID를 할당하고,아닐 경우에는 false를 할당한다.
    //'?v='으로 split하면 배열의[1]에 영상ID가 있고, 뒤에 '&'가 따라오는 경우도 있기 때문에 '&' split하여 첫번째 원소를 가져온다.
    const videoIdFromURI =
            value.split('?v=').length > 1 ? value.split('?v=')[1].split('&')[0] : false;
	  //영상의 ID가 있다면, 재생목록에 바로 영상을 추가한다.
          if (videoIdFromURI) addVideo(videoIdFromURI, nemo);
          //영상의 ID가 없을때는 videoIDFromURI가 false로 할당되는 것을 이용함. 영상 ID가 없으므로 form에서 받아온 value값으로 영상을 검색하고 영상 목록을 반환합니다.
          if (!videoIdFromURI)
            youtube.searchVideo(value).then((videos) => {
              setSearchQ(value);
              setNextPageTok(videos.nextPageToken);
              setList(videos.items);
            });
    formRef.current.reset();
};