리액트로 깃허브 블로그 만들기 #2 - 날짜 구하기

시작은 쉬웠지만 아직도 메인페이지를 만들고 있는 현실.. (실화인가..)

디자이너가 아니기 때문에.. 역시 디자인엔 한계가 있네요. 🤣🤣

최근엔 svg animation 도 깊게(?) 배운터라.. 이것도 군데군데 넣어보고 싶다보니 진행이 더 느려지는 것 같습니다.

섹션을 하나씩 만들던 중 배너섹션을 하나 구성하였는데요, 여기에 블로그 운영을 몇일 째 하고 있는지를 적고 싶어졌습니다.

---

💡날짜구하기

배너 섹션

위의 배너 섹션에서 "운영" 다음 위치에 계산된 날짜를 가져온 뒤 "일 째"가 붙으면 됩니다.

유저가 접속할 때마다 날짜가 자동 갱신되어야 하는데... 난.. 서버가 없는데~~ 라는 생각을 했지만, 생각해보니 오늘 날짜를 알려주는 객체를 사용하면 페이지 렌더링이 될 때마다 객체를 불러와서, 접속한 유저마다 알아서 현재시점으로 갱신된 페이지가 나올 것이므로 서버를 들먹일(?) 필요가 없었습니다 😄

페이지가 로드될 때 시점을 구하면 되기 때문에 App.js에서 App 컴포넌트 파일에 작성해 주었습니다.

useEffect를 사용해서 한 번만 사용되도록 설정을 했지만, 나중에 서브페이지까지 다 만들어본 후 수정할 수도 있을 듯 합니다.

function App() {
  const [runningDate, setRunningDate] = useState(0);
 useEffect(() => {
  // Running Date
  // 월은 0부터 시작하므로 10월은 9로 설정
  const startDate = new Date(2024, 9, 1);
  const today = new Date();
  const timeDifference = today - startDate;
  const daysDifference = Math.floor(timeDifference/(1000 * 60 * 60 * 24));
  setRunningDate(daysDifference);
  }, []);
  return (
    <div className="wrap">
      <Header/>
      <Main runningDate={runningDate}/>
      <Footer/>
    </div>
  );
}

아직 배포 전이지만 날짜가 뜨는지 테스트 해야하므로 10월 1일을 시작일로 설정하였습니다.

10월인데 왜 9로 써두었냐면, 자바스크립트에서 월은 0부터 시작하여 11로 끝나기 때문입니다.

0 = 1월

1 = 2월

...

11 = 12월

그리고 페이지 로드시점의 날짜를 today에 new Date()객체로 받아와서 현재 날짜와 기준날짜의 차이를 구했습니다.

차이는 밀리초로 계산됩니다.

계산된 밀리초를 다시 day(일)로 환산시키고 소수점을 버린 값을 dayDifference 에 할당했습니다.

"일"로 환산된 숫자를 runningDate 변수에 setRunningDate를 사용해서 업데이트 해줍니다.

그리고 인자로 해당 컴포넌트까지 전달~~

      <section className='section section-banner'>
        <div className='inner'>
          <div className='title-box'>
            <h2 className='title'>❝ 블로그 운영 <span className='date-color'>{runningDate}</span> 일 째 ❞</h2>
          </div>
        </div>
      </section>

렌더링할 부분에서 runningDate를 호출하면 됩니다.

배너 결과이미지

결과로 날짜가 잘 나오는 것을 확인할 수 있었습니다 ㅎㅎ 🥰

그럼... 오늘은 이만 끝~~!!!