230828.log

Universe·2023년 8월 28일

목록 보기

2/14

🗓️ 날짜 : 2023.08.28

📚 할 일 :
	- 10to7
    - 1day 1commit 1post
    - 1mon 3project

📝 오늘의 목표 : 유튜브 클론코딩 프로젝트 진행

⌛ 공부시간 : 10:00 ~ 19:00 /+@ 20:20

✅ 목표달성 : ?

Til

htmlParser

useQuery 로 가져온 json data의 title이
"NewJeans (뉴진스) &#39New Jeans&#39 Official MV",
이런 형식으로 되어있었다.
위의 string 을 그대로 매핑하면 &#39 같은 html 엔터티가 출력되기 때문에 좋지 않다.

리액트에서는 html 엔터티를 자동으로 해석하지 않으므로 따로 디코딩을 해주어야 한다.
가장 쉬운 방법은 dangerouslySetInnerHTML 메소드를 사용하는 것이지만
XSS 공격의 위험에 취약하므로 지양한다.

조금 더 안전한 해결방법은 파싱관련 함수를 따로 만들어 주는 방법.

//*utill/htmlParser.tx*

const htmlParser = (text: string) => {
  const textArea = document.createElement("textarea");
  textArea.innerHTML = text;
  return textArea.value;
};

export default htmlParser;

해당 함수를 적용하면 정상적으로 ' 이 작은 따옴표(’’) 로 출력되는 것을 확인할 수 있다.

YouTube Videos API 의 VideoCategory

시행착오 1.

YouTube videos API 에는 videoCategoryId 를 추가할 수 있어서
카테고리 별 mostPopular 영상의 목록을 가져올 수 있다.
원래는 유저별 알고리즘에 의해서 카테고리의 목록도 사람마다 다르게 보이지만,
그런 복잡한 알고리즘을 클론 코딩에 추가할 수는 없으므로
임의로 카테고리를 만들고 버튼을 누르면 리스트를 가져와 매핑하는 식으로 개발하면 좋을 것 같았다.

이렇게 되면 차후에 구현사항으로 무한 스크롤 같은 것을 구현할 때,
api를 재호출하는 것이 아닌, 카테고리 별로 캐싱하여 보다 효율적으로 활용할 수 있을 것 같다고 생각했다.

구글링을 통해 얻은 유튜브 카테고리 id 는 다음과 같다.

2 - Autos & Vehicles
1 -  Film & Animation
10 - Music
15 - Pets & Animals
17 - Sports
18 - Short Movies
19 - Travel & Events
20 - Gaming
21 - Videoblogging
22 - People & Blogs
23 - Comedy
24 - Entertainment
25 - News & Politics
26 - Howto & Style
27 - Education
28 - Science & Technology
29 - Nonprofits & Activism
30 - Movies
31 - Anime/Animation
32 - Action/Adventure
33 - Classics
34 - Comedy
35 - Documentary
36 - Drama
37 - Family
38 - Foreign
39 - Horror
40 - Sci-Fi/Fantasy
41 - Thriller
42 - Shorts
43 - Shows
44 - Trailers

개발단계 이므로 mock data 를 활용하면 좋을 것 같아서 이것 저것 데이터를 뽑고 있었는데,
몇몇의 데이터가 조회되지 않았다.

예를들어, 30(Movies) 같은 경우 GET 요청을 보내면

{
    "error"<: {
        "code": 400,
        "message": "The requested video chart is not supported or is not available.",
        "errors": [
            {
                "message": "The requested video chart is not supported or is not available.",
                "domain": "youtube.video",
                "reason": "videoChartNotFound"
            }
        ]
    }
}

위와 같은 에러를 리턴한다.

조회가 되는 데이터가 있고 되지 않는 데이터가 있다면 fetch 코드의 문제는 아니었고,
카테고리 id 의 문제를 가장 먼저 의심했다. 그러나 구글링을 아무리 해봐도 카테고리 id에는 문제가 없었다.

api 문서를 꼼꼼하게 읽어보니 videoCategories 라는 api 가 있어서 일단 호출해보기로 했다.
해당 api 를 호출하면 items 객체 안에 아래와 같은 데이터가 담겨있다.

{
      "kind": "youtube#videoCategory",
      "etag": "Q0xgUf8BFM8rW3W0R9wNq809xyA",
      "id": "2",
      "snippet": {
        "title": "Autos & Vehicles",
        "assignable": true,
        "channelId": "UCBR8-60-B28hp2BmDPdntcQ"
      }
    },

...
{
      "kind": "youtube#videoCategory",
      "etag": "4pIHL_AdN2kO7btAGAP1TvPucNk",
      "id": "30",
      "snippet": {
        "title": "Movies",
        "assignable": false,
        "channelId": "UCBR8-60-B28hp2BmDPdntcQ"
      }
    },

각각의 item의 snippet 이라는 요소에 assignable 이라는 boolean 값이 할당되어 있는데,
assignable 이 true 인 경우에만 videos api 의 vedeoCategoryId 값으로 할당할 수 있다고 한다.

According to the docs, assignable is true if and only if the respective category is actually attributable (assignable) to any video's meta data.

In other words, one can call for endpoints [Videos.insert](https://developers.google.com/youtube/v3/docs/videos/insert) or [Videos.update](https://developers.google.com/youtube/v3/docs/videos/update) setting (assigning) snippet.categoryId if and only if that category ID identifies a video category that has its property assignable set to true.

위는 이유를 stack overflow 에서 찾아본 결과.
공식 문서에 따르면 해당 카테고리가 실제로 동영상의 메타데이터에 속할 수 있는, 할당 가능한 경우에만
호출할 수 있다고 한다.

어떻게하면 해당 값을 true 로 바꿀 수 있는지 궁금해서 찾아봤지만,
API 사용자가 이 값을 임의로 변경할 수는 없다고 한다.
😔