리액트 컴포넌트 렌더링 자동화 & 스케줄링

5 min readDec 18, 2020

리액트에서 컴포넌트 렌더링 자동화 & 스케줄링 하는 방법에 대한 강의입니다. 전문용어로는 crontab 이라고 합니다.

크론탭이란

크론탭이란 서버나 운영체제에서 스스로 정해둔 명령을 일정 기간마다 실행하도록 하는 것입니다. 이러한 기능은 프론트엔드에서도 유용하게 사용될 수 있습니다. 대표적인 예는 푸시알람, 특정 시간에 접속된 유저 로그 서버에 저장하기 등입니다. 크론탭의 대표적인 예시는 linux의 크론탭입니다. https://www.geeksforgeeks.org/crontab-in-linux-with-examples/

프로젝트에서 만들 컴포넌트와 기능

아래의 영상에서 확인할 수 있듯이, 푸시 알람을 만들것입니다. 이 푸시 알람은 우리가 설정한 시간에 자동으로 렌더링이 될것입니다.

프로젝트 세팅-업

Option 1

개발자님들의 편리성을 위해 샘플 프로젝트를 github에 만들었습니다. https://github.com/shawnscoding/reactjs-crontab-tutorial

이 프로젝트를 클론 하십시오.

컴퓨터의 터미널을 오픈하십시오.

git clone https://github.com/shawnscoding/reactjs-crontab-tutorial
cd reactjs-crontab-tutorial
npm install

위 세 개의 명령어가 모든 준비를 완료합니다.

Option 2

이미 작업 중인 프로젝트가 있다면 밑의 코드를 복사하십시오. 복사할 수 있는 github link

reactjs-crontab 노드 패키지 다운로드

reactjs-crontab 은 크론탭 기능을 쉽게 구현하길 원하는 개발자분을 위해 만든 리액트 오픈소스입니다. 이 모듈이 이 프로젝트의 목적을 위해 아주 잘 작동합니다. 만약 이 모듈이 없었다면 크론탭 기능을 생성하고 테스트하는 것은 아주 오랜 시간이 걸립니다.

npm install reactjs-crontab

주목할 만한 feature들

모든 timezone 을 지원합니다.
No extra dependencies except React
No style library. 바닐라 css를 사용해서 아주 가볍습니다.
상세한 에러 메시지를 제공합니다.
대시보드를 제공합니다. 이것은 크론탭을 모니터링하는데 사용됩니다. 대시보드는 프롭을 통해 숨길 수 있습니다.
가이드 웹사이트를 제공합니다. https://d180vcwahe2y6s.cloudfront.net/build/index.html

크롭탭 컴포넌트의 핵심 props 인 tasks props

이미 눈치채셨겠지만, 이 세팅은 굉장히 단순합니다. 함수는 config field에 세팅된 시간 값에 따라 정해진 시간에 호출될 것입니다. 그게 다입니다!

Config field 의 value 값 참조

MIN-HOUR-DOM-MON-DOW

여러 개의 값을 세팅할 수 있습니다.

MIN,MIN-HOUR,HOUR-DOM,DOM-MON,MON-DOW,DOW

MIN represents minute(s), can be 0 through 59 . * means every minute
HOUR represents hour(s) of a day, can be 0 through 23. * means every hour
DOM represents day of month, can be 1 through 31. * means every day
MON represents month, can be 1 through 12. * means every month
DOW represents day of week, can be 1 through 7. 1 is Monday, 2 is Tuesday, and so on. * means every day
Multiple values must be separated by comma ,

timeZone props 입니다. 모든 timezone을 지원합니다.

const timeZone = "UTC"<Crontab timeZone={timeZone} />

Timezone 여러분의 crontab이 작동할 타임존을 명시합니다. 예를 들어 만약 timeZone 값이 ‘UTC’ 라면 crontab 은 UTC 시간에 따라 작동하고, ‘Asia/Seoul’이라면 한국 표준 시간 (KST)에 따라 작동합니다.

처음 크론탭을 접하는 개발자라면 아마 이해하기 힘들 수도 있습니다. 그럴 땐 실행하고 두 눈으로 결과를 확인부터 하고 천천히 이해하는 것이 최고입니다.

npm start

스크린에서 첫 번째 task 는 매분 작동하고 두 번째는 12월 19일 10:10AM에 호출되는 걸 확인할 수 있습니다.

축하드립니다. 지금부터 여러분은 이 방법을 통해 컴포넌트와 함수를 스케줄링하며 자동화할 수 있습니다.

Crontab은 분당 한 번만 트리거됩니다. 트리거되는 초는 reactjs 앱을 실행할 때마다 다릅니다. 0초에서 59초까지 다양합니다. 이것은 저희가 config field에서 초를 설정하지 않기 때문입니다. 따라서 시간 조건이 충족되는 즉시 실행되지 않더라도 놀라지 마십시오.

만약 아직 사용법이 어렵다고 느껴지신다면

documentation in npm website

가이드 웹사이트