개요

• react-clock-app 은 리액트 기반 시계 어플리케이션입니다.
• 실제 시간 / 분 / 초를 표기하며, 아날로그 시계 ui 로 표현이 됩니다.
• 시계에 마우스 오버시 현재 시간이 텍스트로 표기되어 보여집니다.

기술스택

• recoil 을 사용하여 시분초 등의 전역변수 상태 관리를 하게 됩니다.
• styled-component 를 사용하여 다이나믹한 ui를 css in js로 표현합니다.

State

• hours : 시간을 나타내는 state / 최대 24
• minutes : 분을 나타내는 state / 최대 60
• seconds : 초을 나타내는 state / 최대 60

컴포넌트 구조

• Clock

  • func1: 실시간 데이터를 저장하는 함수

  • func2: 마우스 오버시 툴팁 보여주는 함수

  • Tooltip (공통 컴포넌트 / 텍스트를 받아 보여줌)

    • props: title(툴팁내용)

  • Hours (시간을 보여주는 컴포넌트)

    • state: hour, minutes
    • func: 각도 계산 함수 / 25분마다 시간 사이 간격이 1/4 씩 움직일 것

  • Minutes

    • state: minutes, seconds
    • func: 각도 계산 함수 (공통)

  • Seconds

    • state: minutes, seconds
    • func: 각도 계산 함수 (공통)

여느날의 작업기록

1/28

• 사실 useContext를 사용할지를 고민했다. 그 이유는 context api도 전역 상태 관리가 꽤나 수월했고, 부모 - 자식 - 형제 간의 긴밀한 정보 전달이 이루어지는 컴포넌트 단까지는 useContext 로 관리하는 게 리덕스같은 덩치 큰 녀석 혹은 라이브러리를 설치해 사용하는 것보다 편하기 때문이었다.
• 그렇지만 경험해본적이 없는 recoil 을 사용해보기로 했다. 리코일을 선택한 이유는 다음과 같다. 리코일은 atom 을 구독하여 useState 처럼 상태관리가 즉각 실행되어 간편하고 리액트(?)스럽다. 물론 프로젝트 범위가 커진다면 atom 을 너도나도 구독할 수 있기 때문에 주의하여야 하겠지만 현재 만드는 프로젝트는 간단한 구조를 가지고 있으므로 적합하다고 판단되었다.

1/30

• 시간에 대해 각도를 조금 더 분배해서 시침이 서서히 이동하도록 정교화하였다. util 함수로 따로 분리하여 시분초의 각도를 계산하는 함수로 리팩토링을 하였다.

1/31

• 시분초 침이 360 to 0 으로 돌아 가는 순간 애니메이션이 헛돌기 시작했다. 360도에서 0도로 이동할때 -360이 되었기 때문이었다. 해결을 위해 두가지 옵션이 있었다.

  1. 각도를 무한대로 늘린다. 360 390 420 ...

     → 이 해결책이 가장 쉬웠지만 뭔가 찜찜했다. 아무리 자바스크립트의 max int 가 9007199254740991 이라고 해도... 무작정 수를 늘리는건 아니라고 생각했다.

  2. 매초마다 각도를 새로 갱신한다.

     → 기존에 흩어져있던 setInterval을 부모인 Clock 컴포넌트로 옮겨 한군데서만 실행되도록 리팩토링하고 매 시간마다 각도가 계산되어 전역변수로 저장되도록 하였다. 각도 계산식은 공통함수를 만들어 사용하였다. 코드도 깔끔해지고 불필요한 호출을 줄일 수 있게 되었다.

2/1

• 애니메이션 최적화를 하였다. 커서 애니메이션과 시분초침 애니메이션. 이 둘이 섞이니 느려지거나 버벅거리기 시작했다. 그래서 나만알기 아쉬우니 최적화의 과정을 포스팅으로 남겨놓으며 마무으리를 하였다
• 시분초침 최적화
• 툴팁 최적화