이민재의 개발일지

안녕하세요! 오늘은 JavaScript를 사용하여 달력을 구현하는 방법을 알아보겠습니다. 달력은 웹 개발에서 흔히 사용되는 UI 요소이며, 다양한 기능을 구현하는 데 활용될 수 있습니다.

1. 요일 계산

달력을 만들기 위해서는 먼저 각 달의 1일이 어느 요일인지 알아야 합니다. 이를 위해 getFirstDayIndex 함수를 정의합니다.

const getFirstDayIndex = (year, month) => {
  return (new Date(year, month, 1).getDay() + 6) % 7;
};

이 함수는 다음과 같이 작동합니다.

1. new Date(year, month, 1): 해당 년, 월의 1일을 나타내는 Date 객체를 생성합니다.
2. .getDay(): Date 객체의 요일을 가져옵니다. (0: 일요일, 1: 월요일, ..., 6: 토요일)
3. + 6: 요일 값을 0부터 시작하도록 변환합니다.
4. % 7: 7로 나눈 나머지를 계산하여 0부터 6 사이의 값을 얻습니다.

예를 들어, 2024년 3월 1일은 수요일입니다. 따라서 getFirstDayIndex(2024, 2) 함수는 3을 반환합니다.

2. 날짜 수 계산

다음으로 각 달의 날짜 수를 계산해야 합니다. 이를 위해 getDaysInMonth 함수를 정의합니다.

export const getDaysInMonth = (year, month) => {
  return new Date(year, month + 1, 0).getDate();
};

이 함수는 다음과 같이 작동합니다.

1. new Date(year, month + 1, 0): 해당 년, 월의 다음 달의 0일을 나타내는 Date 객체를 생성합니다.
2. .getDate(): Date 객체의 날짜를 가져옵니다.

예를 들어, 2024년 3월은 31일입니다. 따라서 getDaysInMonth(2024, 2) 함수는 31을 반환합니다.


달력도 고도화할 수 있는 여지가 많으며 구현 방법도 가지각색입니다. 다음 포스팅에서는 완성된 달력의 예시를 가져오면서 어떤 코드가 추가로 들어가는지 서술하겠습니다.