[개발일기] 파이어베이스로 만든 일기장에 추가기능 구현하기 - 캘린더 구현하기

박소정·2022년 9월 28일

추가기능 계획

파이어베이스를 백으로 둔 일기장 사이트를 만들었는데 더 붙이고 싶은 기능이 생겨 빌딩과 배포를 미루고 추가적인 작업을 하려한다.
1. 달력 붙이기
2. css 작업
3. 날씨 추가

사실 이번 일기장은 파이어베이스를 배우려고 제작한 거라 그냥 귀여운 느낌으로 만들려고 했는데, 생각해보니 예에에에전에 vanilla js로 만들려고 했던 투두리스트에서 하고싶었던 기능이 일기장과 더 잘 어울릴것같아 기획을 바꾸었다.
👇 아래가 처음 생각했던 그림일기장 느낌!

~~이거 그려보고 싶어서 일러스트 켜봤는데 해 무슨일이냐며~~
약간 크래용의 찌글찌글한 느낌의 귀여운 느낌을 생각하면서 그려보긴했는데... 뭐 알록달록하게 하면 좀 바뀔것이라는... 희망

바뀐 일기장의 느낌은 이전에 조금 작성하고 말았던.... 이 포스팅의 기획에 투두리스트 대신 일기장이 들어간다고 생각하면 될 것 같다.

이때는 자바스크립트를 니꼬쌤 무료강의로 처음 배우고 한 프로젝트라서 localStorage가 어떻게 동작하고 사용해야하는지도 모르고 무작정 따라치기만 했던...🤦‍♀️
결국 에러는 잡지도 못하고 부트캠프를 시작해버려서 어딘가에 버려졌던 프로젝트였는데 디자인이 너무 맘에들어 계속 생각나던 프로젝트였다.
이번에는 잘 완성해봐야지👊

달력 구현하기

우선 가장 먼저 해야할것은 메인이 될 달력을 구현하는 것이다.
달력은 api를 쓸 생각이었는데 react로 달력을 구현한 포스팅이 많길래 참고해보면서 구현해보기로 했다.

필요한 라이브러리 설치하기

date-fns

달력 구현을 위해 찾아보다가 date-fns라는 javascript라이브러리를 알게되었는데 날짜와 시간을 변경하고 계산하기 용이한 라이브러리였다.
date-fns라이브러리를 사용해서 다음달, 이전달 계산과 날짜 형식 지정에서 편하게 사용할 수 있었다.

react-icons

react-icons는 저번 팀프로젝트를 할 때 알게된 라이브러리인데 다양한 아이콘을 다운받지 않고 쉽게 import해 사용할 수 있어서 이번에도 사용하게 되었다. react-icons 사이트에서 원하는 아이콘을 찾아 불러오면 바로 적용이 되고, 이미지 아이콘보다 css로 자연스러운 편집이 가능해 좋았다.

just make it!

달력을 구현하기 위해 참고한 블로그가 정말 깔끔하게 정리를 잘 해두셔서 구조를 이해하고 구현하기 좋았다!!
만들고자하는 달력은 크게 header(이번달과 연도, 이전달・다음달 이동 버튼), days(요일들),cells(날자들)로 이루어져있고, 각각을 렌더링하는 함수는 따로 분리되어 있었다.

header완성 중간 점검~
이번달을 표시하는 것을 가운데 두고 달을 이동할 수 있는 버튼을 양옆에 두는 것으로 구조를 변경하였고, 날짜가 잘 작동하는지 확인해보았는데

잘 작동했다! 다음은 요일들 렌더하는 함수 만들기!!

요일들을 렌더하는 함수를 만들면서 새로운 기법(?)을 배웠다!
이렇게 배열에다가 태그들을 넣으면
이렇게 출력이 가능하다는 사실! 굳이 map을 돌리지 않아도 배열에다가 넣는다면 출력이 가능했다!
map함수를 사용하지 않더라도 내부적으로 반복적으로 출력을 해서인지 key값에 대한 에러는 떴지만 매우 신기!! 이렇게 또 하나 배워갑니다~!

다시 요일들 렌더하는 함수를 만들어보자면..

import React from "react";

const RenderDays = () => {
  const date = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

  return (
    <div className='daysContainer'>
      <ul>
        {date.map((day, idx) => {
          return <li key={idx}>{day}</li>;
        })}
      </ul>
    </div>
  );
};

export default RenderDays;

이렇게 만들어서 calendar.jsx에 import 하여 사용하면

두둥! 아직 css 안입혔지만 일단 성공이당
이제 마지막으로 날짜들만 만들어서 집어 넣으면 뼈대는 완성이다

날짜들을 만드는 부분에서 date-fns의 기능들을 많이 사용했다.
우선 날짜들을 만드는 로직은
1. 이달의 1일이 있는 주의 일요일인 날짜 부터 이 달의 마지막 날이 있는 주의 토요일 날짜까지 while 문을 도는데, 그 안에서 7일씩 끊는 반복문을 돌아 한 주(week)를 구성한다.
2. 한 주(week)를 구성하는 반복문 안에서는 각 날짜가 이달의 날짜인지, 아니면 다음달 혹은 이전달의 날짜인지를 판별해 클래스를 넣어주었다.
여기서 사용한 date-fns의 함수는 다음과 같다.

startOfMonth : 이달(this month)의 시작. 즉 1일을 알려준다.
endOfMonth : 이달의 마지막날. 30일 혹은 31일을 알려준다.
startOfWeek : 이주(this week)의 시작을 알려준다. 예를 들어 이번달인 2022년 9월의 경우 8월 28일부터 9월의 첫째주가 시작했다.
endOfWeek : 이주의 마지막날을 알려준다. 예를 들어 2022년 9월의 경우 10월 1일이 9월 마지막 주의 토요일이다.
isSameMonth : 두 개의 인자를 받아 첫번째 인자가 두번째 인자와 같은 달인지를 알려준다.
isSameDay : 마찬가지로 두개의 인자를 받아 첫번째 인자와 두번째 인자가 같은 날인지를 알려준다.
date-fns의 더 많은 함수들은 공식doc에서 찾아볼 수 있다!