๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ด ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฌ๋ ฅ ๋ง๋ค๊ธฐ๋ ์ฐํ ์ฝ 'ํ๋ฃจ์คํฐ๋' ํ๋ก์ ํธ๋ฅผ ์งํํ๋ฉด์ ์ง์ ๋ง๋ ๋ฌ๋ ฅ์ ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ค์ ๊ตฌํํ๋ฉด์ ์ ๋ฆฌํ ๋ด์ฉ์ ๋๋ค. 'ํ๋ฃจ์คํฐ๋' ํ๋ก์ ํธ์์๋ ๋ฆฌ์กํธ๋ก ๋ฌ๋ ฅ์ ๊ตฌํํ์ง๋ง ์ด๋ฒ์๋ ๋ฐ๋๋ผ ์๋ฐ์คํฌ๋ฆฝํธ์์ ๊ตฌํ์ ํฉ๋๋ค. ๋ฆฌ์กํธ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด๋ฏ๋ก ๋ฆฌ์กํธ์์ ์ฌ์ฉํ๊ณ ์ ํ๋ค๋ฉด ํ๊ฒฝ์ ๋ง๊ฒ ๋ณํํ์ฌ ์ฌ์ฉํ ์ ์์ต๋๋ค. ๋ค์์ 'ํ๋ฃจ์คํฐ๋' ํ๋ก์ ํธ์์ ๋ฌ๋ ฅ ๊ตฌํ๊ณผ ๊ด๋ จ๋ PR์ ๋๋ค.
[FE] member record Calendar ๊ธฐ๋ฅ ์ถ๊ฐ by nlom0218 · Pull Request #613 · woowacourse-teams/2023-haru-study
๊ด๋ จ ์ด์ closed #602 ๊ตฌํ ๊ธฐ๋ฅ ๋ฐ ๋ณ๊ฒฝ ์ฌํญ ์ฌ์ฉ์ ๊ธฐ๋ก ํ์ด์ง์ ๋ฌ๋ ฅ ๊ธฐ๋ฅ ์ถ๊ฐ ๊ธฐ๊ฐ ์กฐํ(๊ธฐ๊ฐ ๊ฒ์) ๊ธฐ๋ฅ ์ถ๊ฐ ํ์ด์ง๋ค์ด์ ๊ธฐ๋ฅ ์ถ๊ฐ ์ค์ผ๋ ํค ๋ฐ ๋ฐ์ํ UI ์ถ๊ฐ ์ฐธ๊ณ ๋ด์ฉ ๋ฌ๋ ฅ UI์ ๊ธฐ๊ฐ
github.com
๊ฐ์ฅ ๋จผ์ ์ดํด๋ณผ ๋ด์ฉ์ Date() ์์ฑ์๋ฅผ ์ฌ์ฉํ์ฌ ํ๋ฉด์ ๋ณด์ฌ ์ค ๋ , ์, ์ผ์ ๊ฐ์ ธ์ค๋ ๊ฒ์ ๋๋ค. ์ด ํํธ์์๋ ํด๋น ๋ด์ฉ์ ๋ค๋ฃน๋๋ค.
1. ๊ธฐ๋ณธ setting
๋น ๋ฅธ ํ๊ฒฝ ๊ตฌ์ฑ์ ์ํด vite(vanilla JS์ typescript)๋ฅผ ์ฌ์ฉํฉ๋๋ค. ์ํ๋ ํด๋๋ก ์ด๋ํ์ฌ ๋ค์๊ณผ ๊ฐ์ ๋ช ๋ น์ด๋ฅผ ํฐ๋ฏธ๋์ ์ ๋ ฅํฉ๋๋ค.
$ yarn create vite vanilla-calendar --template vanilla-ts
์ดํ, src/main.ts์ ๋ด์ฉ์ ๋ชจ๋ ์ง์ฐ๊ณ src/counter.ts์ src/style.css์ ํ์ผ ์์ฒด๋ฅผ ์ง์๋๋ค. ๊ทธ ์ธ indext.html์ lang, title๋ ์๋ง๊ฒ ๋ฐ๊ฟ๋๋ค. ์ด๋ ๊ฒ ๊ธฐ๋ณธ setting์ ๋ง๋ฌด๋ฆฌํฉ๋๋ค.
chore: ๊ธฐ๋ณธ setting · nlom0218/vanilla-calendar@e58478e
nlom0218 committed Oct 8, 2023
github.com
chore: main, counter, style.css ์ด๊ธฐํ · nlom0218/vanilla-calendar@85c20e7
nlom0218 committed Oct 8, 2023
github.com
2. Date() ์์ฑ์
Date() ์์ฑ์๋ฅผ ์ฌ์ฉํ๋ค๋ฉด ์ค๋์ ํด๋นํ๋ Date ๊ฐ์ฒด๋ฅผ ์ป์ ์ ์์ต๋๋ค. ๋ํ ์ ์ ํ ๋งค๊ฐ๋ณ์๋ฅผ ์ ๋ฌํ๋ค๋ฉด ํน์ ๋ , ์, ์ผ์ ํด๋นํ๋ Date ๊ฐ์ฒด๋ ์ป์ ์ ์์ต๋๋ค. ์ด๋ฌํ Date ๊ฐ์ฒด๋ ๋ค์ํ ๋ฉ์๋๋ฅผ ์ ๊ณตํ๋๋ฐ ์ด๋ฅผ ํ์ฉํ์ฌ ํน์ ๋ฌ์ ํ์ํ ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ฌ ์ ์์ต๋๋ค.
new Date() // Sun Oct 08 2023 10:58:16 GMT+0900 (GMT+09:00)
new Date(2023, 0, 1) // Sun Jan 01 2023 00:00:00 GMT+0900 (GMT+09:00)
new Date("2023-01-01") // Sun Jan 01 2023 09:00:00 GMT+0900 (GMT+09:00)
Date() ์์ฑ์ - JavaScript | MDN
Date ์์ฑ์๋ ์๊ฐ์ ํน์ ์ง์ ์ ๋ํ๋ด๋ Date ๊ฐ์ฒด๋ฅผ ํ๋ซํผ์ ์ข ์๋์ง ์๋ ํํ๋ก ์์ฑํฉ๋๋ค. Date ๊ฐ์ฒด๋ 1970๋ 1์ 1์ผ UTC(๊ตญ์ ํ์ค์) ์์ ์ผ๋ก๋ถํฐ ์ง๋ ์๊ฐ์ ๋ฐ๋ฆฌ์ด๋ก ๋ํ๋ด๋ UNIX
developer.mozilla.org
2-1. ์ด๋ค ์ ๋ณด๊ฐ ํ์ํ ๊น์?
Date() ์์ฑ์๋ฅผ ํตํด ์ด๋ ํ ์ ๋ณด๋ฅผ ์์์ผ ํ ๊น์? ์ด๋ฅผ ๋จผ์ ์ดํด๋ณด๊ฒ ์ต๋๋ค.
๋ฌ๋ ฅ์ ๋ง๋ค๊ธฐ ์ํด ํน์ ๋ , ์์ ์ฒซ์งธ ๋ ๊ณผ ๋ง์ง๋ง๋ ์ ์์์ผ ํฉ๋๋ค. ํ์ง๋ง ์ด๋ฟ๋ง ์๋๋ผ ์ด์ ๋ฌ, ๋ค์ ๋ฌ์ ์ ๋ณด๋ ํ์ํ ๊ฒฝ์ฐ๊ฐ ์์ต๋๋ค. ๋ค์ ์ฌ์ง์ ๋ณด๋ฉด ์ด๋ค ์ ๋ณด์ธ์ง ์ฝ๊ฒ ํ์ ํ ์ ์์ต๋๋ค.
์๋ 2023๋ 7์์ ๋ฌ๋ ฅ์ ๋๋ค. ๋จ์ง 7์ 1์ผ ๋ถํฐ ์์ํ์ฌ 7์ 31์ผ์ ๋๋๋ ๊ฒ์ด ์๋๋ผ ์ด์ ๋ฌ์ด 6์, ๋ค์ ๋ฌ์ธ 8์์ ์ ๋ณด๋ ๋ด๊ฒจ ์์ต๋๋ค. ์ฆ, ํ ์ฃผ๊ฐ ๋ชจ๋ ์ฑ์์ง์ง ์์๋ค๋ฉด ์ด์ ๋ฌ, ๋ค์ ๋ฌ์ ์ ๋ณด๊ฐ ํ์ํฉ๋๋ค.
๋๋ ๋ค์๊ณผ ๊ฐ์ด ๋ค์ ๋ฌ ์ ๋ณด๋ง ํ์ํ ๊ฒฝ์ฐ๋ ์์ต๋๋ค.
์์ ๊ฐ์ด ํน์ ๋ฌ์ ์์์ด ํ ์ฃผ์ ์์์ธ ์ผ์์ผ์ด๋ผ๋ฉด ์ด์ ๋ฌ์ ์ ๋ณด๋ ํ์๊ฐ ์๊ณ ๋ค์๋ฌ์ ์ ๋ณด๋ง ํ์ํฉ๋๋ค.
์ด๋ฅผ ํ ๋๋ก ๋ค์๊ณผ ๊ฐ์ ์ ๋ณด๊ฐ ํ์ํ ๊ฒ์ ์ ์ ์์ต๋๋ค.
- ์ง๋ ๋ฌ์ ๋ง์ง๋ง ์ฃผ
- ์ด๋ฒ ๋ฌ
- ๋ค์ ๋ฌ์ ์ฒซ ๋ฒ์งธ ์ฃผ
์กฐ๊ธ ๋ ์ธ๋ถํํ๋ค๋ฉด ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
- ์ง๋๋ฌ์ ๋ง์ง๋ง ๋
- ์ด๋ฒ๋ฌ์ ์ฒซ ๋ฒ์งธ ๋
- ์ด๋ฒ๋ฌ์ ๋ง์ง๋ง ๋
- ๋ค์ ๋ฌ์ ์ฒซ ๋ฒ์งธ ๋
์ง๋๋ฌ, ๋ค์ ๋ฌ์ ์ ๋ณด๋ฅผ ๊ฐ์ ธ์ค๊ธฐ ์ํด ์ ์ฃผ(week)๊ฐ ์๋๋ผ ๋ (date)์ด ํ์ํ ๊น์? Date() ์์ฑ์๋ก๋ง์ ๋ง์ง๋ง, ์ฒซ ๋ฒ์งธ ์ฃผ๋ฅผ ์ ์ ์๊ธฐ ๋๋ฌธ์ ๋๋ค. ๊ทธ๋์ ๋ง์ง๋ง ๋ , ์ฒซ ๋ฒ์งธ ๋ ์ ๊ธฐ์ค์ผ๋ก ๋ง์ง๋ง ์ฃผ, ์ฒซ ๋ฒ์งธ ์ฃผ๋ฅผ ๊ตฌํด์ผ ํฉ๋๋ค.
3. ์ง๋ ๋ฌ์ ๋ง์ง๋ง ์ฃผ ๊ตฌํ๊ธฐ
3-1. ์ง๋ ๋ฌ์ ๋ง์ง๋ง ๋
์ง๋๋ฌ์ ๋ง์ง๋ง ์ฃผ๋ฅผ ๊ตฌํ๊ธฐ ์ ์ฐ์ ์ง๋๋ฌ์ ๋ง์ง๋ง ๋ ์ ๊ตฌํด์ผ ํฉ๋๋ค. ๊ทธ๋ ๋ค๋ฉด ์ง๋๋ฌ์ ๋ง์ง๋ง ๋ ์ ์ด๋ป๊ฒ ๊ตฌํ ์ ์์๊น์? ๋ง์ฝ 2023๋ 7์์ ๊ธฐ์ค์ผ๋ก ์ด์ ๋ฌ์ธ 6์์ ๋ง์ง๋ง ๋ ์ ๊ตฌํด์ผ ํ๋ค๋ฉด ๋ค์๊ณผ ๊ฐ์ด ์ฝ๋๋ฅผ ์์ฑํ ์ ์์ต๋๋ค.
new Date(2023, 6, 0) // Fri Jun 30 2023 00:00:00 GMT+0900 (GMT+09:00)
์ด๋ฅผ ํตํด 2023๋ 6์์ ๋ง์ง๋ง ๋ ์ 30์ผ์ด๊ณ ๊ธ์์ผ์ธ ๊ฒ์ ์ ์ ์์ต๋๋ค.
๊ฐ๋จํ๊ฒ ์ ์์ ๊ฐ์ ์ฝ๋๋ฅผ ํตํด ๊ตฌํ ์ ์๋์ง ์ดํด๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
Date() ์์ฑ์์ ์ ์ ํ ๋งค๊ฐ๋ณ์๋ฅผ ์ ๋ฌํ์ฌ ํน์ ๋ , ์, ์ผ์ ํด๋นํ๋ Date ๊ฐ์ฒด๋ฅผ ์์ฑํ ์ ์๋ค๊ณ ์ค๋ช ํ์ต๋๋ค. ์ ์ฝ๋๊ฐ ํด๋น ์ค๋ช ์ ๋ํ ํ๋์ ์์์ ๋๋ค. ์ฒซ ๋ฒ์งธ ๋งค๊ฐ๋ณ์๋ ๋ (year), ๋ ๋ฒ์งธ ๋งค๊ฐ๋ณ์๋ ์(month), ์ธ ๋ฒ์งธ ๋งค๊ฐ๋ณ์๋ ์ผ(date)์ ๋๋ค. ์ดํ์๋ ์๊ฐ, ๋ถ, ์ด ๋ฑ์ด ๊ฐ๋ฅํฉ๋๋ค. ์ด๋, ๋ ๊ณผ ์์ ํ์์ด๊ณ ๊ทธ ์ดํ๋ถํด ์๋ต๊ฐ๋ฅํ optional์ ๋๋ค.
Date ๊ฐ์ฒด์์ date์ ์ผ, day๋ ์์ผ์ ์๋ฏธํฉ๋๋ค.
๋ํ Date๊ฐ์ฒด์์ month์ day๋ ๋ค์๊ณผ ๊ฐ์ ํน์ง์ ๊ฐ์ง๊ณ ์์ต๋๋ค.
๋จผ์ month์ ๋๋ค. momth ์์์ 0์ ๋๋ค. ์ฆ, 1์์ 0์ด๊ณ 12์์ด๊ณ 11์ ๋๋ค. ์ด๋ Date ๊ฐ์ฒด๋ฅผ ์์ฑํ๊ณ getMonth() ๋ฉ์๋๋ฅผ ํธ์ถํ๋ฉด ํ์ธํ ์ ์์ต๋๋ค.
const date = new Date('2023-01-01');
date.getMonth(); // 0
์ฆ, ์ด๋ฌํ ํน์ง์ผ๋ก ์ธํด ์ ์ฝ๋์์์ 6์ 7์์ ์๋ฏธํฉ๋๋ค.
๊ทธ๋ฆฌ๊ณ date์ ์์์ 1์ ๋๋ค. ์ด๋ getDate() ๋ฉ์๋๋ฅผ ํธ์ถํ์ฌ ํ์ธํ ์ ์์ต๋๋ค.
const date = new Date('2023-01-01');
date.getDate(); // 1
ํ์ง๋ง ์ ์ฝ๋์์๋ 0์ ์ ๋ฌํ๊ณ ์์ต๋๋ค. ์ด๋ ์ด์ ๋ฌ์ ๋ง์ง๋ง ๋ ์ ์๋ฏธํฉ๋๋ค.
์ ๋ฆฌํ์ฌ new Date(2023, 6, 0)์ ํด์ํ๋ฉด ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
2023๋ 7์์ ์ด์ ๋ฌ์ธ 6์์ ๋ง์ง๋ง ๋ ์ ๋ํ Date ๊ฐ์ฒด๋ฅผ ๋ฐํํด ์ค
3-2. ์ง๋๋ฌ์ ๋ง์ง๋ง ์ฃผ
์ง๋ ๋ฌ์ ๋ง์ง๋ง ๋ ์ ํ ๋๋ก ๋ง์ง๋ง ์ฃผ๋ฅผ ๊ตฌํด๋ด ์๋ค. ์ฐ์ ๋ฐ๋ก ์์์ ๊ตฌํ ์ง๋ ๋ฌ์ ๋ง์ง๋ง ๋ ์ ๋ณ์์ ์ ์ฅ์ ํฉ๋๋ค.
const year = 2023
const month = 7
const prevMonthLastDateObject = new Date(year, month - 1, 0) // 7์ ์ด์ ๋ฌ(6์)์ ๋ง์ง๋ง ๋
๊ทธ๋ค์์ผ๋ก๋ ์์ผ์ ๋ฐํ์ผ๋ก ํ ์ฃผ์ ์์์ธ ์ผ์์ผ๊น์ง ๊ตฌํด์ผ ํฉ๋๋ค. ์ฆ, ์ฌ๊ธฐ์๋ถํฐ๋ ์์ผ์ด ํต์ฌ์ ๋๋ค. ์์ผ์ Date ๊ฐ์ฒด์ getDay() ๋ฉ์๋๋ฅผ ํตํด ๊ตฌํ ์ ์์ต๋๋ค. ๋ํ ์ผ์์ผ์ด 0์ด๊ณ ํ ์์ผ์ด 6์ ๋๋ค. ๋ค์ ๋งํด ํ ์ฃผ์ ์์์ 0๋ถํฐ ์์ํฉ๋๋ค.
์ prevMonthLastDate์ ์์ผ(day)์ ๊ธ์์ผ์ ๋๋ค. ์ฆ 5์ ๋๋ค.
prevMonthLastDate.getDay() // 5
์ซ์ 5๊ฐ ํํธ์ ๋๋ค. 5๋ฅผ ๋ฐํ์ผ๋ก ๋ฐ๋ณต๋ฌธ์ ์คํํ๋ฉด ์ฝ๊ฒ ์ง๋๋ฌ์ ๋ง์ง๋ง ์ฃผ๋ฅผ ๊ตฌํ ์ ์์ต๋๋ค. ๊ทธ๋ ๋ค๋ฉด ๋ช ๋ฒ ๋ฐ๋ณต์ ํด์ผ ํ ๊น์? ์ ์์์์๋ ๊ธ์์ผ์ด๋ฏ๋ก ์ผ, ์, ํ, ์, ๋ชฉ, ๊ธ ์ด 6๋ฒ์ ๋ฐ๋ณตํด์ผ ํฉ๋๋ค. ๋ง์ฝ ํ์์ผ(2)์ด๋ผ๋ฉด ์ผ, ์, ํ๋ก ์ด 3๋ฒ์ ๋ฐ๋ณตํด์ผ ํฉ๋๋ค.
์ฆ, getDay() ๋ฉ์๋๋ฅผ ํตํด ์ป์ ๊ฐ์ +1์ ํ ๊ฐ๋งํผ ๋ฐ๋ณต์ ํด์ผ ํฉ๋๋ค. ์ด๋, ์ฃผ์ํด์ผ ํ ์ ์ ๋ง์ฝ getDay() ๋ฉ์๋๋ฅผ ํตํด ์ป์ ๊ฐ์ด 6์ด๋ผ๋ฉด ๋ฐ๋ณต์ ์คํํด์๋ ์๋ฉ๋๋ค. ๊ทธ ์ด์ ๋ 6์ ๋ง์ง๋ง ์์ผ์ธ ํ ์์ผ์ด๊ธฐ ๋๋ฌธ์ ๋๋ค. ์ด๋, ๊ตณ์ด ์ด์ ๋ฌ์ ๋ง์ง๋ง ์ฃผ ์ ๋ณด๊ฐ ํ์ ์์ต๋๋ค.
์ ๋ด์ฉ์ ๋ฐํ์ผ๋ก getPrevMonthWeekDays ํจ์๋ฅผ ๋ง๋ค์ด๋ณด๊ฒ ์ต๋๋ค.
const year = 2023;
const month = 7;
const getPrevMonthLastWeekDays = (year: number, month: number) => {
const prevMonthLastDateObject = new Date(year, month - 1, 0);
const prevYear = prevMonthLastDateObject.getFullYear(); // ์ด์ ๋ฌ์ ๋
๋
const prevMonth = prevMonthLastDateObject.getMonth(); // ์ด์ ๋ฌ
const prevLastDayOfWeek = prevMonthLastDateObject.getDay(); // ์ด์ ๋ฌ์ ๋ง์ง๋ง ์์ผ
const prevLastDay = prevMonthLastDateObject.getDate(); // ์ด์ ๋ฌ์ ๋ง์ง๋ง ์ผ
if (prevLastDayOfWeek === 6) return []; // ์ด์ ๋ฌ์ ๋ง์ง๋ง ์์ผ์ด ํ ์์ผ์ธ ๊ฒฝ์ฐ
return Array.from({ length: prevLastDayOfWeek + 1 }).map((_, index) => {
const day = prevLastDay - prevLastDayOfWeek + index;
const dayOfWeek = index;
return {
day,
dayOfWeek,
date: new Date(prevYear, prevMonth, day),
state: 'prev',
};
});
};
const prevMonthLastWeekDays = getPrevMonthLastWeekDays(year, month);
getPrevMonthWeekDays ํจ์์ ๋ฐํ ๊ฐ์ ๋ฐฐ์ด๋ก ์ด์ ๋ฌ์ ๋ง์ง๋ง ์ฃผ์ ํด๋นํ๋ ์ ๋ณด๊ฐ ์์๋๋ก(์ผ์์ผ๋ถํฐ) ๊ฐ์ฒด๋ก ๋ด๊ฒจ ์์ต๋๋ค.
๊ฐ์ฒด๋ฅผ ์ดํด๋ณด๋ฉด ์ผ์ ์๋ฏธํ๋ day, ์์ผ์ ์๋ฏธํ๋ dayOfWeek, Date ๊ฐ์ฒด์ธ date ๊ทธ๋ฆฌ๊ณ ์ด์ ๋ฌ์ ์๋ฏธํ๋ prev๊ฐ ์์ต๋๋ค. ๊ฐ๋จํ๊ฒ date๋ง ํ์ํ ์ ์์ต๋๋ค. ํ์ง๋ง ์ดํ์ ์คํ์ผ๋ง์ ํ ๋ ์กฐ๊ธ ๋ ์์ํ๊ฒ ํ๊ธฐ ์ํด dayOfWeek, state๋ฅผ ์ถ๊ฐํ์ต๋๋ค.
๋ํ Date() ๊ฐ์ฒด์์๋ date๊ฐ ์ผ, day๊ฐ ์์ผ์ด์ง๋ง ๊ฐ์ธ์ ์ผ๋ก ๋ง์ด ํท๊ฐ๋ฆฌ๋ ๋ค์ด๋ฐ์ด์๊ธฐ ๋๋ฌธ์ ์ผ์ day, ์์ผ์ dayOfweek์ผ๋ก ํ์ต๋๋ค.
prevMonthLastWeekDays์ ๊ฒฐ๊ณผ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
๋ง์ฝ ์ด์ ๋ฌ์ ๋ง์ง๋ง ๋ ์ด ํ ์์ผ์ธ 2023๋ 1์์ ๋ฐํ์ผ๋ก prevMonthLastWeek๋ฅผ ๊ตฌํ๋ฉด ๋น ๋ฐฐ์ด์ด ๋ฐํ๋๋ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.
getPrevMonthLastWeek(2023, 1) // []
4. ์ด๋ฒ ๋ฌ ๊ตฌํ๊ธฐ
4-1. ์ด๋ฒ ๋ฌ์ ์ฒซ ๋ฒ์งธ ๋
const year = 2023;
const month = 7;
์ year, month๋ฅผ ๋ฐํ์ผ๋ก ์ด๋ฒ ๋ฌ์ ์ฒซ๋ฒ์งธ ๋ ์ ๊ตฌํด๋ด ์๋ค. ์ฆ, 2023๋ 7์์ ์ฒซ๋ฒ์งธ ๋ ์ธ 1์ผ์ ๊ตฌํ๋ ๊ฒ์ ๋๋ค. ์ด๋ ๋ค์๊ณผ ๊ฐ์ด ๊ตฌํ ์ ์์ต๋๋ค.
new Date(year, month - 1);
์ฒซ ๋ฒ์งธ, ๋ ๋ฒ์งธ ๋งค๊ฐ๋ณ์๋ ์ ๋ฌํ์ง๋ง ์ธ ๋ฒ์งธ ๋งค๊ฐ๋ณ์์ธ ์ผ(date)์ ์ ๋ฌํ์ง ์์์ต๋๋ค. ์ด์ฒ๋ผ ์ธ ๋ฒ์งธ ๋งค๊ฐ๋ณ์๊ฐ ์๋ต์ด ๋์๋ค๋ฉด ๊ธฐ๋ณธ๊ฐ์ด 1์ด ์ ์ฉ๋ฉ๋๋ค.
์ฆ, ์ ์ฝ๋๋ ๋ค์๊ณผ ๊ฐ์ด ํด์๋ฉ๋๋ค.
2023๋ 7์์ ์ฒซ ๋ฒ์งธ ๋ ์ ๋ํ Date ๊ฐ์ฒด๋ฅผ ๋ฐํํด ์ค
4-2. ์ด๋ฒ ๋ฌ์ ๋ง์ง๋ง ๋
๋ฐ๋ก ์ด์ด์ ์ด๋ฒ๋ฌ์ ๋ง์ง๋ง ๋ ์ ๊ตฌํด๋ด ์๋ค. ๋ง์ง๋ง ๋ ์ ๋ค์ ๋ฌ์ ๋ฐํ์ผ๋ก ๊ตฌํ ์ ์์ต๋๋ค. ์ด์ ๋ฌ์ ๋ง์ง๋ง ๋ ์ ๊ตฌํ๋ ๋ฐฉ๋ฒ์ฒ๋ผ Date() ์์ฑ์์ ์ธ ๋ฒ์งธ ๋งค๊ฐ๋ณ์๋ก 0์ ์ ๋ฌํ๋ฉด ๋ฉ๋๋ค. ์ฆ ๋ค์๊ณผ ๊ฐ์ด ์ด๋ฒ ๋ฌ์ ๋ง์ง๋ง ๋ ์ ๊ตฌํ ์ ์์ต๋๋ค.
new Date(year, month, 0);
์ด์ ๊ณผ๋ ๋ค๋ฅด๊ฒ month์ -1์ ํ์ง ์์์ต๋๋ค. ๋๋ฌธ์ ์ด๋ฒ ๋ฌ์ด ์๋ ๋ค์ ๋ฌ์ ๊ธฐ์ค์ผ๋ก ์ด๋ฒ ๋ฌ์ ๋ง์ง๋ง ๋ ์ ๊ตฌํ๋ ๊ฒ์ ๋๋ค.
์ด ์ฝ๋๋ ํด์ํ๋ฉด ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
2023๋ 7์์ ๋ง์ง๋ง ๋ ์ ๋ํ Date ๊ฐ์ฒด๋ฅผ ๋ฐํํด ์ค
4-3. ์ด๋ฒ ๋ฌ
์ด๋ฒ ๋ฌ์ ์ฒซ ๋ฒ์งธ ๋ ๊ณผ ๋ง์ง๋ง ๋ ์ ๋ฐํ์ผ๋ก ์ด๋ฒ ๋ฌ์ ๊ตฌํด๋ด ์๋ค. ์ด๋ฒ ๋ฌ๋ ๋ฐ๋ณต๋ฌธ์ ํตํด ๊ตฌํ ์ ์์ต๋๋ค. ๊ทธ๋ฌ๋ฉด ๋ช ๋ฒ ๋ฐ๋ณต์ ํด์ผ ํ ๊น์? ๊ฐ๋จํ๊ฒ ๋ง์ง๋ง ๋ ์๋งํผ ๋ฐ๋ณต์ ํ๋ฉด ๋ฉ๋๋ค. ๋ฐ๋ก getCurMonthDays ํจ์๋ฅผ ๊ตฌํํด ๋ณด๊ฒ ์ต๋๋ค.
const year = 2023;
const month = 7;
const getCurMonthDays = (year: number, month: number) => {
const curMonthFirstDateObject = new Date(year, month - 1); // ์ด๋ฒ ๋ฌ์ ์ฒซ ๋ฒ์งธ ๋
const curMonthLastDateObject = new Date(year, month, 0); // ์ด๋ฒ ๋ฌ์ ๋ง์ง๋ง ๋
const curFirstDayOfWeek = curMonthFirstDateObject.getDay(); // ์ด๋ฒ ๋ฌ์ ์ฒซ ๋ฒ์งธ ์์ผ
const curLastDay = curMonthLastDateObject.getDate(); // ์ด๋ฒ ๋ฌ์ ๋ง์ง๋ง ์ผ
return Array.from({ length: curLastDay }).map((_, index) => {
const day = index + 1; // ์ผ์ index์ 1์ ๋ํ ๊ฐ
const dayOfWeek = (curFirstDayOfWeek + index) % 7; // ์ฒซ ๋ฒ์งธ ์์ผ๊ณผ index๋ฅผ ๋ํ ๊ฐ์ 7๋ก ๋๋ ๊ฐ์ ๋๋จธ์ง
return {
day,
dayOfWeek,
date: new Date(year, month, day),
state: 'cur',
};
});
};
const curMonthDays = getCurMonthDays(year, month);
์ ์ฝ๋๋ฅผ ์ดํด๋ณด๋ฉด curLastDay๋ ๋ง์ง๋ง ์ผ์ ๋๋ค. ์ฆ ์ด ๋งํผ ๋ฐ๋ณต๋ฌธ์ ์คํํ๊ณ ์๋ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.
๋ํ day๋ ํ์ฌ ์ธ๋ฑ์ค์์ 1์ ๋ํ ๊ฐ์ผ๋ก ๊ตฌํ ์ ์๊ณ ์์ผ์ธ dayOfWeek์ ์ฒซ ๋ฒ์งธ ๋ ์ ์์ผ์ ์ธ๋ฑ์ค๋ฅผ ๋ํ ๊ฐ์ 7๋ก ๋๋์ด ๋์จ ๋๋จธ์ง๋ก ๊ตฌํ ์ ์์ต๋๋ค.
curMonthDays์ ๊ฒฐ๊ณผ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
5. ๋ค์ ๋ฌ์ ์ฒซ ๋ฒ์งธ ์ฃผ ๊ตฌํ๊ธฐ
5-1. ๋ค์ ๋ฌ์ ์ฒซ ๋ฒ์งธ ๋
๋ง์ง๋ง์ผ๋ก ๋ค์ ๋ฌ์ ์ฒซ ๋ฒ์งธ ์ฃผ๋ฅผ ๊ตฌํด๋ด ์๋ค. ์ด๋ฅผ ๊ตฌํ๊ธฐ ์ํด์ ๋ค์ ๋ฌ์ ์ฒซ ๋ฒ์งธ ๋ ์ ๋จผ์ ์๊ณ ์์ด์ผ ํฉ๋๋ค. ์ด๋ ๋ค์๊ณผ ๊ฐ์ด ๊ตฌํ ์ ์์ต๋๋ค.
new Date(year, month);
month์ -1์ ํ์ง ์์๊ธฐ ๋๋ฌธ์ ๋ค์ ๋ฌ์ ํด๋นํ๊ณ ์ธ ๋ฒ์งธ ๋งค๊ฐ๋ณ์๋ฅผ ์๋ตํ๊ธฐ ๋๋ฌธ์ 1์ด ์ ์ฉ๋์ด ์ฒซ ๋ฒ์งธ ๋ ์ ๋ฐํํ๊ฒ ๋ฉ๋๋ค. ์ฆ, ๋ค์๊ณผ ๊ฐ์ด ํด์ํ ์ ์์ต๋๋ค.
2023๋ 7์์ ๋ค์ ๋ฌ์ธ 8์์ ์ฒซ ๋ฒ์งธ ๋ ์ ๋ํ Date ๊ฐ์ฒด๋ฅผ ๋ฐํํด ์ค
5-2. ๋ค์ ๋ฌ์ ์ฒซ ๋ฒ์งธ ์ฃผ
๋ค์ ๋ฌ์ ์ฒซ ๋ฒ์งธ ์ฃผ๋ฅผ ๊ตฌํ๊ธฐ ์ํด์ ๋ค์ ๋ฌ์ ์ฒซ ๋ฒ์งธ ๋ ์ ์์ผ์ด ํ์ํฉ๋๋ค. ์ฆ, ์ด์ ๋ฌ์ ๋ง์ง๋ง ์ฃผ๋ฅผ ๊ตฌํ์์ ๋์ฒ๋ผ ์์ผ์ด ํต์ฌ์ด ๋ฉ๋๋ค.
์์ผ์ ๋ฐํ์ผ๋ก ์ผ๋ง๋งํผ ๋ฐ๋ณต์ ํ ์ง ์ ํ ์ ์์ต๋๋ค. ๋ง์ฝ ๋ค์ ๋ฌ์ ์ฒซ ๋ฒ์งธ ๋ ์ด ํ์์ผ์ด๋ผ๋ฉด ํ, ์, ๋ชฉ, ๊ธ, ํ ์ด 5๋ฒ์ ๋ฐ๋ณตํด์ผ ํ๊ณ ๋ง์ฝ ๊ธ์์ผ์ด๋ผ๋ฉด ๊ธ, ํ ์ด 2๋ฒ์ ๋ฐ๋ณตํด์ผ ํฉ๋๋ค.
๊ท์น์ 7์์ ์ฒซ ๋ฒ์งธ ๋ ์ ์์ผ์ ๋นผ๋ฉด ๋ฉ๋๋ค. ์์ผ์ 0๋ถํฐ ์์ํ๋ ํ์์ผ์ 2, ๊ธ์์ผ์, 5์ ๋๋ค. ํ์ง๋ง ๋ง์ฝ ๋ค์ ๋ฌ์ ์ฒซ ๋ฒ์งธ ๋ ์ด ์ผ์์ผ(0)์ด๋ผ๋ฉด ๋ฐ๋ณต ์์ด ๋น ๋ฐฐ์ด์ ๋ฐํํด์ผ ํฉ๋๋ค.
์ด๋ฅผ ๋ฐ์ํ ์ฝ๋๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
const getNextMonthFirstWeekDays = (year: number, month: number) => {
const nextMonthFirstDateObject = new Date(year, month);
const nextYear = nextMonthFirstDateObject.getFullYear(); // ๋ค์ ๋ฌ์ ๋
๋
const nextMonth = nextMonthFirstDateObject.getMonth(); // ๋ค์ ๋ฌ
const nextFirstDayOfWeek = nextMonthFirstDateObject.getDay(); // ๋ค์ ๋ฌ์ ๋ง์ง๋ง ์์ผ
const nextFirstDay = nextMonthFirstDateObject.getDate(); // ๋ค์ ๋ฌ์ ๋ง์ง๋ง ์ผ
console.log(nextFirstDayOfWeek);
if (nextFirstDayOfWeek === 0) return []; // ๋ค์ ๋ฌ์ ์ฒซ ๋ฒ์ฌ ๋ ์ด ์ผ์์ผ์ธ ๊ฒฝ์ฐ
return Array.from({ length: 7 - nextFirstDayOfWeek }).map((_, index) => {
const day = nextFirstDay + index;
const dayOfWeek = nextFirstDayOfWeek + index;
return {
day,
dayOfWeek,
date: new Date(nextYear, nextMonth, day),
state: 'next',
};
});
};
const nextMonthFirstWeekDays = getNextMonthFirstWeekDays(year, month);
getNextMonthFirstWeekDays ํจ์๋ ๋ค์ ๋ฌ์ ์ฒซ ๋ฒ์งธ ์ฃผ์ ๋ ์ ์ ๋ณด๊ฐ ๋ด๊ธด ๋ฐฐ์ด์ ๋ฐํํฉ๋๋ค. ์ค์ nextMonthFirstWeekDays์ ๊ฒฐ๊ณผ๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
๋ง์ฝ ๋ค์ ๋ฌ์ ์ฒซ ๋ฒ์งธ ์์ผ์ด ์ผ์์ผ์ธ ๊ฒฝ์ฐ๋ ์ด๋ค ๊ฒฐ๊ณผ๊ฐ ๋์ฌ๊น์? 23๋ 9์์ด ํ ์์ผ์ด ๋ง์ง๋ง ๋ ์ฆ, 23๋ 19์์ ์ฒซ ๋ฒ์งธ ์์ผ์ด ์ผ์์ผ์ ๋๋ค. ์ค์ ๋ก getNextMonthFirstWeekDays(2023, 9)๋ฅผ ํธ์ถํ๋ฉด ๋น ๋ฐฐ์ด์ธ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.
getNextMonthFirstWeekDays(2023, 9) // []
6. ํ์ํ ์ ๋ณด ๋ชจ๋ ๋ถ๋ฌ์ค๊ธฐ
์ด์ ๋ฌ, ์ด๋ฒ ๋ฌ, ๋ค์ ๋ฌ์ ์ ๋ณด๋ฅผ ๋ชจ๋ ๊ตฌํ์ต๋๋ค. ์ด์ ์ด๋ฅผ ๋ชจ๋ ํฉ์ณ ํ๋์ ๋ฐฐ์ด๋ก ๋ง๋ค์ด๋ด ์๋ค. ์ด๋ ๊ฐ๋จํ๊ฒ ์คํ๋ ๋ ์ฐ์ฐ์๋ฅผ ํตํด ๋ง๋ค ์ ์์ต๋๋ค. ์์๋ ์ค์ํฉ๋๋ค!
const calendarStorage = [
...prevMonthLastWeekDays,
...curMonthDays,
...nextMonthFirstWeekDays,
];
๊ฒฐ๊ณผ๋ฅผ ๋ณด๋ฉด ์ด์ ๋ฌ, ๋ค์ ๋ฌ์ด ๋ชจ๋ ํฌํจ๋ ๊ฒ์ ํ์ธํ ์ ์์ต๋๋ค.
ํน์ง์ ์ด๋ ๊ฒ ๋ง๋ค์ด์ง ๋ฐฐ์ด์ ์์ ๊ฐ์๋ 7์ ๋ฐฐ์๋ผ๋ ์ ์ ๋๋ค. ์ด๋ฅผ ๋ฐํ์ผ๋ก ๋ค์ ์ฑํฐ์์ ๊ทธ๋ฆฌ๋๋ฅผ ํ์ฉํ์ฌ ๋ฌ๋ ฅ์ ์ค์ ๋ก ํ๋ฉด์ ๊ทธ๋ ค๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
7. ์ฌ์ฌ์ฉ ๊ฐ๋ฅํ๊ฒ ๋ง๋ค๊ธฐ
calendar๋ ์ฌ๋ฌ ๊ณณ์์ ์ฌ์ฉํ ์ ์์ต๋๋ค. ๋๋ฌธ์ ์ง๊ธ๊น์ง ๋ง๋ ๋ก์ง์ ํด๋์ค๋ก ๋ฌถ์ด ์ฌ์ฌ์ฉํ ์ ์๋๋ก ๋ฆฌํฉํฐ๋ง์ ์งํํ๊ฒ ์ต๋๋ค.
Calendar.ts๋ผ๋ ํ์ผ์ ๋ง๋ค๊ณ ๋ค์๊ณผ ๊ฐ์ด ์ฝ๋๋ฅผ ์ ๋ฆฌํฉ๋๋ค.
export type CalendarStorage = {
day: number;
dayOfWeek: number;
date: Date;
state: 'prev' | 'next' | 'cur';
}[];
class Calendar {
#year;
#month;
constructor(year: number, month: number) {
this.#year = year;
this.#month = month;
}
getCalendarStorage = () => {
return [
...this.getPrevMonthLastWeekDays(this.#year, this.#month),
...this.getCurMonthDays(this.#year, this.#month),
...this.getNextMonthFirstWeekDays(this.#year, this.#month),
];
};
getYear = () => this.#year;
getMonth = () => this.#month;
private getPrevMonthLastWeekDays = (
year: number,
month: number
): CalendarStorage => {
const prevMonthLastDateObject = new Date(year, month - 1, 0);
const prevYear = prevMonthLastDateObject.getFullYear(); // ์ด์ ๋ฌ์ ๋
๋
const prevMonth = prevMonthLastDateObject.getMonth(); // ์ด์ ๋ฌ
const prevLastDayOfWeek = prevMonthLastDateObject.getDay(); // ์ด์ ๋ฌ์ ๋ง์ง๋ง ์์ผ
const prevLastDay = prevMonthLastDateObject.getDate(); // ์ด์ ๋ฌ์ ๋ง์ง๋ง ์ผ
if (prevLastDayOfWeek === 6) return []; // ์ด์ ๋ฌ์ ๋ง์ง๋ง ์์ผ์ด ํ ์์ผ์ธ ๊ฒฝ์ฐ
return Array.from({ length: prevLastDayOfWeek + 1 }).map((_, index) => {
const day = prevLastDay - prevLastDayOfWeek + index;
const dayOfWeek = index;
return {
day,
dayOfWeek,
date: new Date(prevYear, prevMonth, day),
state: 'prev',
};
});
};
private getCurMonthDays = (year: number, month: number): CalendarStorage => {
const curMonthFirstDateObject = new Date(year, month - 1); // ์ด๋ฒ ๋ฌ์ ์ฒซ ๋ฒ์งธ ๋
const curMonthLastDateObject = new Date(year, month, 0); // ์ด๋ฒ ๋ฌ์ ๋ง์ง๋ง ๋
const curFirstDayOfWeek = curMonthFirstDateObject.getDay(); // ์ด๋ฒ ๋ฌ์ ์ฒซ ๋ฒ์งธ ์์ผ
const curLastDay = curMonthLastDateObject.getDate(); // ์ด๋ฒ ๋ฌ์ ๋ง์ง๋ง ์ผ
return Array.from({ length: curLastDay }).map((_, index) => {
const day = index + 1; // ์ผ์ index์ 1์ ๋ํ ๊ฐ
const dayOfWeek = (curFirstDayOfWeek + index) % 7; // ์ฒซ ๋ฒ์งธ ์์ผ๊ณผ index๋ฅผ ๋ํ ๊ฐ์ 7๋ก ๋๋ ๊ฐ์ ๋๋จธ์ง
return {
day,
dayOfWeek,
date: new Date(year, month - 1, day),
state: 'cur',
};
});
};
private getNextMonthFirstWeekDays = (
year: number,
month: number
): CalendarStorage => {
const nextMonthFirstDateObject = new Date(year, month);
const nextYear = nextMonthFirstDateObject.getFullYear(); // ๋ค์ ๋ฌ์ ๋
๋
const nextMonth = nextMonthFirstDateObject.getMonth(); // ๋ค์ ๋ฌ
const nextFirstDayOfWeek = nextMonthFirstDateObject.getDay(); // ๋ค์ ๋ฌ์ ๋ง์ง๋ง ์์ผ
const nextFirstDay = nextMonthFirstDateObject.getDate(); // ๋ค์ ๋ฌ์ ๋ง์ง๋ง ์ผ
if (nextFirstDayOfWeek === 0) return []; // ๋ค์ ๋ฌ์ ์ฒซ ๋ฒ์ฌ ๋ ์ด ์ผ์์ผ์ธ ๊ฒฝ์ฐ
return Array.from({ length: 7 - nextFirstDayOfWeek }).map((_, index) => {
const day = nextFirstDay + index;
const dayOfWeek = nextFirstDayOfWeek + index;
return {
day,
dayOfWeek,
date: new Date(nextYear, nextMonth, day),
state: 'next',
};
});
};
}
export default Calendar;
์ด์ ์ฌ์ฉํ๋ ๊ณณ์์ new Calendar()๋ฅผ ํตํด ์๋ก์ด Calendar ๊ฐ์ฒด๋ฅผ ์์ฑํ๊ธฐ๋ง ํ๋ฉด ๋ฉ๋๋ค! ์ด๋ ์ํ๋ year, month๋ฅผ ์ ๋ฌํ๋ฉด ํด๋น ๋ , ์์ ํด๋นํ๋ ๋ชจ๋ ์์ผ(์ด์ ๋ฌ, ๋ค์ ๋ฌ ํฌํจ)์ getCalendardStorage() ๋ฉ์๋๋ฅผ ํตํด ์ป์ด์ฌ ์ ์์ต๋๋ค. ๋ค์๊ณผ ๊ฐ์ด ๋ง์ด์ฃ .
import Calendar from './Calendar';
const today = new Date();
const year = today.getFullYear();
const month = today.getMonth() + 1;
const month1 = new Calendar(year, month);
month1.getCalendarStorage(); // ์ค๋ ๊ธฐ์ค 23๋
10์ ๋ฌ๋ ฅ ์ ๋ณด
const month2 = new Calendar(2023, 7);
month2.getCalendarStorage(); // 23๋
7์ ๋ฌ๋ ฅ ์ ๋ณด
const month3 = new Calendar(2023, 8);
month3.getCalendarStorage(); // 23๋
8์ ๋ฌ๋ ฅ ์ ๋ณด
๋ํ Calendar์ year๊ณผ month๋ฅผ private ๋ณ์๋ก ํ์ฌ ์ธ๋ถ์์ ์ ๊ทผ์ ํ์ง ๋ชปํ๊ฒ ํ์ต๋๋ค. ๋๋ฌธ์ด ์ด๋ฅผ ์ ๊ทผํ๊ธฐ ์ํด์ getYear() ๋ฉ์๋์ getMonth() ๋ฉ์๋๋ฅผ ์ฌ์ฉํด์ผ ํฉ๋๋ค.
๋ค์์ ์ด๋ฒ ์ฑํฐ๋ฅผ ์งํํ๋ฉด์ ์์ฑํ ์ฝ๋์ ๋ด์ฉ์ด ๋ด๊ธด commit์ ๋๋ค. ์ ๋ชฉ ๋ฐ Calendar ๊ฐ์ฒด ์์ ์ฝ๋ ์์ , Calendar ํด๋์ค ์์ ์ผ๋ก ์ธํด commit์ด ์ธ ๊ฐ ์ ๋๋ค.๐ฅฒ
feat: ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ด ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฌ๋ ฅ ๋ง๋ค๊ธฐ 1 - ํ์ํ ์ ๋ณด ๋ง๋ค๊ธฐ · nlom0218/vanilla-calendar@
nlom0218 committed Oct 8, 2023
github.com
feat: ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ด ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฌ๋ ฅ ๋ง๋ค๊ธฐ 1 - Date() ์์ฑ์๋ฅผ ์ฌ์ฉํ์ฌ Calendar ๊ฐ์ฒด ๋ง๋ค
Calendar ๊ฐ์ฒด์ getCalendarStorage ๋ฉ์๋ ํธ์ถ
github.com
reactor: ๋ผ์ด๋ธ๋ฌ๋ฆฌ ์์ด ์๋ฐ์คํฌ๋ฆฝํธ๋ก ๋ฌ๋ ฅ ๋ง๋ค๊ธฐ 1 - Date() ์์ฑ์๋ฅผ ์ฌ์ฉํ์ฌ Calendar ๊ฐ์ฒด ๋ง
Calendar์ year, month ๋ณ์ privateํ ๋ฐ ํด๋ ์์ฑ ํ ์ด๋
github.com