4번째 프로젝트. Awesome Wise Saying App

앱을 실행하면 https://theysaidso.com/  

로부터 그날의 명언을 가져와서 보여준다. 이 api는 한 시간에 10번만 호출이 가능하기 때문에 react-native 모듈의 AsyncStorage를 사용하여 로컬에 그날의 명언을 캐싱한다.

매일 아침 7시 30분(임의로 지정)이 되면 firebase function 을 통해서 앱 실행시 알림 동의를 앱에 경우, 푸시 알림을 보내준다.

github 주소: https://github.com/adler0311/awesome-wise-saying-app

 

스택:

- React

- React Hook

- React Native

- firebase(firestore, functions)

 

 

 

 

새로 익힌 혹은 더 연습한 기능/기술:

- React Hook을 사용해봤다. 함수형 컴포넌트에서 상태와 함수를 가지고 있을 수 있도록 useState, useEffect 등을 사용하는 것이다. 아주 단순한 부분만 사용해본 상태. 근데 함수형에서 상태나 함수를 가질 수 있으면 클래스 컴포넌트?랑 비슷한테 굳이 나누는 이유는 뭘까?

- expo가 제공하는 푸시 알림을 사용해봤다. 푸시 알림이 동작하는 과정은

1. 앱에서 처음 실행시나 componentDidMount에서 expo 토큰을 받아온다

2. 이걸 내 Backend로 보낸다.(나의 경우엔 firebase functions)

3. backend에서 받은 토큰을 가지고 메시지를 만들어서 expo push server에 보낸다.

4. expo push server는 안드로이드/IOS 에 따라 알아서 처리를 해준다고 한다.

5. 그럼 GCM 등에 의해 앱에 푸시 알림이 보내진다.

- 리액트 네이티브 스타일을 지정할 때 flex 값을 조절하여 화면 상에서 특정 ui가 나타나는 부분을 조절하였다.

- 자바스크립트에서 날짜 비교를 할 때는 Date.parse("2019-11-03")을 통해서 한다.

- firebase functions에서 스케줄러를 사용하고자 할 때는 functions.pubsub.schedule("every 5 minutes").onRun(f) 방식으로 사용이 가능하다. 종량제로 변경해야 한다고 했던 것 같다.

 

후기:

아직은 리액트 네이티브, 앱 디자인, 배포까지의 전반적인 과정을 익히기 위한 단계이므로 최대한 단순하게 앱을 만들고 있다. 다음 프로젝트에서는 이전에 배웠던 mobx 혹은 redux 도입 예정.

 

아쉬운 점:

출시된 앱들을 보고 있자니 아직 앱 수익화에는 갈 길이 멀다.