momentom 업데이트 소식

• repository : https://github.com/soonitoon/momentom
• momentom(for desktop) : https://soonitoon.github.io/momentom

2021년 4월 9일

오늘은 블로그 포스팅을 시작하기 전에 만들었던 크롬 앱 "Momentum"의 클론인 Momentom의 업데이트 소식을 가져왔습니다.

클론 코딩 강의를 따라 페이지를 만들고 나서 스스로 이것저것 기능을 추가했었는데요, 그 중에 시간 표시 방식을 12시/24시로 선택할 수 있는 기능이 있었습니다.

저 버튼을 누르면 시간 표시 방식이 바뀝니다.

단순한 기능이었으므로 부하가 걸릴 여지가 없었지만 이상하게 버튼을 누르면 1초 가량의 지연 후에 시간이 바뀌는 문제가 있었습니다. 한창 React-Hooks 프로젝트를 진행하다가 오랜만에 고치겠다고 마음 먹고 코드를 들여다봤는데요, 생각보다 간단한 문제였습니다.

function handleBtn() {
  let clockSet = JSON.parse(localStorage.getItem(CLOCKSET_LS));
  if (clockSet === true) {
    clockSet = false;
    btn.innerText = "24H";
    getTime();
  } else {
    clockSet = true;
    btn.innerText = "12H";
    getTime();
  }
  saveClockSetting(clockSet);
}

handleBtn은 12/24 변경 버튼의 이벤트 핸들러 함수입니다. Momentom의 사용자 세팅은 로컬 스토리지에 저장되기 때문에 먼저 로컬 스토리지에서 현재 세팅을 가져온 후, 세팅값을 반대로 바꿔 저장하는 방식으로 작동하게 됩니다.

여기서 제가 코드를 잘못 짠 부분은 세팅값을 불러와 시간을 랜더링하는 getTime 함수보다 세팅을 로컬 스토리지에 저장하는 saveClockSetting 함수를 나중에 호출한 것입니다.

핸들러 함수 안에서 getTime 함수를 먼저 호출해도 로컬 스토리지의 세팅값은 아직 바뀌지 않았으니 표시되는 시간은 그대로고, 메인 함수에서 1초에 한 번씩 getTime이 호출될 때에서야 변경된 설정이 적용되는 것이었습니다. 그래서 버튼을 눌렀을 때 1초 가량의 지연이 느껴졌던 것이지요.

function handleBtn() {
  let clockSet = JSON.parse(localStorage.getItem(CLOCKSET_LS));
  if (clockSet === true) {
    saveClockSetting(false);
    btn.innerText = "24H";
    getTime();
  } else {
    saveClockSetting(true);
    btn.innerText = "12H";
    getTime();
  }
}

해결 방법은 saveClockSetting 함수를 getTime보다 먼저 호출해서 설정값을 로컬 스토리지에 먼저 저장하는 것입니다. 이렇게 되면 getTime이 호출될 때 바로 변경된 설정 값을 가져올 수 있게 됩니다.

그때는 몰랐는데, 시간이 지나니 지연의 원인이 자연스럽게 보이는 것이 나름 신기하게 느껴집니다. 업데이트 소식이라고 따로 포스팅을 쓰기에 민망할 정도로 기초적인 실수였던 것 같습니다.