항해 99 - 2022.03.29.THU (useState의 초기값 &setInterval, clearInterval)

이번 챕터 일정

• 02/26 기획 회의 ✅
• 02/28 알고리즘 스터디 발제 ✅
• 03/01 1차 기획멘토링 ✅
• 03/05 1차 기술 멘토링  ✅
• 03/09 2차 기획 멘토링 ✅
• 03/12 2차 기술 멘토링 ✅
• 03/16 3차 기획 멘토링 ✅
• 03/19 중간 점검 ✅
• 03/23 4차 기획멘토링 & 3차 기술 멘토링 ✅
• 03/26 4차 기술 멘토링 ✅
• 04/09 최종 발표회 

오늘 내가 할 일 

• 오늘의 시간 알고리즘 체크 및 수정 ✅ 
  • 같은 카테고리에서 시간이 추가되면 undefined가 뜨는 현상 발생 
  • useSate초기값의 중요성에 대해 알게됨
• 마지막 테스트 오류 찾기 
  • 수정하기 버튼 누르면 가지고있는 버튼 제외 설명 안뜨게 하기
  • 이모티콘 누르면 이모티콘 박스 닫기
  • 이모티콘 박스에 올리면 설명 안뜨게 하기
  • 툴팁 밑에 밑줄 삭제하기 
  • 오늘의참여기록 오류 체크
  • 프로필 기본 이미지 로고로 변경
  • 시간에 맞으면 뱃지 주는거 체크

 

오랜만에 친구네 카페 와서 작업을 시작했다. 
가끔 이렇게 나가서 코에 바람 좀 넣어줘야 더 열심히 하게 되는 거 같다 

어젯밤에 거의 다 하고 잤는데 정말 이제 하나 남았다. 
오늘의 시간,,, 아니 로컬 스토리지 사용하는데 자꾸 undefined가 뜨는데 이유를 모르겠네 ㅠㅠ( 해결 완료!)

저녁 부터 계속 오류 찾기시간,,,,,,,
정말 한도 끝도 없이 오류가 나와서 힘들었다,,,ㅋㅋㅋㅋㅋㅋ

 

<같은 카테고리에서 시간이 추가되면 undefined가 뜨는 현상>

 

• 문제 발생
  
  • 로컬 스토리지에 카테고리별 시간에 대해서 정장한다
  • 각각의 날짜에 맞게 같은 날짜면 추가하고 날짜가 다르면 새롭게 데이터가 리셋되는 코드로 짜임
  • 아얘 로컬 스토리지에 값이 없으면 새롭게 값이 들어감
  • 같은 카테고리에서 시간이 흐를 때 undefined로 뜨면서 저장한 시간 보여주는 곳에서도 문제 발생
  • 첫 번째는 undefined가 뜨고 두 번째부터는 시간이 제대로 흐름 
• 해결 방안
  • 흐른 시간의 값을 useState에서 변화시켜서 값을 가져왔다
  • useState의 초기값을 빈 값으로 넣어놨더니 처음 실행할때 무조건 빈값으로 넘어와지는 문제였다. 
  • 그래서 초기값 설정에 대해서 중요하다는 것을 알게 됨

//흐른 시간 체크
  const [openTime, setOpenTime] = useState(new Date().toString());
  const [diffTime, setDiffTime] = useState(0);

  const interval = useRef();

  function saveTime() {
    const closeTime = new Date();

    setDiffTime(Math.abs(closeTime - Date.parse(openTime)) / 60000);

    const prevTime = JSON.parse(localStorage.getItem("time"));
    const today = new Date().getDate();

    if (prevTime) {
      if (prevTime.date === today) {
        //기존 데이터에 새운 데이터 추가해서 저장
        prevTime[room.category.id] += diffTime;
        localStorage.setItem("time", JSON.stringify(prevTime));

      } else {
        //기존 데이터 초기화 하고 새로 저장
        const data = {
          date: new Date().getDate(),
          1: 0,
          2: 0,
          3: 0,
          4: 0,
          5: 0,
          6: 0,
        };
        data[room.category.id] = diffTime;
        localStorage.setItem("time", JSON.stringify(data));
      }
    } else { // 시간데이터가 없을 때
      const data = {
        date: new Date().getDate(),
        1: 0,
        2: 0,
        3: 0,
        4: 0,
        5: 0,
        6: 0,
      };
      data[room.category.id] = diffTime;
      localStorage.setItem("time", JSON.stringify(data));
    }

    setTimeout(() => {
      socketRef.current.emit("save_time", parseInt(diffTime) + 1);
    }, [1500]);
  }

  useEffect(() => {
    interval.current = setInterval(saveTime, 60000);


    return () => {
      clearInterval(interval.current);
    };
  }, [diffTime]);

 

<setInterval, clearInterval>

const timer = setInterval(function(){
    특정함수();
}, 1000);

• 기준 간격을 두고 주기적으로 이벤트를 발생 시키고 싶을때 사용
• 기간은 밀리세컨드 사용

clearInterval(timer);

• 중지하고 싶을때 사용!