🥞 오늘 한 일

• 넥스트 강의
  • 1-1~4 수강
• 알고리즘 타임어택
  • 남은 시간 계산 및 표시하기

🍽️ 트러블 슈팅

알고리즘 타임어택

남은 시간 계산 및 표시하기

문제

이미 풀었던 문제와 크게 다를 바가 없어서 그대로 적용을 시켰는데, 문제가 있었다. 아래는 기존 로직이다.

  const getRemainingTime = () => {
    const seconds = Math.floor(
      (PURCHASE_OPEN_TIME - currentTime.getTime()) / 1000
    );
    const minutes = Math.floor(seconds / 60);
    const hours = Math.floor(minutes / 60);
    const day = Math.floor(hours / 24);

    return { seconds, minutes, hours, day };
  };

이렇게 함수를 제작할 경우 문제점은, 몇 시 몇 분 몇 초 전 같이 표시를 할 때 남은 모든 시간이 각 시, 분, 초에 들어가게 된다. 예를 들어 초 같은 경우 0~59 사이의 숫자만 표시되어야 하지만 80000초가 넘게 나와버리는 어처구니없는 상황이 발생하게 된다.
때문에 로직 변경이 필요했고, 수학적 머리가 부족하여 결국 구글링을 통해 알아냈다...

풀이

  const getRemainingTime = () => {
    const diff = PURCHASE_OPEN_TIME - currentTime.getTime();
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    const hours = Math.floor((diff / (1000 * 60 * 60)) % 24);
    const minutes = Math.floor((diff / (1000 * 60)) % 60);
    const seconds = Math.floor((diff / 1000) % 60);

    return { seconds, minutes, hours, days };
  };

기존 로직에서 크게 변경된 부분이라고 하면 뒤에 상위 단위만큼을 나눈 나머지 값으로 계산했다는 점이다. 예를 들어 seconds는 우선 남은 모든 초를 구한 뒤, minutes가 될 값으로 60을 나눈 다음 나머지 값으로 계산해서 분을 전부 빼고 남은 초만큼만 구해주는 로직으로 변경했다. 이 방식을 사용하니 표시가 잘 되는 것을 확인할 수 있었다.

🍪 배운 것

넥스트 강의

• Next.js 개요
• 앱 라우터 vs 페이지 라우터
• Routing
• 페이지 이동과 Tailwind

🍴 돌아보기

타입스크립트 개인과제 제출을 이미 끝냈기에, 오늘은 주어진 것 외의 공부를 하려다가 Next.js 강의가 지급되어 해당 강의를 들으며 시간을 보냈다. 벌써 시간 상으로는 절반 정도 들었기에, 주말 간에 전부 듣는 것을 목표로 삼아야겠다.

🍳 내일 목표

• 넥스트 강의 수강