라이브러리 없이 자바스크립트로 달력 만들기 1 - Date() 생성자를 사용하여 Calendar 객체 만들기

라이브러리 없이 자바스크립트로 달력 만들기는 우테코 '하루스터디' 프로젝트를 진행하면서 직접 만든 달력을 바닐라 자바스크립트로 다시 구현하면서 정리한 내용입니다. '하루스터디' 프로젝트에서는 리액트로 달력을 구현했지만 이번에는 바닐라 자바스크립트에서 구현을 합니다. 리액트도 자바스크립트 라이브러리이므로 리액트에서 사용하고자 한다면 환경에 맞게 변형하여 사용할 수 있습니다. 다음은 '하루스터디' 프로젝트에서 달력 구현과 관련된 PR입니다. 

[FE] member record Calendar 기능 추가 by nlom0218 · Pull Request #613 · woowacourse-teams/2023-haru-study

가장 먼저 살펴볼 내용은 Date() 생성자를 사용하여 화면에 보여 줄 년, 월, 일을 가져오는 것입니다. 이 파트에서는 해당 내용을 다룹니다.

---

1. 기본 setting

빠른 환경 구성을 위해 vite(vanilla JS와 typescript)를 사용합니다. 원하는 폴더로 이동하여 다음과 같은 명령어를 터미널에 입력합니다.

$ yarn create vite vanilla-calendar --template vanilla-ts

이후, src/main.ts의 내용을 모두 지우고 src/counter.ts와 src/style.css은 파일 자체를 지웁니다. 그 외 indext.html의 lang, title도 알맞게 바꿉니다. 이렇게 기본 setting을 마무리합니다.

chore: 기본 setting · nlom0218/vanilla-calendar@e58478e

 

chore: main, counter, style.css 초기화 · nlom0218/vanilla-calendar@85c20e7

---

2. Date() 생성자

Date() 생성자를 사용한다면 오늘에 해당하는 Date 객체를 얻을 수 있습니다. 또한 적절한 매개변수를 전달한다면 특정 년, 월, 일에 해당하는 Date 객체도 얻을 수 있습니다. 이러한 Date 객체는 다양한 메서드를 제공하는데 이를 활용하여 특정 달에 필요한 정보를 가져올 수 있습니다.

new Date() // Sun Oct 08 2023 10:58:16 GMT+0900 (GMT+09:00)
new Date(2023, 0, 1) // Sun Jan 01 2023 00:00:00 GMT+0900 (GMT+09:00)
new Date("2023-01-01") // Sun Jan 01 2023 09:00:00 GMT+0900 (GMT+09:00)

 

Date() 생성자 - JavaScript | MDN

 

2-1. 어떤 정보가 필요할까요?

Date() 생성자를 통해 어떠한 정보를 알아야 할까요? 이를 먼저 살펴보겠습니다.

 

달력을 만들기 위해 특정 년, 월의 첫째 날과 마지막날을 알아야 합니다. 하지만 이뿐만 아니라 이전 달, 다음 달의 정보도 필요한 경우가 있습니다. 다음 사진을 보면 어떤 정보인지 쉽게 파악할 수 있습니다.

2023년 7월

위는 2023년 7월의 달력입니다. 단지 7월 1일 부터 시작하여 7월 31일에 끝나는 것이 아니라 이전 달이 6월, 다음 달인 8월의 정보도 담겨 있습니다. 즉, 한 주가 모두 채워지지 않았다면 이전 달, 다음 달의 정보가 필요합니다.

 

또는 다음과 같이 다음 달 정보만 필요한 경우도 있습니다.

2023년 1월

위와 같이 특정 달의 시작이 한 주의 시작인 일요일이라면 이전 달의 정보는 필요가 없고 다음달의 정보만 필요합니다.

 

이를 토대로 다음과 같은 정보가 필요한 것을 알 수 있습니다.

1. 지난 달의 마지막 주 
2. 이번 달
3. 다음 달의 첫 번째 주

조금 더 세분화한다면 다음과 같습니다.

1. 지난달의 마지막 날
2. 이번달의 첫 번째 날
3. 이번달의 마지막 날
4. 다음 달의 첫 번째 날

지난달, 다음 달의 정보를 가져오기 위해 왜 주(week)가 아니라 날(date)이 필요할까요? Date() 생성자로만은 마지막, 첫 번째 주를 알 수 없기 때문입니다. 그래서 마지막 날, 첫 번째 날을 기준으로 마지막 주, 첫 번째 주를 구해야 합니다.

---

3. 지난 달의 마지막 주 구하기

3-1. 지난 달의 마지막 날

지난달의 마지막 주를 구하기 전 우선 지난달의 마지막 날을 구해야 합니다. 그렇다면 지난달의 마지막 날은 어떻게 구할 수 있을까요? 만약 2023년 7월을 기준으로 이전 달인 6월의 마지막 날을 구해야 한다면 다음과 같이 코드를 작성할 수 있습니다.

new Date(2023, 6, 0) // Fri Jun 30 2023 00:00:00 GMT+0900 (GMT+09:00)

이를 통해 2023년 6월의 마지막 날은 30일이고 금요일인 것을 알 수 있습니다.

 

간단하게 왜 위와 같은 코드를 통해 구할 수 있는지 살펴보도록 하겠습니다.

 

Date() 생성자에 적절한 매개변수를 전달하여 특정 년, 월, 일에 해당하는 Date 객체를 생성할 수 있다고 설명했습니다. 위 코드가 해당 설명에 대한 하나의 예시입니다. 첫 번째 매개변수는 년(year), 두 번째 매개변수는 월(month), 세 번째 매개변수는 일(date)입니다. 이후에도 시간, 분, 초 등이 가능합니다. 이때, 년과 월은 필수이고 그 이후부턴 생략가능한 optional입니다.

Date 객체에서 date은 일, day는 요일을 의미합니다.

 

또한 Date객체에서 month와 day는 다음과 같은 특징을 가지고 있습니다.

 

먼저 month입니다. momth 시작은 0입니다. 즉, 1월은 0이고 12월이고 11입니다. 이는 Date 객체를 생성하고 getMonth() 메서드를 호출하면 확인할 수 있습니다.

const date = new Date('2023-01-01');
date.getMonth(); // 0

즉, 이러한 특징으로 인해 위 코드에서의 6은 7월을 의미합니다.

 

그리고 date의 시작은 1입니다. 이는 getDate() 메서드를 호출하여 확인할 수 있습니다.

const date = new Date('2023-01-01');
date.getDate(); // 1

하지만 위 코드에서는 0을 전달하고 있습니다. 이는 이전 달의 마지막 날을 의미합니다.

 

정리하여 new Date(2023, 6, 0)을 해석하면 다음과 같습니다.

 

2023년 7월의 이전 달인 6월의 마지막 날에 대한 Date 객체를 반환해 줘

3-2. 지난달의 마지막 주

지난 달의 마지막 날을 토대로 마지막 주를 구해봅시다. 우선 바로 위에서 구한 지난 달의 마지막 날을 변수에 저장을 합니다.

const year = 2023
const month = 7

const prevMonthLastDateObject = new Date(year, month - 1, 0) // 7월 이전 달(6월)의 마지막 날

그다음으로는 요일을 바탕으로 한 주의 시작인 일요일까지 구해야 합니다. 즉, 여기서부터는 요일이 핵심입니다. 요일은 Date 객체의 getDay() 메서드를 통해 구할 수 있습니다. 또한 일요일이 0이고 토요일이 6입니다. 다시 말해 한 주의 시작은 0부터 시작합니다.

 

위 prevMonthLastDate의 요일(day)은 금요일입니다. 즉 5입니다.

prevMonthLastDate.getDay() // 5

숫자 5가 힌트입니다. 5를 바탕으로 반복문을 실행하면 쉽게 지난달의 마지막 주를 구할 수 있습니다. 그렇다면 몇 번 반복을 해야 할까요? 위 예시에서는 금요일이므로 일, 월, 화, 수, 목, 금 총 6번을 반복해야 합니다. 만약 화요일(2)이라면 일, 월, 화로 총 3번을 반복해야 합니다. 

 

즉, getDay() 메서드를 통해 얻은 값에 +1을 한 값만큼 반복을 해야 합니다. 이때, 주의해야 할 점은 만약 getDay() 메서드를 통해 얻은 값이 6이라면 반복을 실행해서는 안됩니다. 그 이유는 6은 마지막 요일인 토요일이기 때문입니다. 이땐, 굳이 이전 달의 마지막 주 정보가 필요 없습니다.

 

위 내용을 바탕으로 getPrevMonthWeekDays 함수를 만들어보겠습니다.

const year = 2023;
const month = 7;

const getPrevMonthLastWeekDays = (year: number, month: number) => {
  const prevMonthLastDateObject = new Date(year, month - 1, 0);

  const prevYear = prevMonthLastDateObject.getFullYear(); // 이전 달의 년도
  const prevMonth = prevMonthLastDateObject.getMonth(); // 이전 달
  const prevLastDayOfWeek = prevMonthLastDateObject.getDay(); // 이전 달의 마지막 요일
  const prevLastDay = prevMonthLastDateObject.getDate(); // 이전 달의 마지막 일

  if (prevLastDayOfWeek === 6) return []; // 이전 달의 마지막 요일이 토요일인 경우

  return Array.from({ length: prevLastDayOfWeek + 1 }).map((_, index) => {
    const day = prevLastDay - prevLastDayOfWeek + index;
    const dayOfWeek = index;

    return {
      day,
      dayOfWeek,
      date: new Date(prevYear, prevMonth, day),
      state: 'prev',
    };
  });
};

const prevMonthLastWeekDays = getPrevMonthLastWeekDays(year, month);

getPrevMonthWeekDays 함수의 반환 값은 배열로 이전 달의 마지막 주에 해당하는 정보가 순서대로(일요일부터) 객체로 담겨 있습니다.

 

객체를 살펴보면 일을 의미하는 day, 요일을 의미하는 dayOfWeek, Date 객체인 date 그리고 이전 달을 의미하는 prev가 있습니다. 간단하게 date만 필요할 수 있습니다. 하지만 이후에 스타일링을 할 때 조금 더 수월하게 하기 위해 dayOfWeek, state를 추가했습니다.

 

또한 Date() 객체에서는 date가 일, day가 요일이지만 개인적으로 많이 헷갈리는 네이밍이었기 때문에 일을 day, 요일을 dayOfweek으로 했습니다. 

 

prevMonthLastWeekDays의 결과는 다음과 같습니다.

7월의 이전 달인 6월의 마지막 주

만약 이전 달의 마지막 날이 토요일인 2023년 1월을 바탕으로 prevMonthLastWeek를 구하면 빈 배열이 반환되는 것을 확인할 수 있습니다.

getPrevMonthLastWeek(2023, 1) // []

---

4. 이번 달 구하기

4-1. 이번 달의 첫 번째 날

const year = 2023;
const month = 7;

위 year, month를 바탕으로 이번 달의 첫번째 날을 구해봅시다. 즉, 2023년 7월의 첫번째 날인 1일을 구하는 것입니다. 이는 다음과 같이 구할 수 있습니다.

new Date(year, month - 1);

첫 번째, 두 번째 매개변수는 전달했지만 세 번째 매개변수인 일(date)은 전달하지 않았습니다. 이처럼 세 번째 매개변수가 생략이 되었다면 기본값이 1이 적용됩니다.

 

즉, 위 코드는 다음과 같이 해석됩니다.

2023년 7월의 첫 번째 날에 대한 Date 객체를 반환해 줘

4-2. 이번 달의 마지막 날

바로 이어서 이번달의 마지막 날을 구해봅시다. 마지막 날은 다음 달을 바탕으로 구할 수 있습니다. 이전 달의 마지막 날을 구했던 방법처럼 Date() 생성자의 세 번째 매개변수로 0을 전달하면 됩니다. 즉 다음과 같이 이번 달의 마지막 날을 구할 수 있습니다.

new Date(year, month, 0);

이전과는 다르게 month에 -1을 하지 않았습니다. 때문에 이번 달이 아닌 다음 달을 기준으로 이번 달의 마지막 날을 구하는 것입니다.

 

이 코드도 해석하면 다음과 같습니다.

2023년 7월의 마지막 날에 대한 Date 객체를 반환해 줘

4-3. 이번 달

이번 달의 첫 번째 날과 마지막 날을 바탕으로 이번 달을 구해봅시다. 이번 달도 반복문을 통해 구할 수 있습니다. 그러면 몇 번 반복을 해야 할까요? 간단하게 마지막 날 수만큼 반복을 하면 됩니다. 바로 getCurMonthDays 함수를 구현해 보겠습니다.

const year = 2023;
const month = 7;

const getCurMonthDays = (year: number, month: number) => {
  const curMonthFirstDateObject = new Date(year, month - 1); // 이번 달의 첫 번째 날
  const curMonthLastDateObject = new Date(year, month, 0); // 이번 달의 마지막 날

  const curFirstDayOfWeek = curMonthFirstDateObject.getDay(); // 이번 달의 첫 번째 요일
  const curLastDay = curMonthLastDateObject.getDate(); // 이번 달의 마지막 일

  return Array.from({ length: curLastDay }).map((_, index) => {
    const day = index + 1; // 일은 index에 1을 더한 값
    const dayOfWeek = (curFirstDayOfWeek + index) % 7; // 첫 번째 요일과 index를 더한 값을 7로 나눈 값의 나머지

    return {
      day,
      dayOfWeek,
      date: new Date(year, month, day),
      state: 'cur',
    };
  });
};

const curMonthDays = getCurMonthDays(year, month);

 

위 코드를 살펴보면 curLastDay는 마지막 일입니다. 즉 이 만큼 반복문을 실행하고 있는 것을 확인할 수 있습니다. 

 

또한 day는 현재 인덱스에서 1을 더한 값으로 구할 수 있고 요일인 dayOfWeek은 첫 번째 날의 요일에 인덱스를 더한 값을 7로 나누어 나온 나머지로 구할 수 있습니다.

 

curMonthDays의 결과는 다음과 같습니다.

7월

---

5. 다음 달의 첫 번째 주 구하기

5-1. 다음 달의 첫 번째 날 

마지막으로 다음 달의 첫 번째 주를 구해봅시다. 이를 구하기 위해선 다음 달의 첫 번째 날을 먼저 알고 있어야 합니다. 이는 다음과 같이 구할 수 있습니다.

new Date(year, month);

month에 -1을 하지 않았기 때문에 다음 달에 해당하고 세 번째 매개변수를 생략했기 때문에 1이 적용되어 첫 번째 날을 반환하게 됩니다. 즉, 다음과 같이 해석할 수 있습니다.

2023년 7월의 다음 달인 8월의 첫 번째 날에 대한 Date 객체를 반환해 줘

5-2. 다음 달의 첫 번째 주

다음 달의 첫 번째 주를 구하기 위해선 다음 달의 첫 번째 날의 요일이 필요합니다. 즉, 이전 달의 마지막 주를 구했었을 때처럼 요일이 핵심이 됩니다. 

 

요일을 바탕으로 얼마만큼 반복을 할지 정할 수 있습니다. 만약 다음 달의 첫 번째 날이 화요일이라면 화, 수, 목, 금, 토 총 5번을 반복해야 하고 만약 금요일이라면 금, 토 총 2번을 반복해야 합니다.

 

규칙은 7에서 첫 번째 날의 요일을 빼면 됩니다. 요일은 0부터 시작하니 화요일은 2, 금요일은, 5입니다. 하지만 만약 다음 달의 첫 번째 날이 일요일(0)이라면 반복 없이 빈 배열을 반환해야 합니다.

 

이를 반영한 코드는 다음과 같습니다.

const getNextMonthFirstWeekDays = (year: number, month: number) => {
  const nextMonthFirstDateObject = new Date(year, month);

  const nextYear = nextMonthFirstDateObject.getFullYear(); // 다음 달의 년도
  const nextMonth = nextMonthFirstDateObject.getMonth(); // 다음 달
  const nextFirstDayOfWeek = nextMonthFirstDateObject.getDay(); // 다음 달의 마지막 요일
  const nextFirstDay = nextMonthFirstDateObject.getDate(); // 다음 달의 마지막 일

  console.log(nextFirstDayOfWeek);

  if (nextFirstDayOfWeek === 0) return []; // 다음 달의 첫 번재 날이 일요일인 경우

  return Array.from({ length: 7 - nextFirstDayOfWeek }).map((_, index) => {
    const day = nextFirstDay + index;
    const dayOfWeek = nextFirstDayOfWeek + index;

    return {
      day,
      dayOfWeek,
      date: new Date(nextYear, nextMonth, day),
      state: 'next',
    };
  });
};

const nextMonthFirstWeekDays = getNextMonthFirstWeekDays(year, month);

getNextMonthFirstWeekDays 함수는 다음 달의 첫 번째 주의 날의 정보가 담긴 배열을 반환합니다. 실제 nextMonthFirstWeekDays의 결과는 다음과 같습니다.

7월의 이전 달인 8월의 첫 번째 주

만약 다음 달의 첫 번째 요일이 일요일인 경우는 어떤 결과가 나올까요? 23년 9월이 토요일이 마지막 날 즉, 23년 19월의 첫 번째 요일이 일요일입니다. 실제로 getNextMonthFirstWeekDays(2023, 9)를 호출하면 빈 배열인 것을 확인할 수 있습니다.

getNextMonthFirstWeekDays(2023, 9) // []

---

6. 필요한 정보 모두 불러오기

이전 달, 이번 달, 다음 달의 정보를 모두 구했습니다. 이제 이를 모두 합쳐 하나의 배열로 만들어봅시다. 이는 간단하게 스프레드 연산자를 통해 만들 수 있습니다. 순서는 중요합니다!

const calendarStorage = [
  ...prevMonthLastWeekDays,
  ...curMonthDays,
  ...nextMonthFirstWeekDays,
];

결과를 보면 이전 달, 다음 달이 모두 포함된 것을 확인할 수 있습니다.

2023년 7월 달력

특징은 이렇게 만들어진 배열의 요소 개수는 7의 배수라는 점입니다. 이를 바탕으로 다음 챕터에서 그리드를 활용하여 달력을 실제로 화면에 그려보도록 하겠습니다.

---

7. 재사용 가능하게 만들기

calendar는 여러 곳에서 사용할 수 있습니다. 때문에 지금까지 만든 로직을 클래스로 묶어 재사용할 수 있도록 리팩터링을 진행하겠습니다.

 

Calendar.ts라는 파일을 만들고 다음과 같이 코드를 정리합니다.

export type CalendarStorage = {
  day: number;
  dayOfWeek: number;
  date: Date;
  state: 'prev' | 'next' | 'cur';
}[];

class Calendar {
  #year;
  #month;

  constructor(year: number, month: number) {
    this.#year = year;
    this.#month = month;
  }

  getCalendarStorage = () => {
    return [
      ...this.getPrevMonthLastWeekDays(this.#year, this.#month),
      ...this.getCurMonthDays(this.#year, this.#month),
      ...this.getNextMonthFirstWeekDays(this.#year, this.#month),
    ];
  };

  getYear = () => this.#year;

  getMonth = () => this.#month;

  private getPrevMonthLastWeekDays = (
    year: number,
    month: number
  ): CalendarStorage => {
    const prevMonthLastDateObject = new Date(year, month - 1, 0);

    const prevYear = prevMonthLastDateObject.getFullYear(); // 이전 달의 년도
    const prevMonth = prevMonthLastDateObject.getMonth(); // 이전 달
    const prevLastDayOfWeek = prevMonthLastDateObject.getDay(); // 이전 달의 마지막 요일
    const prevLastDay = prevMonthLastDateObject.getDate(); // 이전 달의 마지막 일

    if (prevLastDayOfWeek === 6) return []; // 이전 달의 마지막 요일이 토요일인 경우

    return Array.from({ length: prevLastDayOfWeek + 1 }).map((_, index) => {
      const day = prevLastDay - prevLastDayOfWeek + index;
      const dayOfWeek = index;

      return {
        day,
        dayOfWeek,
        date: new Date(prevYear, prevMonth, day),
        state: 'prev',
      };
    });
  };

  private getCurMonthDays = (year: number, month: number): CalendarStorage => {
    const curMonthFirstDateObject = new Date(year, month - 1); // 이번 달의 첫 번째 날
    const curMonthLastDateObject = new Date(year, month, 0); // 이번 달의 마지막 날

    const curFirstDayOfWeek = curMonthFirstDateObject.getDay(); // 이번 달의 첫 번째 요일
    const curLastDay = curMonthLastDateObject.getDate(); // 이번 달의 마지막 일

    return Array.from({ length: curLastDay }).map((_, index) => {
      const day = index + 1; // 일은 index에 1을 더한 값
      const dayOfWeek = (curFirstDayOfWeek + index) % 7; // 첫 번째 요일과 index를 더한 값을 7로 나눈 값의 나머지

      return {
        day,
        dayOfWeek,
        date: new Date(year, month - 1, day),
        state: 'cur',
      };
    });
  };

  private getNextMonthFirstWeekDays = (
    year: number,
    month: number
  ): CalendarStorage => {
    const nextMonthFirstDateObject = new Date(year, month);

    const nextYear = nextMonthFirstDateObject.getFullYear(); // 다음 달의 년도
    const nextMonth = nextMonthFirstDateObject.getMonth(); // 다음 달
    const nextFirstDayOfWeek = nextMonthFirstDateObject.getDay(); // 다음 달의 마지막 요일
    const nextFirstDay = nextMonthFirstDateObject.getDate(); // 다음 달의 마지막 일

    if (nextFirstDayOfWeek === 0) return []; // 다음 달의 첫 번재 날이 일요일인 경우

    return Array.from({ length: 7 - nextFirstDayOfWeek }).map((_, index) => {
      const day = nextFirstDay + index;
      const dayOfWeek = nextFirstDayOfWeek + index;

      return {
        day,
        dayOfWeek,
        date: new Date(nextYear, nextMonth, day),
        state: 'next',
      };
    });
  };
}

export default Calendar;

이제 사용하는 곳에서 new Calendar()를 통해 새로운 Calendar 객체를 생성하기만 하면 됩니다! 이때 원하는 year, month를 전달하면 해당 년, 월에 해당하는 모든 요일(이전 달, 다음 달 포함)을 getCalendardStorage() 메서드를 통해 얻어올 수 있습니다. 다음과 같이 말이죠.

import Calendar from './Calendar';

const today = new Date();
const year = today.getFullYear();
const month = today.getMonth() + 1;

const month1 = new Calendar(year, month);
month1.getCalendarStorage(); // 오늘 기준 23년 10월 달력 정보

const month2 = new Calendar(2023, 7);
month2.getCalendarStorage(); // 23년 7월 달력 정보

const month3 = new Calendar(2023, 8);
month3.getCalendarStorage(); // 23년 8월 달력 정보

또한 Calendar의 year과 month를 private 변수로 하여 외부에서 접근을 하지 못하게 했습니다. 때문이 이를 접근하기 위해선 getYear() 메서드와 getMonth() 메서드를 사용해야 합니다.

---

다음은 이번 챕터를 진행하면서 작성한 코드의 내용이 담긴 commit입니다. 제목 및 Calendar 객체 예제 코드 수정, Calendar 클래스 수정으로 인해 commit이 세 개 입니다.🥲

feat: 라이브러리 없이 자바스크립트로 달력 만들기 1 - 필요한 정보 만들기 · nlom0218/vanilla-calendar@

feat: 라이브러리 없이 자바스크립트로 달력 만들기 1 - Date() 생성자를 사용하여 Calendar 객체 만들

reactor: 라이브러리 없이 자바스크립트로 달력 만들기 1 - Date() 생성자를 사용하여 Calendar 객체 만