[Vue-todo-list] #1 Date 객체를 이용해 달력 숫자 구하기/지난 날짜, 오늘 날짜 구별을 위한 CSS 스타일링

 

vue.js로 만든 달력

 

 

맨 처음 Vue를 접했을 때 공식 문서를 보며 만들었던 To do list 예제가 있었다. 잊고 지내다가 몇 주 전에 이 예제 위에 TypeScript나 CSS framework인 Tailwinds 등을 공부해보고 싶어서 이것저것 생각이 날 때마다 실험하며 몇 개의 기능을 붙여나갔다. 그러다 Home 화면이 비어서 뭘 할지 고민하다가 JavaScript로 Date 객체를 많이 안 다뤄봐서 이 기회에 라이브러리 대신 직접 컴포넌트를 구현하면 좋을 것 같았다.

 

일단 달력처럼 이전 날짜로 돌아가기, 작년이나 내년 등으로 이동할 수 있도록 했다. 오늘 날짜로 되돌아오는 버튼과 올해의 특정 월로 이동할 수 있는 기능도 넣었다.

 

달력에 오늘 날짜를 표시해주는 마크가 붙고, to do list와 연계된 달력이니 해당 날짜에 생성한 to do가 있다면 파란색 빈 원으로, 해당 날짜에 완료한 to do가 있다면 색을 채우도록 간단하게 꾸몄다.

 

가장 먼저 달력 기능을 구현하기 위해서는 기준이 되는 오늘 날짜 구하기, 당월의 1일의 요일, 당월의 마지막 날짜, 직전 달의 마지막 날짜 등이 필요했다.

 

이번 달의 첫 번째 요일 구하기

JavaScript에서는 new Date()로 Date 객체를 생성한다. data 옵션에 year와 month를0으로 초기화해준 뒤 옵션 처리 등이일어나는 created() 훅 단계에서 아래 코드처럼 init() 메서드를 실행한다. 

// Calendar.vue

data() {
	return {
    	year: 0,
        month: 0
   }
}

// ..
created() {
	this.init()
},
methods: {
	init(param) {
      if (param) {
          this.year = param[0];
          this.month = param[1];
          this.calendarDate();
        } else {
          const date = new Date();
          this.year = date.getFullYear();
          this.month = date.getMonth() + 1;

          this.calendarDate();
        }
    }
}

init()는 param 이라는 인자를 하나 받는데, 앱이 맨 처음 실행될 때는 param이 존재하지 않으니 else로 들어가 오늘 날짜의 date 객체를 생성하고, 그로부터 year와 month를 하나씩 추출한다. month에 1을 더해주는 것은 getMonth()의 반환값이 배열처럼 0-based index이기 때문이다.

 

init()이 param을 받는 이유는 달력에서 다른 날짜로 이동하거나, 다른 해로 이동할 수 있기 때문에 그때마다 새로 데이터를 초기화해주어야 할 필요가 있어서다.

 

getFirstDayLastDate(year, month) {
      const firstDay = new Date(year, month - 1, 1).getDay();
      const lastDate = new Date(year, month, 0).getDate();

      let lastMonth = month - 1;
      if (month === 1) {
        lastMonth = 12;
        year -= 1;
      }
      const prevLastDate = new Date(year, lastMonth, 0).getDate();
      return [firstDay, lastDate, prevLastDate];
},

 

아까 구한 month에 + 1을 해준 상태이니, 이번 달의 요일을 구하기 위해서는 month 값을 다시 조정해준다. getDay() 메서드를 통해 요일을 구할 수 있는데 0-based이므로 0이 출력된다면 일요일을 의미한다.

마지막 날짜 구하기

// 2월 1일의 날짜 
const date = new Date(2021, 1, 1);
// 2월 28일의 날짜 (달의 마지막 날짜)
const lastDate = new Date(2021, 1, 0)
// 2월 27일의 날짜 (말일에서 하루 전)
const lastDateBefore = new Date(2021, 1, -1)

마지막 날짜의 경우 new Date(year, month, 0).getDate()로 구할 수 있다. 예를 들어 2월 1일의 날짜를 구하고자 한다면 new Date(2021, 1, 1), 마지막 날짜를 구하기 위해서는 세 번째 인자를 0으로 비워둔다. 마지막 날짜에서 하루 전 혹은 이틀 전을 구한다 하면 음수를 이용해 -1, -2로 쉽게 구할 수 있다.

 

이전 날짜를 구할 때는 현재 달이 1월인 경우를 고려한다. 즉 month === 1일 때 year에서 1를 빼 조정하고, lastMonth는 자동으로 12가 된다.

 

직전 달의 마지막 날짜까지 구하고, 구하고자 한 세 가지 값을 배열에 담아 반환한다.

 

getFirstDayLastDate(year, month) {
      const firstDay = new Date(year, month - 1, 1).getDay();
      const lastDate = new Date(year, month, 0).getDate();

      let lastMonth = month - 1;
      if (month === 1) {
        lastMonth = 12;
        year -= 1;
      }
      const prevLastDate = new Date(year, lastMonth, 0).getDate();
      return [firstDay, lastDate, prevLastDate];
    },

이제 달의 첫째 날부터 마지막 날까지의 값들을 2차원 배열의 형태로 담기로 한다. 달력은 table 태그로 짜서, 각 tr에 date 배열을 v-for로 돌려 출력했다.

 

date() {
  dates: [],
    year: 0,
    month: 0,
}

dates라는 빈 배열을 만들어준다. 여기에 배열인 원소들이 하나씩 채워질 것이다.

 

달력의 날짜 구하기 (이전 날짜, 현재 달의 날짜, 다음 달의 날짜)

getDaysOfMonth(monthFirstDay, monthLastDate, prevMonthLastDate) {
      let day = 1;
      let prevDay = prevMonthLastDate - monthFirstDay + 1;
      let dates = [];
      let daysOfWeek = [];

      while (day <= monthLastDate) {
        if (day === 1) {
          this.getPrevDates(monthFirstDay, daysOfWeek, prevDay);
          this.padDates(daysOfWeek);
        }

        if (daysOfWeek.length === 7) {
          dates.push(daysOfWeek);
          day = daysOfWeek[daysOfWeek.length - 1];
          daysOfWeek = [];
        } else if (
          daysOfWeek.length < 7 &&
          daysOfWeek.indexOf(monthLastDate) > -1
        ) {
          this.padDates(daysOfWeek);
          dates.push(daysOfWeek);
          break;
        }
        day++;
        if (daysOfWeek.length <= 7) {
          daysOfWeek.push(day);
        }
      }
      return dates;
    },

 

getDaysOfMont() 메서드에서는 해당 달의 날짜뿐만 아니라 이전 달의 날짜와 테이블의 마지막 칸을 마지막 날짜가 채우지 못하면 다음 달의 날짜들을 볼 수 있으므로 그 날짜들도 같이 가지고 오도록 한다.

prevDay는 달력이 어떤 숫자부터 시작해야 하는지 계산해 넣는 변수이다. 직전 달의 마지막 날짜(4월의 경우 3월이므로 31일)에서 해당 월의 첫 번째 날짜의 요일 (4월의 경우 1일이 목요일로 4)을 뺀 후 1을 더해준다.

 

31 - 4 + 1 = 28일부터 달력이 시작한다.

 

day가 마지막 날짜일 때까지 반복하는 while 반복문에서 1일일 경우 prevDay부터 시작해 말일까지의 날짜를 계산하는 getPrevDates 사용자 함수를 호출하고, 7일이 다 채워지지 않았으니 이어서 1일부터 시작해 length 7짜리 daysOfWeek 배열을 채우는 padDates 함수를 호출한다. 

 

만일 길이가 daysOfWeek의 길이가 7에 다다르면, dates 객체로 push해주고, 다시 daysOfWeek를 빈 배열로 초기화해주어야 한다. 이때 day는 push 해주기 전 daysOfWeek의 마지막 요소와 동일한 값이므로 day 변수에 넣어준 후, 조건문이 통과하고 나면 day++로 알맞은 숫자가 카운트될 수 있도록 한다. 1씩 증가하는 day는 daysOfWeek가 꽉 채워질 때까지 계속 반복하고 day = 1인 케이스와 마찬가지로 day가 마지막 날짜에 다다랐을 때 date를 pad해서 daysOfWeek 배열을 채워주도록 한다.

 

getPrevDates(monthFirstDay, daysOfWeek, prevDay) {
      for (let j = 0; j < monthFirstDay; j++) {
        daysOfWeek.push(prevDay);
        this.prevDate.push(prevDay);
        prevDay += 1;
      }
    },
    padDates(daysOfWeek) {
      const len = daysOfWeek.length;
      const leftDays = 7 - len;
      if (len >= 0 && len < 7) {
        for (let i = 1; i <= leftDays; i++) {
          daysOfWeek.push(i);
          if (this.previewDate.length < leftDays) this.previewDate.push(i);
        }
      }
    },

 

이전 날짜를 pad해주는 함수와 달의 맨 아래 칸의 날짜를 pad해주는 메서드를 각각 따로 만들었다.

 

calendarDate() {
      const [
        monthFirstDay,
        monthLastDate,
        prevMonthLastDate
      ] = this.getFirstDayLastDate(this.year, this.month);
      this.dates = this.getDaysOfMonth(
        monthFirstDay,
        monthLastDate,
        prevMonthLastDate
      );
    },

이렇게 구한 dates는 맨 처음 인스턴스 데이터를 초기화할 때 빈 배열로 선언해두었던 dates에 담는다.

 

달력 이동하기

화살표 모양 아이콘과 오른쪽의 side menu를 통해 날짜를 이동할 수 있도록 했다. controlMonth() 메서드로 달을, controlYear() 메서드로 해를 옮기도록 했다. 인자를 다르게 줘서 메서드를 재사용한다.

 

controlMonth(p) {
      if (p === "prev") {
        this.currentMonth = this.month - 1;
        this.currentYear = this.year;
        if (this.month === 1) {
          this.currentMonth = 12;
          this.currentYear = this.year -= 1;
        }
      } else {
        this.currentMonth = this.month + 1;
        this.currentYear = this.year;
        if (this.month === 12) {
          this.currentMonth = 1;
          this.currentYear = this.year += 1;
        }
      }
      const param = [this.currentYear, this.currentMonth];
      this.init(param);
    },
    controlYear(p) {
      if (p === "prev") {
        this.currentYear = this.year - 1;
      } else {
        this.currentYear = this.year + 1;
      }
      const param = [this.currentYear, this.month];
      this.init(param);
    },

created() 훅에서 한 번 사용되었던 init은 이 메서드들에서는 param을 인자로 갖고 실행된다.

 

side menu를 통해 이동할 때는 오늘 날짜로 되돌아도록 해주는 메서드 하나, 각 달을 클릭했을 때 해당 달로 이동하는 메서드 하나를 만들었다. 그러고보니 달력에서 사용자가 현재 보고 있는 연도가 현재 연도와 다를 경우 side menu를 조작하면 무조건 올해 안의 날짜들만 볼 수 있도록 되어 있다. 시간이 나면 사용자가 설정해둔 해 안에서 달을 이동할 수 있도록 하면 조금 더 편할 듯싶다.

 

skipBy(p) {
      this.currentYear = new Date().getFullYear();
      if (p === "today") {
        this.currentMonth = new Date().getMonth() + 1;
      } else {
        this.currentMonth = p + 1;
      }
      const param = [this.currentYear, this.currentMonth];
      this.init(param);
    },

 

여기까지가 기본 기능을 위한 메서드들이라면, CSS 스타일링을 위해 추가한 메서드와 computed 속성이 몇 개 있다.

 

달력 스타일링을 위한 메서드

오늘 날짜에 원으로 마크를 하기 위해서 getMatchedTodos()라는 메서드를 만들어 boolean 타입을 반환하도록 하고, v-for로 날짜 <td> 태그를 반복하면서 그 중 오늘 날짜와 일치하는 태그에만 :class 바인딩을 통해 'selected-date'라는 클래스를 붙여주었다.

 

<tr v-for="(date, idx) in dates" :key="idx" class="flex w-full h-12 justify-around items-center mb-3">
  <td v-for="(day, index) in date" :key="index" class="w-12 h-12 flex flex-col justify-center items-center hover-date rounded-full"
:class="{'selected-date': day === currentDate && isCurrentDate, 'prev-dates': isPrevDates(day, idx)}">
            

 

prev-dates 클래스는 이전 날짜들일 경우 text color를 옅은 색으로 보여주기 위해 추가했다. 삼항 연산자를 통해 선택적으로 class를 바인딩한다. 여러 클래스에 대한 조작이 필요할 때는 객체로 묶는다.

 

자주 사용되는 함수들을 묶어서 더 적은 코드를 사용하는 방법을 연습할 수 있었던 예제였다. 물론 아직 코드 가독성이 낮게 길게 서술되어 있어서 쪼갤 필요가 있긴 하다.

 

또, Tailwinds를 제대로 사용해본 첫 번째 예제이기도 한데, 간략한 prototyping은 figma로 하고, 그때 그때 생각나는 걸 덧붙이는 형태로 만들다보니 스타일링에 시간을 많이 쓰는 게 싫었는데, 그때 Tailwinds를 사용하니 시간이 무척 절약됐다. 자주 쓰는 속성들은 겹치다보니 디자인에 통일성도 부여되어서 빠르게 빠르게 작업할 때는 무척 만족스러웠다.

 

💌 Calendar.vue 컴포넌트에 대한 전체 소스는 이곳에서