calendar 개발 회고

✓ 왜 만들었냐고요?

오픈 소스를 만들게 된 이유요?
재밌어 보여서요.

 

사실 오픈소스를 지도와 달력을 고민하긴했다.

근데 달력으로 고른 이유는 지도로 하게되면 ip 부터 공부하고싶어져서 시작을 못할까봐요.(이상한 미친 변태가 나예요.)

그럼 달력은 왜 Date부터 안파나구요? 할거예요. 
이 블로깅이 끝나면 어떻게 구현된건지 하나하나 찢어놓을거다. 

너굴맨은 코드를 찢어. 지피티와 커피만있으면 언제든 할 수 있어.

 

---

✓ 달력을 만들때 고려했던 부분

해당 달이 며칠까지 있는지

해당 달이 며칠까지 있는지 확인하는 로직을 만드는 것은 그리 어렵지 않다.

특정 달의 마지막 날을 구하면 되는데, Date 객체에 0을 입력하면 된다.

/**
 * 특정달의 마지막 날을 구하는 함수
 * @param year [number] : 특정 년도
 * @param month [number] : 특정 달
 * @returns 특정 달의 마지막 날
 */
function getLastDayOfMonth(year,month){
	return new Date(year,month,0).getDate()
}

 

 

 해당 달이 몇요일로 시작하는지

달력에서 중요한 부분은 해당 날짜의 요일이다. 

따라서 특정 달이 1일이 무슨 요일에 시작하는지가 가장 중요하다. 

이부분 로직을 구현하기 위해서는 기본개념을 조금 이해하고있으면 좋다.

date 객체의 반환값을 이해하기에 도움이 되기 때문!

📆 요일을 구하기 위한 기본 개념

날짜를 요일로 변환시 기준일과 현재 날짜간의 경과일수를 계산해야 한다.

1.  기준일 : 1970년 1월 1일 (목요일, 요일값=4)
2. 요일 계산 : (경과 총일수 + 기준일의 요일=4) % 7
[ 0: 일요일 , 1: 월요일, 2:화요일, 3:수요일, 4:목요일, 5:금요일, 6:토요일 ]

 

위의 배열의 인덱스값이 아래의 Date객체의 반환값이 될 것이다. 

아래 Date객체는 특정 달의 1일이 어떤 요일인지를 반환하는 코드인데, number 형태로 반환해준다. 

function getFirstDayOfMonth(year, month) {
  const date = new Date(year, month - 1, 1); 
  const days = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
  return days[date.getDay()];
}

위에서 언급한 바와 같이 위 함수는 number형태로 값을 반환하며, 해당 number는 배열의 index와 같다.

따라서 순서를 임으로 변경하면 그 달력은 망한다 이말이야!

무조건 0번 인덱스는 일요일부터 시작해야한다.

---

✓ 상태관리는 어떻게 했나?

상태 관리라 할 만큼의 거창한 무언가가 있지 않다. 

캘린더 헤더와 바디를 합치는 최상단에서 state,setState를 props로 내려 body에서 액션이 발생하면 헤더와 외부에서 알 수 있도록 만들었을 뿐이라 관리라 할 게 없다.

state 관리

이렇게 props를 내리면서 내겐 숙제가 생겼다. 

바로~ 리렌더~ 후후후

이 블로깅이 끝나면 atom단위로 리렌더를 잡아갈 생각이다. 

난 개쩌는 너굴맨이라는 생각으로 일단 커피랑 지피티와 함께 어디든 가볼예정이다.(주륵-)

 

---

✓ 사용자 편의 기능은 없어요? 다른 기능은요?

이 달력은 놀랍게도 버전이 업데이트 될 예정이랍니다.
두 눈을 부릅뜨고 지켜봐주세요.
우선은 리렌더로 잔잔바리 버전 업데이트 할 예정이구 이후 인풋 달력, 범위 선택, 등등을 만들어 갈 예정입니다.

네개 이상의 달력이 만들어지면 사용 방법 가이드 북 페이지도 만들어 보겠읍니다.