230831.log

Universe·2023년 8월 31일

목록 보기

5/14

🗓️ 날짜 : 2023.08.31

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

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

⌛ 공부시간 : 10:00 ~ 20:40

Til

@tailwindcss/aspect-ratio

tailwind css 는 여러가지 플러그인을 설치할 수 있는데,
aspect-ratio 라는 플러그인이 있다.
이 플러그인은 가로-세로의 비율을 고정시켜 반응형 디자인에 유용하게 사용할 수 있다.
간단한 사용방법은 아래와 같다.

yarn add @tailwindcss/aspect-ratio

// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    require('@tailwindcss/aspect-ratio'),
    // ...
  ],
}

// example
<div class="aspect-w-16 aspect-h-9">
  <img class="aspect-content object-cover" src="image.jpg">
</div>

이 플러그인을 찾게된 건 아주 우연인데,
youtube api 로 썸네일 이미지를 받게되면

이런식으로 상하단에 까만색의 여백이 생긴다.
api에서 제공하는 썸네일은 동영상의 원래 비율에 따라 이미 생성되어 있고,
api에 어떤 추가적인 요청이나 쿼리 파람을 보내서 조정할 수 있는 방법은 없다.

그래서 생각한 방법이 클라이언트 측에서 어떻게든 이미지를 처리하는 방법.
유튜브의 썸네일이 정상적으로 출력되기 위해서는 16:9의 비율을 가져야 한다.
이를 고정시켜줄 수 있다면 이미지를 div 태그 등으로 감싸고
이미지에 object-fit:cover 속성을 주면 해결할 수 있을 것 같았다.
귀여운 우리의 tailwind는 이런 경우에도 해결할 수 있는 고마운 플러그인을 제공해준다.

원리가 궁금해서 조금 찾아봤는데,
aspect-ratio 는 Padding-Hack 이라고 불리는 일종의 css 트릭을 이용한다고 한다.
상위 요소에 sudo class 를 이용해 가상의 자식요소를 만들고
자식요소에 대해 padding-top, padding-bottom 값을 설정하면
패딩은 상위요소의 너비에 상대적으로 계산되니까 이를 이용해 원하는 비율을 유지하는 방법이라고.
css 코드로 뜯어보면 아래와 같다.

.aspect-ratio-container {
  position: relative;
  width: 100%;
}

.aspect-ratio-container::before {
  content: "";
  display: block;
  padding-top: 56.25%;  /* 9 / 16 * 100% */
  width: 100%;
}

.aspect-ratio-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

aspect-ratio 플러그인을 이용해 동영상 썸네일 비율 16:9를 유지해주면,

유튜브에서 보던 것 처럼 깔끔한 썸네일 이미지를 얻을 수 있다.

new Intl.NumberFormat

유튜브 동영상에 보면 조회수 ~만회, ~천회 같이 일정한 규칙을 가지고
숫자를 포멧딩 한다는 것을 확인할 수 있다.
유튜브 api의 viewCount 는 포멧팅 되지 않은 number 형식의 string 으로
값을 전달하므로 이를 클라이언트 측에서 포멧팅 해주어야 한다.
이를 일일히 조건문으로, 예를들어

function formatYouTubeViewCount(viewCount: number): string {
  if (viewCount < 1000) {
    return `${viewCount}회`;
  }

  if (viewCount < 10000) {
    return `${(viewCount / 1000).toFixed(1).replace(/\.0$/, '')}천회`;
  }

  if (viewCount < 100000) {
    return `${Math.floor(viewCount / 1000)}천회`;
  }
  ....

이런식으로 했다가는
아찔하다.
그럴 때 쓸 수 있는 아주 간단한 Intl 이라는 자바스크립트 api 가 있다.

실사용 예시는 아래와 같다.

const formatViewCount = (viewCount: string): string => {
  const formatter = new Intl.NumberFormat("ko-KR", {
    notation: "compact",
  });
  return formatter.format(parseInt(viewCount, 10));
};

위의 포맷은 숫자를 한국어로 ~만, ~천 의 포멧으로 변환해준다.
유튜브 api 의 viewCount 가 string 값으로 오기때문에 parseInt 메소드를 통해
숫자로 바꾼 후 해당 숫자를 변환해준모습.

Feedback

function 들로 작성된 api 코드를 전체적으로 class instance 로 바꿔봤는데,
이게 어떤 장점이 있고 어떤 단점이 있는지 왜 이렇게 써야하는지에 대해서
명확하게 이해하지 못해서 정리를 다 하지 못했다.
이 부분을 조금 더 깊게 공부해서 이해가 됐을 때 정리할 것 같다.

타입스크립트가 개발생산성이 좋다고 했던 내가 원망스럽다.
사실 원망스럽지는 않고 이렇게 깊게 다루어보지 못해서 조금 익숙하지 않은거지만.
타입을 어떻게 지정하고 네이밍을 어떻게 할 지 고민하는 부분에서
생각보다 많은 시간이 걸린다. 그래도 깔끔하게 다시 정리하니까 보기 좋다.

위의 class instance를 context로 provide 해주는 코드에 대한
타입지정의 레퍼런스를 제대로 찾지 못했다.
context 의 타이핑에 대해서 다시 공부해볼 것.

유튜브 클론코딩을 너무 간단하게 생각했던 것 같기도 하다.
CRUD 에서 R 만 다루는 프로젝트라서 어려운게 아닐텐데,
생각보다 여러가지 부분에서 막히는 것 같다.
더 정진할 것. 😔