라이브러리 없이 자바스크립트로 달력 만들기 3 - Shift Month Button 만들기

이전 챕터에서 Schedule, Date Picker을 만들었지만 월(month)을 이동할 수 없어 이전, 다음 달을 볼 수 없는 아쉬움이 있었습니다. 이번 챕터에서는 이를 개선하고자 Shift Month Button을 만들어보겠습니다.

---

1. Calendar class에 기능 추가하기

Calendar class의 private filed을 보면 #year, #month가 있습니다. 이를 바탕으로 현재 년, 월에 해당하는 날에 대한 데이터를 getCalendarStorage() 메서드에서 만들고 있습니다. 때문에 월(month)을 이동하기 위해선 #month 값을 업데이트해야 합니다.

 

이와 관련된 로직을 Calendar class에 다음과 같이 추가합니다.

  // Calendar.ts
  
  shiftMonth = (type: 'next' | 'prev' | 'today') => {
    if (type === 'today') {
      const today = new Date();

      this.#year = today.getFullYear();
      this.#month = today.getMonth() + 1;

      return;
    }

    const changedMonth = this.#month + (type === 'next' ? +1 : -1);

    if (changedMonth === 0) {
      this.#year -= 1;
      this.#month = 12;

      return;
    }

    if (changedMonth === 13) {
      this.#year += 1;
      this.#month = 1;

      return;
    }

    this.#month = changedMonth;
  };

메서드 이름은 shiftMonth입니다. 매개변수로는 next, prev, today만 받을 수 있으며 각각, 다음 달, 이전달, 오늘이라는 의미를 가지고 있습니다.

 

각각의 타입에 따라 어떻게 처리를 하는지 살펴보겠습니다.

 

우선 type이 today일 때, 오늘 날짜를 구해 년(year), 월(month)을 구해 #year, #month를 업데이트합니다.

 

타입이 next일 땐, #month에 +1을 prev일 땐, #month에 -1만 해서는 이동하게 될 월(month)을 알 수 있을까요? 반은 맞고 반은 틀렸다고 할 수 있습니다.

 

다음과 같은 상황을 생각해보겠습니다.

 

1. 12월에서 next를 하게 된다면 13월이 된다.

2. 1월에서 prev를 하게 된다면 0월이 된다.

 

13월과 0월 이상합니다. 때문에 이에 대한 조건문 처리가 필요합니다. 그전에 next, prev를 바탕으로 이동하게 될 월(month)을 구합니다. 위 코드에서는 해당 월(month)을 changedMonth 변수에 저장하고 있습니다.

 

이후 changedMonth가 0이라면 년(year)을 1 감소시키고 월(month)을 12월로 합니다. 반대로 changedMonth가 12이라면 년(year)을 1 증가시키고 월(month)을 1월로 합니다.

 

마지막으로 0, 12가 아니라면 년(year)은 변경하지 않고 월(month)을 changedMonth로 합니다.

 

로직 자체는 간단합니다. 그렇다면 shiftMonth 메서드를 사용하기 위해 버튼을 이어서 만들어 보겠습니다.

 

다음은 이번 작업에 대한 commit입니다.

feat: 라이브러리 없이 자바스크립트로 달력 만들기 3 - Shift Month Button 만들기 · nlom0218/vanilla-calenda

---

2. Schedule에 Shift Month Button 만들기

Schedule

저는 현재 달력의 년, 월 텍스트 오른쪽 끝에 보여주면 좋다고 생각하기 때문에 그곳에 Shift Month Button을 만들어 보겠습니다.

 

현재 달력의 년, 월 텍스트는 Schedule class, renderCalendar 메서드의 yearMonthTemplate에 의해 그려집니다. 이 template에 버튼을 위한 코드를 작성하겠습니다.

 

기존의 yearMonthTemplate를 다음과 같이 수정합니다.

// Schedule.ts

const yearMonthTemplate = `
  <div class="schedule-year-month">
    <span>${this.#calendar.getYear()}년 ${this.#calendar.getMonth()}월</span>
    <div class="shift-month-button-container">
      <button class="shift-month-button shift-mont-today-button" data-type="today">TODAY</button>
      <button class="shift-month-button shift-mont-arrow-button" data-type="prev">◀︎</button>
      <button class="shift-month-button shift-mont-arrow-button" data-type="next">▶︎</button>
    </div>
  </div>
`;

schedule-year-month을 크게 두 부분으로 나누었습니다. 하나는 현재 달력의 년, 월이고 다른 하나는 달력의 월(month)을 이동시킬 수 있는 버튼들입니다.

 

css은 다음의 github 주소에서 확인할 수 있습니다. shift-month-button을 위한 css는 Date Picker Calendar에서도 다시 쓰이기 때문에 따로 파일을 나누었습니다. 자세한 내용은 이번 파트 하단의 commit를 참고해 주세요.

https://github.com/nlom0218/vanilla-calendar/blob/main/src/css/shiftMonthButton.css

 

이어서 버튼에는

 

1. 오늘에 해당하는 년, 월로 이동할 수 있는 TODAY 버튼

2. 이전달로 이동할 수 있는 ◀︎ 버튼

3. 다음 달로 이동할 수 있는 ▶︎ 버튼

 

이 있습니다. 이 버튼들에는 data-set 어트리뷰트를 활용하여 버튼의 type를 저장하고 있습니다. 이렇게 저장된 type은 Calendar 인스턴스의 shiftMonth 메서드의 인자로 전달됩니다.

 

완성된 Shift Month Button의 모습입니다.

Shift Month Button

다음이 이번 작업에 대한 commit입니다.

feat: 라이브러리 없이 자바스크립트로 달력 만들기 3 - Shift Month Button 만들기 · nlom0218/vanilla-calenda

 

---

3. Shift Month Button에 Shift Month Event 등록하기

Shift Month Button이 완성되었으니 이벤트를 등록하여 실제로 월(month)을 이동시키도록 하겠습니다.

 

먼저 해야 할 일은 Shift Month Button이 그려진 후 버튼에 click 이벤트를 추가하는 것입니다. 이를 위해 다음과 이벤트 추가 로직을 작성합니다.

  // Schedule.ts
  
  private renderCalendar = () => {
    // ...

    $('.schedule-container').innerHTML = yearMonthTemplate + calendarTemplate;
    this.registerEventListener();
  };
  
  private registerEventListener = () => {
    $('.shift-month-button-container').addEventListener(
      'click',
      this.handleShiftMonth
    );
  };

이는 이벤트를 추가하는 메서드로 renderCalendar 메서드에서 호출합니다.

 

이후 클릭에 대한 이벤트핸들러 메서드를 만들어야 합니다. 위 코드에서 알 수 있듯이 해당 메서드명은 handleShiftMonth입니다. 이 메서드는 다음과 같은 로직을 가집니다.

  // Schedule.ts
  
  private handleShiftMonth: EventListener = (event) => {
    const button = event.target; // 사용자가 클릭한 버튼 파악

    if (!(button instanceof HTMLButtonElement)) return; // 클릭한 요소가 ButtonElement인지 확인

    const type = button.dataset.type as 'next' | 'prev' | 'today'; // data-set 값 화인

    this.#calendar.shiftMonth(type);
    this.renderCalendar();
  };

사용자가 클릭 한 버튼의 data-set 값을 바탕으로 type을 가져온 뒤, Calendar 인스턴스의 shiftMonth 메서드의 인자로 전달해야합니다. 이렇게 됨으로써 Calendar 인스턴스는 자체적으로 년(year), 월(month)을 업데이트하게 됩니다.

 

마지막으로 renderCalendar 메서드를 호출하여 새로운 달력 데이터를 가져오고 이를 바탕으로 화면을 그리게 됩니다.

 

1. this.#calendar.shiftButton(type): Calendar 인스턴스의 내부 private filed인 #year, #month을 업데이트한다.

2. renderCalendar(): 달력을 다시 render 하여 업데이트한 년, 월을 반영합니다.

 

최종 결과는 다음과 같습니다.

Schedule Caledar

다음은 이번 작업에 대한 commit입니다.

feat: 라이브러리 없이 자바스크립트로 달력 만들기 3 - Shift Month Button 만들기 · nlom0218/vanilla-calenda

또한 다음은 Schedule class를 리팩터링 한 부분입니다. 위와 비교해서는 remove를 제거했습니다.

refactor: 라이브러리 없이 자바스크립트로 달력 만들기 3 - Shift Month Button 만들기 · nlom0218/vanilla-cal

---

4. 재사용 가능한 로직 분리하기

Schedule class에 월(month)을 이동하기 위한 로직을 작성했습니다. 이는 DatePicker class에서도 필요합니다. 때문에 똑같은 로직을 두 번 사용하는 것보다, 같은 기능을 하는 로직을 분리하여 여러 곳에서 사용(재사용)할 수 있도록 분리하는 것이 필요합니다.(물론 똑같은 로직을 그대로 사용해도 됩니다.)

 

어떤 로직이 재사용 가능할까요? 두 개의 관점에서 생각해 볼 수 있습니다.

 

1. UI: 달력의 월(month) 이동에 대한 버튼은 중복됩니다.

2. 기능: Calendar의 #year, #month을 업데이트하기 위한 로직이 중복됩니다.

 

이를 분리하여 DatPicker class에서 사용하면 좋을 듯합니다.

4-1. 중복되는 UI 분리하기

먼저 Schedule class에서 작성한 버튼에 대한 template를 보겠습니다.

const yearMonthTemplate = `
  <div class="schedule-year-month">
    <span>${this.#calendar.getYear()}년 ${this.#calendar.getMonth()}월</span>
    <div class="shift-month-button-container">
      <button class="shift-month-button shift-mont-today-button" data-type="today">TODAY</button>
      <button class="shift-month-button shift-mont-arrow-button" data-type="prev">◀︎</button>
      <button class="shift-month-button shift-mont-arrow-button" data-type="next">▶︎</button>
    </div>
  </div>
`;

가장 부모의 div를 제외한 부분은 재사용이 가능합니다. font-size와 padding과 같은 스타일은 Schedule와 Date Picker에서 서로 다르기 때문입니다.

 

이는 calendar가 schedule인지? datePicker인지?에 따라 부모 div의 class name을 정함으로써 해결할 수 있습니다. 즉, 다음과 같이 함수를 만들어볼 수 있습니다.

const yearMonthTemplate = (
  calendar: 'schedule' | 'datePicker',
  year: number,
  month: number
) => `
    <div class=${
      calendar === 'schedule' ? 'schedule-year-month' : 'date-picker-year-month'
    }>
        <span>${year}년 ${month}월</span>
        <div class="shift-month-button-container">
            <button class="shift-month-button shift-mont-today-button" data-type="today">TODAY</button>
            <button class="shift-month-button shift-mont-arrow-button" data-type="prev">◀︎</button>
            <button class="shift-month-button shift-mont-arrow-button" data-type="next">▶︎</button>
        </div>
    </div>
`;

export default yearMonthTemplate;

위 함수는 3개의 매개변수를 받습니다.

 

1. calendar: schedule인지, datePicker인지 판단합니다. 이에 따라 부모 div의 class name이 달라집니다.

2. year: 달력의 년도(year)입니다.

3. month: 달력의 월(month)입니다.

 

저는 이와 같은 함수를 ts/template 폴더에 파일을 만들어 분리했습니다.

 

이렇게 분리를 하게 된다면 이제는 Schedule class에서 yearMonthTemplate를 직접 만들지 않아도 됩니다. 위 함수를 호출하기만 하면 됩니다. 다음과 같이 말이죠.

$('.schedule-container').innerHTML =
  yearMonthTemplate(
    'schedule',
    this.#calendar.getYear(),
    this.#calendar.getMonth()
  ) + calendarTemplate;

함수를 바로 호출하고 이를 바로 calendarTemplate과 함께 schedule-container 내부에 넣는 로직입니다. 기존 yearMonthTemplate를 삭제를 해야 합니다.

 

돌이켜 생각해 보니 함수이기 때문에 앞에 get- 을 붙이는 것이 더 좋은 네이밍이 되겠네요.

4-2. 중복되는 기능 분리하기

중복되는 기능이라고 하면 사용자가 버튼을 눌렀을 때, 일어나는 동작입니다. 즉, 앞서 만든 handleShiftMonth에 해당합니다. 이 함수를 다시 살펴보겠습니다.

  private handleShiftMonth: EventListener = (event) => {
    const button = event.target;

    if (!(button instanceof HTMLButtonElement)) return;

    const type = button.dataset.type as 'next' | 'prev' | 'today';

    this.#calendar.shiftMonth(type);
    this.renderCalendar();
  };

마지막 라인에 있는 this.renderCalendar()를 제외한 부분은 동일하게 실행될 것입니다. 때문에 마지막 라인에 해당하는 부분은 callback으로 두고 나머지는 그대로 사용하면 좋을 것입니다.

 

저는 이 부분을 재사용하기 위해 다음과 같이 분리했습니다.

import Calendar from '../Calendar';

interface MonthClickEventListener {
  (evt: Event, calendar: Calendar, callback: () => void): void;
}

const handleShiftMonth: MonthClickEventListener = (
  event,
  calendar: Calendar,
  callback
) => {
  const button = event.target;

  if (!(button instanceof HTMLButtonElement)) return;

  const type = button.dataset.type as 'next' | 'prev' | 'today';

  calendar.shiftMonth(type);
  callback();
};

export default handleShiftMonth;

함수이름은 기존과 동일합니다. 하지만 타입이 다릅니다. 분리한 handleShiftMonth 함수는 MonthClickEventListener 타입입니다. 이는 3개의 매개변수를 받습니다.

 

1. event: 기존 Event Listener와 같은 Event 타입입니다.

2. calendar: Calendar의 #year, #month을 업데이트하기 위해선 어떤 Calendar인지 알아야 합니다.

3. callback: 마지막에 실행된 로직을 받습니다.

 

사용하는 곳에선 다음과 같이 사용합니다. 이때, 기존의 handleShiftMonth 함수는 삭제합니다.

  private registerEventListener = () => {
    $('.shift-month-button-container').addEventListener('click', (event) =>
      handleShiftMonth(event, this.#calendar, this.renderCalendar)
    );
  };

사용하는 곳에서 더욱 간결해졌습니다.

4-3. 마무리

Schedule class에서 추가한 로직을 바탕으로 재사용 가능한 부분을 분리했습니다. 이렇게 분리함으로써 더 빠르고 간결하게 기능을 추가할 수 있게 되었습니다.

 

다음은 이번 작업에 대한 commit입니다.

feat: 라이브러리 없이 자바스크립트로 달력 만들기 3 - Shift Month Button 만들기 · nlom0218/vanilla-calenda

---

5. Date Picker에 Shift Month 기능 추가하기

앞선 작업으로 인해 DatePicker class에서는 아주 간단한 작업만 하면 됩니다.

5-1. Shift Month Button 만들기

yearMonthTemplate 함수를 통해 빠르게 Shift Month Button이 포함된 UI를 만들 수 있습니다. 먼저 기존에 DatePicker class의 renderCalendar 메서드의 yearMonthTemplate를 제거합니다. 그리고 innerHTML 부분을 다음과 같이 수정합니다.

$('.date-picker-calendar-layout').innerHTML =
  yearMonthTemplate(
    'datePicker',
    this.#datePickerCalendar.getYear(),
    this.#datePickerCalendar.getMonth()
  ) + calendarTemplate;

첫 번째 인자만 다르게 전달하면 스타일 변경 없이 버튼만 생깁니다.

5-2. Shift Month Event 등록하기

UI를 만들었으니 기능을 추가해 봅시다. 이 또한 간단하게 할 수 있습니다.

 

기존 registerCalendarEventListener 메서드에 다음과 같이 새로운 event listener를 추가하면 됩니다.

$('.shift-month-button-container').addEventListener('click', (event) =>
  handleShiftMonth(event, this.#datePickerCalendar, this.renderCalendar)
);

5-4. 마무리 및 최종결과

마지막 파트는 이전 파트들과 다르게 매우 간단했습니다. 이전 파트들에서 어떤 로직인지 파악을 하고 이를 분리한 뒤 재사용만 했기 때문입니다. 간단해도 기대했던 동작은 잘 실행됩니다.

Date Picker

다음은 이번 작업에 대한 commit입니다. 여기서 datePicker.css에서 바뀐 부분도 확인할 수 있습니다.

feat: 라이브러리 없이 자바스크립트로 달력 만들기 3 - Shift Month Button 만들기 · nlom0218/vanilla-calenda