akanjs/webkit은 브라우저나 네이티브 앱에서만 도는 React hook과 helper를 모은 모듈입니다. 타이머, 지연 로딩, promise 상태, 기기 기능, CSR 라우터 상태가 여기에 있습니다.

lazy는 서버 렌더링 스위치가 붙은 React lazy입니다. ssr: false를 주면 서버에서 그리지 않으므로, import하는 순간 window를 건드리는 지도, 차트, 3D 라이브러리에 씁니다.

브라우저가 있어야 그려지는 지구본을 lazy 경계 파일 뒤에 둡니다:

useDebounce는 호출이 멈춘 뒤에만 실행되는 콜백을 돌려줍니다. 입력이 멈추면 한 번 검색하는 검색창이 대표적이고, 이미지 편집기나 비용이 큰 필드 갱신도 사용자가 드래그하거나 입력하는 동안 이것으로 작업을 미룹니다.

마지막 입력 300ms 뒤에 slice를 다시 불러오는 검색창입니다:

useInterval은 delay ms마다 콜백을 실행하고, 언마운트되면 타이머를 정리합니다. 대시보드, 게임 상태, 빌드 로그를 주기적으로 다시 불러올 때 씁니다.

주문 목록을 3초마다 새로 불러오는 Zone입니다:

useThrottle은 바로 실행한 뒤 delay ms가 지날 때까지 호출을 버리는 콜백을 돌려줍니다. 너무 자주 발생하는 scroll, pointer, resize, drag 핸들러에 씁니다.

점 위치를 최대 100ms마다 한 번만 바꾸는 드래그 패드입니다:

이 두 hook은 클라이언트 컴포넌트 안에서 promise를 { fulfilled, value }로 바꿔 줍니다. 브라우저에만 있는 값이거나, 값을 그리기만 하는 게 아니라 클라이언트 코드가 값 자체를 써야 할 때 씁니다.

useCamera는 네이티브 런타임의 camera 플러그인으로 사진을 찍거나 앨범에서 고릅니다. 네이티브 앱에서는 먼저 카메라 권한을 요청하고, 거부된 상태면 앱 설정 화면을 엽니다. 브라우저에서는 파일에서 고릅니다.

사진을 찍어 미리 보여 주는 버튼입니다:

useGeoLocation은 네이티브 런타임의 geolocation 플러그인으로, 브라우저에서는 navigator.geolocation으로 현재 위치를 읽습니다. 권한이 거부되면 사용자를 앱 설정으로 보냅니다.

지도를 어디에 맞출지 찾는 앱 hook입니다:

푸시는 akanjs/webkit이 아니라 @libs/util/webkit에 있습니다. 네이티브 셸에서는 런타임의 push 플러그인(iOS는 APNs, Android는 FCM)을, 브라우저에서는 Firebase를 부르고, 어느 쪽이든 같은 모양의 PushToken을 돌려줍니다.

register()가 권한 창을 띄울 수 있으므로 버튼에서 등록합니다:

usePurchase는 네이티브 런타임의 iap 플러그인으로 인앱 상품을 팝니다. iOS는 StoreKit 2, Android는 Play Billing입니다. 앱이 지급하기 전에 서버가 거래마다 검증하고, 브라우저에서는 팔지 않습니다.

서버가 구매를 받아 준 뒤에 코인을 지급하는 구매 버튼입니다:

CSR 라우터는 이 두 hook 위에서 돕니다. 하나는 href를 route 상태로 바꾸고, 다른 하나는 사용자가 지나온 곳을 기억합니다. 캐시된 페이지 전환, 스크롤 복원, 뒤로/앞으로 가기 판별이 여기서 나옵니다.

라우터는 처음 연 페이지에서 시작해 한 번만 준비합니다:

LoginForm은 shared store의 login action이 받는 인자입니다. 로그인 뒤 어떤 계정을 불러올지, 성공하거나 실패하면 어디로 보낼지를 담습니다.

로그인한 사용자를 불러온 뒤 홈으로 보내고, 실패하면 로그인 화면으로 돌려보내는 버튼입니다: