onWeekCalendar

캘린더 제작하면서 애먹었던 문제

---

1. console.log는 렌더링이 될때의 결과를 나타낸다.

나는 31일치의 배열을 만들어 놓고, 각각의 배열안에는 3가지 의 배열을 추가적으로 입력해뒀다.

3가지의 배열은 각날짜의 스케줄이 있는지 없는지를 나타내는 boolean값으로 설정했다.

배열을 생성하고 log 값을 찍어봤더니, log 값안에는 이미 조건을 걸친 값들이 반영되어있었다.

그래서 나는 log가 정확히 어떻게 값을 반영하는지에 대해 알아봤다.

log

consolo.log는 참조를 로깅하기 때문에, 객체와 같이 내용물이 변할 수 있는 것들은

실시간으로 내용이 바뀐다.

 

  const returnEvent = useCallback(() => {
    const calendarDays = Array.from({ length: 32 }, () => [false, false, false]);
    const resultArr = [];
    console.log(calendarDays);

    for (let i = 0; i < events.length; i++) {
      const value = events[i].end.getDate() - events[i].start.getDate();
      const blockCount = value >= 0 ? value : Number(dateTotalCount + value);

      for (let view = 0; view < 3; view++) {
        const day = events[i].start.getDate();

        if (calendarDays[day][view] === false) {
          for (let i = 0; i < blockCount + 1; i++) {
            calendarDays[day + i][view] = true;
          }

          const top = (100 / 4) * (view + 1) + '%';
          const leftValue = events[i].start.getDate() - selectedDate;
          const leftCount = leftValue >= 0 ? leftValue : leftValue + dateTotalCount;
          const leftPercent = (100 / 7) * leftCount + 0.35 + '%';
          const widthPercent = (100 / 7) * (blockCount + 1) - 2 + '%';
          const backgroundColor = getScheduleColor(false, events[i].calendarId);

          resultArr.push(
            <StEventBlock
              top={top}
              width={widthPercent}
              left={leftPercent}
              backgroundColor={backgroundColor}
            >
              {events[i].title}
            </StEventBlock>
          );
          break;
        }
      }
    }

    return resultArr;
  }, [selectedYear, selectedMonth, events]);

순서만 생각하면 log안에 찍히는 배열값은 모두 false가 발생해야 하는 것이 맞지만, 그렇지 않고

값이 반영된것을 볼 수 있습니다.

여기서 알아두면 좋은것은 객체를 로깅할 때는 객체의 내용 변경사항이 실시간으로 업데이트 된다는 것을 알아야됩니다.

나는 이것때문에 많은 곤란을 겪었습니다.

시작도 전에 값이 반영된줄 알고, 아에 이런식으로 못쓰나 싶어서 다른 방법을 찾아보기도 했고

하나하나 로그를 찍어보기도 했습니다.

그러다가 알게된 사실이 실시간 반영이었고, 다행히 문제를 찾아 해결을 할 수 있었습니다.

2. 중복 일정 없애기

캘린더에 일정을 표시 할때, position을 이용했습니다.

캘린더 div 위에 새로운 div를 띄우는 느낌으로 설계를 했습니다. 그렇기 때문에 일정 bar를 띄우기 위해서는

position : top, left 값이 필요했고,

top 같은 경우는 최대갯수를 3개로 선정해서 제한했고,

left 같은 경우는 1주일 달력이니까 7을 기준으로 값을 제한했습니다.

아시다 시피 하루에 일정은 최대 3개까지 입력이 되고, 일정은 하루만 있는것이 아니라

여러일을 가질 수 있습니다. 그렇기 때문에 top, left를 고려할때 여러가지를 생각했어야 했습니다.

---

1. 한달치의 배열 생성후, 각 배열에 최대 3개의 일정확인 할 수 있는 배열 넣기

• 하루에는 최대 3가지의 일정을 넣을 수 있고, 일정이 추가될때 마다 top값이 바뀌게 됩니다.

1. 일정을 가져와 반복문을 돌린다.
2. 일정 시작일에 해당하는 날짜에 일정이 등록되어 있는지 확인한다.

• 등록이 되어있지 않다면, 종료일까지의 일정을 view 칸에 맞게 추가한다.

1. view칸과 시작일과 종료일의 차이를 구해서 top, left값을 설정한다.
2. 다음과 같은 내용을 반복한다.

---

다음과 같은 알고리즘으로 문제를 해결했습니다.