mini Pomodoro: draft

코딩 공부를 하는데 요즘 집중이 잘 안되어 어떻게 하면 학습효율이 올라갈까 생각하다 최근에 본 기사가 생각났다. 포모도로 기법이라고 25분 공부하고 5분 쉬고 다시 25분 공부하고를 반복하는 학습 기법이다. (구글에서도 사용하는 기법이라는데?!?)
포모도로기법을 사용하기 위해서는 우선 얼마나 공부하고 있는지, 언제 끝나는지 알아야 한다. 찾아보니 여러가지 앱이 앱스토어에 많이 올라와있었다. 근데 생각해보면 포모도로를 구현하는 기능이 그렇게 어려운 기능은 아니라는 생각이 들어서 직접 한번 만들어 보고자 했다. 그래서 시작한 mini Pomodoro (프로젝트..라고 하긴 너무 간단하긴 하지만.. 나중에 기능을 더 추가할 계획)

우선 npx create-react-app을 통해서 리엑트 프로젝트를 하나 생성해주었습니다. 프로젝트 하나 생성할때마다 필요없는 파일들 지우고 하는게 너무 귀찮지만, 우선 필요하지 않는 파일과 코드들을 삭제해 주고 시작합니다.

Pomodoro를 구현하기 위해서 react에 있는 기능들 몇가지를 사용해보고자 했습니다.
당연히 남아있는 시간을 추적하기 위해서는 변수가 변해야 하고 그러기 위해선 useState를 사용해야 합니다. 또, 일정 간격으로 무언가 변하길 원했기 때문에 setInterval을 사용했습니다.

추가로 styled-components를 사용하는데 익숙해 지기 위해 이 프로젝트에 styled-components도 npm을 통하여 추가해 주었습니다.

	const [seconds, setSeconds] = useState(5);
    const [minutes, setMinutes] = useState(1);

우선 시간을 담기위한 그릇을 두개 준비해주었습니다. 당연히 시간은 변하기 때문에 useState를 사용했습니다.

return에는 아래의 코드들을 추가해주었습니다. 거의 styled-components를 사용해서 밑에 추가로 이에대한 코드도 추가하겠습니다.

return (
    <div>
      <MainContainer>
        <TimeDisplay>
          {minutes} : {seconds}
        </TimeDisplay>
        <ActionBtn
          isDone={isDone}
          onClick={() => {
            setSeconds(59);
            setMinutes(24);
            setIsDone(false);
          }}
        >
          Reset
        </ActionBtn>
      </MainContainer>
    </div>
  );

const MainContainer = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
`;
const TimeDisplay = styled.div`
  padding: 10px;
  margin-bottom: 100px;
  font-size: 50px;
  color: white;
`;
const ActionBtn = styled.button`
  border: none;
  width: 15vw;
  height: 15vw;
  border-radius: 200px;
  font-size: 30px;
  background-color: ${(props) => (props.isDone ? "red" : "blue")};

이렇게 보잘것 없는(?) 간단한 레이아웃이 완성되었다.

이후 우리가 할것은 timeReducer라는 함수를 만드는 것입니다. 이 함수가 할 역할은 setInterval의 콜백함수를 만드는 것입니다. 따라서, 1초 간격으로 시간이 줄어드는 효과를 구현해야 합니다. 구글링해보니 여러가지 방법이 많고, 몇가지 라이브러리도 사용을 할수 있었습니다. 하지만 나는 아주 기초적이고 원시적인 방법으로 이 기능을 구현하려고 합니다.

const timeReducer = () => {
    if (seconds === 0) {
      setMinutes(minutes - 1);
      setSeconds(59);
    } else {
      setSeconds(seconds - 1);
    }
  };

간단하게, 초가 0이 되면 분을 1 줄여주고 초를 다시 59로 세팅해줍니다. 그 이외에는 그냥 초만 1씩 줄여주면 됩니다.

이제 useEffect를 사용해서 초와 분이 변할때마다 setInterval의 콜백함수를 실행시킬것이입니다.

useEffect(() => {
    const interval = setInterval(() => timeReducer(), 1000);
    console.log(seconds);

    if (minutes === 0 && seconds === 0) {
      clearInterval(interval);
      setIsDone(true);
    }

    return () => clearInterval(interval);
  }, [seconds, minutes]);

이렇게 되면 이제 코드는 완성되었습니다. 전체 코드는 깃헙 레포를 확인해주세요!
아직 조금 다듬어야 할 부분도 있고 기능 추가도 몇개 해보려고 하기에 그 부분은 다음 포스트에 올리겠습니다.
아래는 예시
링크텍스트

링크텍스트