[TIL] 230908

Tailwind

동적인 style

<div className={`p-4 border border-gray-300 rounded-xl h-36`}
                style={{ backgroundColor: `${bgClasses[index]}` }}>

tailwind의 경우 동적인 스타일의 경우 적용하기 어렵기 때문에 style로 직접 지정해주어서 데이터 값에 따라 다른 style이 적용되도록 코딩하였다.

n줄 이상 넘어갈때

npm install @tailwindcss/line-clamp

• tailwind.config.js

module.exports = {
  // ...
  plugins: [
    // ...
    require('@tailwindcss/line-clamp'),
  ],
}

<p class="line-clamp-3"> 이런식으로 line-clamp-{n} n줄로 자동으로 잘라준다.

모듈 선언할 필요없이 그냥 사용하면 된다.

반응형 디자인

모바일에서는 다르게 나오게 만드는걸 어떻게 할지 고민하다가 다른 코드를 참고해보았더니 sm:hidden으로 평소에 숨기고 다른 구간에서는 보이게 디자인하면 된다.

영화 데이터 자르기

• 방법1
  이전에서 가져올 데이터 개수를 변수를 계산해서 이전 페이지에서 필요한 만큼 데이터 가져오기
  -> 데이터 요청이 많아지고 pageParam의 숫자가 커질수록 이전의 이전 데이터에서 가져와야할 수 있는 등 고려할게 많아짐

• 방법2
  전역데이터로 관리하여 18개씩 가져오는데 모자를때 데이터를 요청하기
  -> 적절한 pageParam이 몇인지 고려해야함