190527 크롬 확장프로그램 [트와이스 새 탭] 제작일지
업데이트할 기능이 딱히 없어서 고민하다 꽤 괜찮은 기능이 생각나서 업데이트하는 중입니다.
아직 완성된 단계는 아니라서 실제 업데이트까진 시간이 좀 걸릴 것 같습니다.
바로 Focus Timer입니다.
시간을 좀 더 알차게 쓰기 위해 집중할 시간을 정해놓는 기능입니다.
당장 박터지게 공부하는 고등학생 수업시간도 50분이고, 성인이 집중할 수 있는 시간도 글마다 다른데 보통 20분 ~ 30분 사이길래 굳이 시간은 넣지 않고 분만 넣었습니다.
설정한 시간이 얼마나 남았는지 시각적으로 보여줘서 더욱 집중력을 올릴 수 있도록 했습니다.
페이지를 새로 고침해도 해당 레이어는 자동으로 켜집니다.
집중하는 시간 동안에는 유튜브 등의 사이트 접속을 차단합니다.
사실 이 기능 때문에 만들었다 해도 과언이 아니죠.
뭐 코드 짜다 막히거나 하면 그냥 머리 식힌답시고 유튜브를 켤 때가 꽤 있는데, 접속을 못 하게 막아놓으면 굳이 개발자 도구로 조작을 하거나 다른 브라우저를 켜서 유튜브를 켜진 않을 테니까요.
만드는 과정에서 우여곡절도 많았습니다.
제일 처음엔 윈도우의 time_t처럼 시간을 설정하면 그것을 초로 바꿔 저장하고, time_passed를 생성해서 초당 1씩 올려 설정한 시간에 time_passed가 도달하면 꺼지는 방식이었습니다.
위 방식을 사용하면 굉장히 간단하긴 하지만, 페이지의 새로 고침 등에 오작동을 일으키게 됩니다.
그러다 new Date().getTime()을 생각해냈습니다.
사용자가 집중할 시간을 입력하면 그 시간을 밀리 세컨드로 바꾸고, new Date().getTime()에 그 값을 더합니다. 이 값을 focusTime이라 칭하겠습니다.
focusTime을 local storage에 저장합니다. 이제 페이지의 새로 고침에도 오작동을 일으키진 않게 됐습니다.
focusTime에서 new Date().getTime()을 빼면 남은 시간이 ms단위로 반환될 겁니다.
이 시점에서 다시 문제가 생겼습니다.
사진의 타이머를 조절하기 위해 svg의 stroke-dashoffset을 조절해야 하는데, 그러기 위해선 달성률(집중 한 시간 / 집중할 시간 * 100)이 필요합니다.
집중 한 시간은 구할 수 있지만, 집중할 시간은 focusTime을 저장하는 시점에서 집중 할 시간에 new Date().getTime()을 더해서 저장했으니 focusTime만으론 구할 수가 없습니다.
그래서 집중할 시간을 local storage에 따로 저장해서 달성률을 구하는 건 해결했습니다.
남은 문제는 일시 정지입니다. 이건 꽤 간단하게 해결했습니다.
일시 정지를 클릭하자마자 new Date().getTime()을 저장합니다.
일시 정지를 해제하는 시점에 new Date().getTIme()을 다시 구하면 일시 정지해놓은 시간을 구할 수 있습니다.
그 값을 focusTime에 더하면 해결됩니다.
문제를 해결한 후에 적어놓고 보니 정말 별거 아닌 문젠데 한 두세 시간은 헤맨 것 같네요 ㅠㅠ