[TIL] 221019

dday 계산

// sdate = "2022-00-00T23:59:59"
function test(sdate: string) {
  const [y, m, d] = sdate.split('T')[0].split('-');
  let today = new Date().getTime();
  let dday = new Date(+y, +m - 1, +d).getTime();
  let gap = dday - today;
  let result = Math.ceil(gap / (1000 * 60 * 60 * 24));
  return `D-${result}`;
}

tailwind css grid

https://tailwindcss.com/docs/grid-template-rows

<ul className="w-full mb-4 grid sm:grid-cols-2 md:grid-cols-3 gap-2 md:gap-3">
  {data?.challengeList?.map((c) => (
    <li key={c.challengeId}>...</li>
  ))}
</ul>

URLSearchParams

참고
URLSearchParams - MDN
[JavaScript] URL의 파라미터 값을 확인하고 싶을때 — URLSearchParams

문법

const params = new URLSearchParams('?a=apple&b=banana');

// 가져오기
console.log(params.get('a')); // apple
console.log(params.get('b')); // banana

// 추가
params.append('c', 'cinnamon');
console.log(params.get('c')); // cinnamon

// 제거
params.delete('b'); 
params.get('b'); // null

// 확인
params.has('a'); // true
params.has('b'); // false

// 문자열로 변환
params.toString(); // a=apple&c=cinnamon'

http://localhost/board?order=POPULAR&page=1 접속

export default function Board() {
  const location = useLocation();
  const urlSearchParams = new URLSearchParams(location.search);
  const orderParam = urlSearchParams.get('order'); // 'POPULAR'
  const pageParam = urlSearchParams.get('page'); // 1
  ...

순회

for(const [key, value] of params){   
  console.log(key, ':', value); 
}
// a : apple
// c : cinnamon

params.forEach((param) => console.log(param));
// apple
// cinnamon

// 키를 순회
for(const key of params.keys()) {
   console.log(key); 
}
// a
// c