JS로 달력 만들기
🗓
• 집계 중...
다른 라이브러리 없이 Vanilla JS만으로 달력을 작성해보자. 우아한테크캠프 당시 3번째 프로젝트 "뱅크샐러드 클론 만들기"에서 내가 담당했던 파트이다. 복습하고 정리하는 차원에서 다시 작성해보기로 했다.
완성본 미리보기
목표
- DOM 생성 이후 DOM 조작하지 않기. 즉 모든 작업은 페이지를 생성하는 시점에서 끝내기. document.querySelector와 같은 DOM API를 사용하고자 않고자 하는 것이다. 이는 "이쪽에서 A로 조작하고 저쪽에서 B로 조작하고 또 반대편에서 C로 조작하고 순서 꼬이고 코드 엉키고" 같은 현상을 방지하기 위함이다. 단, 처음 앱을 선택하여 initialize할 때만
document.querySelector('#App')
을 사용한다. - OOP 자바스크립트 대신 작은 함수들로 작성하기
사용할 스택
- Date Object (Vanilla JS)
- Display: Grid (CSS)
1. index.html 작성하기
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Calendar + Grid</title>
</head>
<body>
<div id="App"></div>
</body>
</html>
VS Code의 보일러 플레이트를 사용했다.
2. calendar.js 작성하기
우선 index.html
의 head
태그 안에 코드를 연결하자.
<script src="calendar.js"></script>
2-1. calendar.js에 사용할 util 함수 작성하기
html
string highlighting을 위한 html 함수를 추가한다. 이 함수를 추가하고 backtick으로 감싸진 JS String 앞에 html 글자를 추가하면 JS String을 html처럼 하 이라이팅하여 사용할 수 있다.
const html = (s, ...args) => s.map((ss, i) => `${ss}${args[i] || ''}`).join('')
매직넘버를 없애기 위해 const
들을 추가해주었다. 코드 중 갑자기 7
이 튀어나오면 어느 맥락의 7인지 알기 어렵기 때문이다.
const NUMBER_OF_DAYS_IN_WEEK = 7
const NAME_OF_DAYS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat']
가장 기초가 될 renderCalendar
를 작성해주었다. 또한 renderCalendar
를 기존 index.html
최하단에 연결해주었다.
const renderCalendar = ($target) => {
$target.innerHTML = getCalendarHTML()
}
<script>
renderCalendar(document.querySelector('#App'))
</script>
달력을 그리기 위해서 총 4개의 Date 객체가 필요했다. 물론 더 적은 Date 객체로 처리할 수도 있다. 달력에 구현할 기능들에 따라 필요한 Date 객체의 개수가 달라진다.
- 지난 달 마지막 날: 달력에 지난 달을 그릴 때 일요일을 하이라이트하기 위해 필요하다.
- 이번 달 첫 날: 이번 달의 토요일과 일요일의 파악하여 하이라이트 하기 위해 필요하다. 또한 이번 달 첫 날의 요일을 통해 지난 달 마지막 주를 달력에 표시할 때 필요하다.
- 이번 달 마지막 날: 이번 달의 달력을 for statement로 그릴 때 필요하다.
- 다음 달 첫 날: 달력에 다음달을 그릴 때 토요일을 하이라이트하기 위해 필요하다.
이 4개의 날짜를 object로 묶어 return