[React] 뽀모도로 개발 일기 - 1

 

10년전 까까머리 고등학생들, 미국 횡단을 결정하다.

미국을 다녀온 후 1달이 지난 지금  원래 집중력이 좋은 사람이 아닌데 집중력이 더 약해진 것 같은 느낌이 들어

환경적인요인을 강화하려고 몇가지들 결정했습니다.

그리고 개발자인만큼 개발실력이 늘지않고 퇴화되는 느낌이 너무너무 강하게 들어.......정신차리자는 의미에서 뽀모도로 타이머를 직접 개발하고 배포까지 해보려고 합니다. 배포도 클라우드를 이용해서 한번 해보려고 합니다.

 

환경 생성

1. 미국 가기전에 했던 스터디 재 참가( 심지어 카톡오픈채팅방 부방장이다....)

2. 수영등록

3. 뽀모도로 타이머 개발 

여기서 뽀모도로가 뭔지 생소한 분들을 위해 친절하게 설명을 붙입니다.

 

뽀모도로 기법(Pomodoro Technique)은 시간 관리 방법론으로 1980년대 후반 '프란체스코 시릴로'(Francesco Cirillo)가 제안했다.
타이머를 이용해서 25분간 집중해서 일을 한 다음 5분간 휴식하는 방식이다.
'뽀모도로'는 이탈리아어로 토마토를 뜻한다. 프란체스코 시릴로가 대학생 시절 토마토 모양으로 생긴 요리용 타이머를 이용해 25분간 집중 후 휴식하는 일처리 방법을 제안한데서 그 이름이 유래했다.

뽀모도로의 궁극적인 목표는 집중력 향상입니다. --> 현재 저의 목표와 잘 맞아 떨어져 선택한 것도 있습니다.

 

자 이제 목표는 정했으니 어떻게 개발을 할까 고민을 하기 시작했고,

평소에 이쁘다고 생각한 탁상 타이머가 있어 참고해서 만들기로 결정했습니다.

바로 마이니 타이머 !!!

minee| 타임 페이스 메이커 마이니- 뽀모도로 시각화 공부타이머

상업적으로 활용할 생각 전혀 없고 제가 쓰려고 만드는 거니 저작권에 문제는 없겠죠 ???

 

막상 시작하니 코드를 어떻게 작성 할지 생각이 잘 안났습니다.

그래서 확실히 개발을 놓았더니.....퇴화된 느낌이 의심에서 확신으로 변한 하루였습니다.

다행히 자각을 했으니 이제 다시 노력해서 올라갈일만 남았습니다.

 

chatPT를 써서 개발을 할까 고민하다 여러가지 레퍼런스를 참고하고 싶어 구글링을 했습니다.

역시 타이머를 개발하면서 쓴글이 많아서 참고하는데 큰 도움이 되었습니다.

 

처음으로 막혔던 부분은 타이머의 핵심 기능인 setInterval를 사용 할줄을 몰라 열심히 구글링 했네요.

setInterval() 함수는 일정한 간격으로 반복해서 실행되는 함수, 예를 들어 애니메이션과 같은 함수들의 딜레이(delay)를 설정하는 데에 일반적으로 사용됩니다. 이 함수는 clearInterval()을 사용하여 취소할 수 있습니다. 일정한 시간이 지난 후 함수를 한 번 호출하고 싶다면 setTimeout() 함수를 사용하면 됩니다. 이러한 딜레이 함수들은 모든 브라우저와 Node.js에서 지원됩니다

  const [time, setTime] = useState(0);

useEffect(() => {
    const timeStart = setInterval(() => {
      // 시작하는 코드
      setTime(parseInt(time) - 1);
    }, 1000);

    if (parseInt(time) === 0) {
      // 멈추는 코드
      clearInterval(timeStart);
    }
    return () => {
      clearInterval(timeStart);
    };
  }, [time]);

제가 setInterval를 활용해서 작성한 코드입니다.

여기서 제가 언급하지 않은 두개의 react 훅이 나오네요 !!

useState와 useEffect는 리액트로 개발을 하다보면 정말 무지무지하게 쓰는 훅들입니다.

한번 제대로 공부해서 한번 작성해봐야겠네요.

저도 사용법에대해서 간단하게 설명이 가능 하지만 자세하게 지금은 힘드네요....

 

간단하게 설명드리면

useState는 변수 상태를 변경할 수 있는 훅이고

useEffect는 컴포넌트의 랜더링(rendering)과 관련된 작업 이외의 작업을 처리하기 위해 사용됩니다. useEffect를 사용하면 컴포넌트가 렌더링될 때마다 실행되는 부수 효과(side effect)를 처리할 수 있습니다.

 

이해가 잘 안시죠 ?? ㅋㅋ저에게 또 좋은 공부할 소스가 주어진 느낌이네요(조만간 작성하겠습니다....정처기도 시작하는데 ㅠㅠ)

아무튼 간단한 설명을 여기서 마치고

 

1차 작업 결과를 공유드립니다.

아직 기능을 구체적으로 생각하지 않아서 일단 뽀모도로 시간 기준 25분 5분 휴식으로 개발 예정입니다.

오늘은  setInterval 활용과 css 작업을 했습니다.

그럼 2차 개발 일기때 봐요 ~~~

읽어주신 모든 분들 감사드립니다.

작업코드도 같이 공유드립니다.

https://github.com/wogus216/timer

GitHub - wogus216/timer

 

 

참고 사이트

https://ko.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

https://gaemi606.tistory.com/entry/React-%ED%83%80%EC%9D%B4%EB%A8%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0-Hooks-setInterval

React | 타이머 만들기 ( Hooks, setInterval )