01. 구현

✅ 테스트 결과.

5214주 부터 1주까지, 하루를 의미하는 총 36500개의 컴포넌트를 생성하였다.

✅ 스크린샷

02. 방법

✅ 방법

1. 수명100년 * 365일을 일주일 단위로 나누어, 1부터 5300 까지 증가하는 배열을 생성하였다. 이것은 인간 수명 100년에 주어진 모든 주(week)를 나타낸다.
2. 그 배열을 reverse() 함수를 통해 5300부터 역순으로 뒤집었다.
3. [ 5300, 5299, 5298 ... 3, 2, 1 ] 이 담긴 배열마다 map()함수로 컴포넌트를 반환하였다.
4. 반환된 컴포넌트 안에서 다시 일주일을 나타내는 새 배열[0,1,2,3,4,5,6]을 만들었다.
5. 7개의 배열은 각각 하루를 의미하며, 하루마다 dayblock컴포넌트를 반환한다.
6. dayblock 컴포넌트는 각각 시작일로부터 숫자(1,2,3...7)를 가지고있으며, 생일을 기준으로 1일씩 증가한다.
7. dayblock 컴포넌트를 반환할 때마다 날짜에 1일씩 추가하기 위하여 날짜 라이브러리 day.js를 사용하였다. (moment를 먼저 시도하였으나, moment의 날짜를 더하는 함수는 날짜를 하루씩 더해 반환할 때마다, 더한 숫자가 계속 누적되어 원하는 대로 숫자가 반환되지 않았다.)

✅ 코드

const birthDay = new Date(1993, 9, 1); // 내 생일
const lifeSpan = 100; // 수명
const 기준일 = -3 // 

const allWeeks = new Array(lifeSpan * Math.ceil(365 / 7))
	.fill(1)
	.map((week, weekIndex) => { return week + weekIndex })
	.reverse()
	.map((week, weekIndex) => {

		if (week > 5214) { return }
		return (
			<WeekRow key={week}>
				<WeekNumber>{week}</WeekNumber>
				<DayBlockContainer>
					{  // 
						new Array(7).fill(1).map((day, dayIndex) => {
							const number = (value: number) => { return value + day + dayIndex + ((week - 1) * 7) }

							if (number(기준일) > 0) {
								return (<DayBlock key={dayIndex * week} id={String(number(기준일))}>{
									dayjs(birthDay).add(number(기준일) - 31, "d").format("YY. MM. DD.")
								}</DayBlock>)
							}

							else { return <DayBlock key={dayIndex * week} id={String(number(기준일))}></DayBlock> }

						})
					}
				</DayBlockContainer>
			</WeekRow>
		)
	})

03. 느낀점

✅ JS로 날짜 표현하기

평소에 js로 날짜를 표기할 때마다 참 번거롭다고 느꼈기 때문에 intl로 빨리 때우고 넘어갔는데, 다이어리 프로젝트 특성상 이를 정면으로 씹고 뜯고 맛보고 즐길 위기에 직면하게 되었다.

지금은 컴포넌트 생성을 테스트하기 위하여 라이브러리의 힘을 빌렸지만, 이것을 바닐라 JS로 작성하는 법을 알아두는것도 좋을 것같다.

✅ 렌더 단위에 대한 고민

36500개가 되는 컴포넌트를 한 화면에 전부 렌더하는 것이 컴퓨터에 부담이 되었다.

지금은 100년에 해당하는 모든 컴포넌트를 렌더했다면, 그 단위를 더 쪼개서,
10년 단위 / 1년 단위 / 한 달 단위로 나누고, 상위 단위에 데이터의 점유율만 넘겨주는 식으로 만들거나, 무한스크롤을 만들어서 스크롤 전까지는 렌더하지 않는 방향을 고려해야겠다.

✅ 참고

day.js 라이브러리
https://day.js.org/docs/en/manipulate/add
https://jsikim1.tistory.com/196
https://youtu.be/CSWc0HYjxEs