owlPost Project - 2주 프로젝트

owlPost symbol

1. owlPost Project란?

익명의 상대와 하루에 한통의 편지만을 주고 받을 수 있는 서비스이다.

꾹꾹 눌러담아 쓰던 편지의 감성을 스마트폰 유저들도 느낄 수 있는 유저경험을 만들기 위해 기획 되었다.

 

2. 기획 과정

먼저 miro를 이용해 모든 팀원들이 머리를 맞대고 UI와 UX적인 요소를 가장 먼저 기획 했다.

 초기 기획안은 같이 작업한 현서님의 블로그에 잘 작성 되어있다.

https://analogcoding.tistory.com/88

UI 기본설계

이후 백엔드 개발 맡으신 분들은 백엔드의 전체적인 흐름구조도를 짰다.

초반에 설계를 매우 잘해놓으셔서, 이 flow는 프로젝트가 끝날때 까지 거의 바뀌지 않았다.

DB Schema

3. API 문서 작성 및 Agile Scrum 을 이용한 역할 배분 

Agile Scrum 방식을 이용해 스프린트 별로 Todo Task를 나누었다.

이후  Task에 따라 API 문서를 작성하여, 프론트와 백엔드 개발자 간의 소통이 원활하도록 만들었다.

4. 결과물 

1) PPT 

https://slides.com/mitoconcrete/owlpost/#/1

owlPost

2) 시연 영상

 

5. 기술 스택

Front-end : react-native, native-base

Back-end : node.js , express , MongoDB(mongoose), EC2

Tool : Robo 3T ,  Agile Scrum , Slack

 

6. react-native 

리액트 네이티브 로고

react native는 react를 웹이아닌 앱으로 이용할 수 있게 만든 라이브러리다!

react에서 쓰던 모든 방식을 그대로 사용가능하다.

몇가지 차이가 있는데, react-native는 html 태그에 해당되는 내용들을 react-native 라이브러리로 부터

일일히 import 해서 써야하는 번거로움이 있다. 예를 들어 버튼이라던지, input 박스라던지

CSS를 입히는 StyleSheet 도 따로 import 해서 사용해야 한다.

react-native 사용법

 

앱 화면이 조금 더 자연스럽게 전환되길 원했기 때문에 조사해보던 중 navigations 이라는 방식을 알아냈다.

 

주로 createStackNavigation 을 이용해 화면 컴포넌트를 등록하고 사용했는데

위의 메소드를 이용해 화면을 등록하게 되고, 그것은 store에 넣은 뒤, 

APP의 최상단에서 props 로 내려주는 방식이다.

네비게이션을 이용하게 되면 화면을 사용자가 이동시킬 때마다 메모리에  stack 처럼 쌓이게 된다.

또한 화면 간 prop의 공유도 가능하니, 유용하다고 생각한다.

하지만 stack 처럼 쌓이는 화면들은 , 쓸데없는 메모리를 사용하게 만든다.

이를 방지하기 위한 방법이 있긴하지만, 지금은 잘기억안나니.. 나중에 포스트 하기로 하겠다.

하지만 이번 프로젝트에선 stack 방법을 이용해 화면전환을 구현했다.

 

7. AsyncStorage 

유저가 매번 로그인 하지 않도록, 로그아웃 버튼이나 회원탈퇴버튼을 누르지 않으면 서버에서 준 토큰을 유지 시켜야 했다.

그렇다고 새로운 변수를 전역에 만들어서 최상단에서 뿌려주자니, 너무 보안적으로 떨어질 것 같았다.

우리 팀은 react-native가 기본적으로 소장하고 있는 AsyncStroage를 이용했다.

풀이 그대로 비동기 저장소로서, 객체의 형태로 존재한다.

안에 무엇인가를 넣을땐 setItem을 키와 value로 구분해 넣어준다.

그걸 쓸땐 getItem 을 이용하고, 삭제할땐 removeItem 혹은 clear를 이용한다.

https://facebook.github.io/react-native/docs/asyncstorage

React Native · A framework for building native apps using React

우리는 로그인 시 서버가 보내준 토큰을 이 AsyncStorage에 담아놓고, 매 요청 시 마다, X-access-token 이라는 헤더값에 

담아서 보내주었다.

그러면 서버는 토큰의 여부를 검사해, 이 토큰이 있는지 없는지 검사하는 방식으로 로그인 유지여부를 결정했다.

 

8. Didblur? DidFocus?

사실 이부분을 스프린트때 쓰지못했던 것이 정말 아쉬운 부분이었다.

react-native는 react의 기본적인 lifecycle을 사용 가능 하면서도,

앱이기 때문에, react-native만의 lifecycle이 존재하는데

사용방식은 addevent 한 뒤 사용하는 방식이다.

로그인 하고, 로그아웃을 했을 때 맨 로그인 한 기록이 그대로 남아있어서

엔지니어 분께 조언을 구해보았는데, didfocus 이벤트 시에, input 창의 모든 내용들을 지우는 식으로 

진행해보라고 하셨다.

결국 구현은 못했지만, 조사하던 중 알기쉽게 나와있던 사이트가 있어서 첨부하겠다.

꼭 다시 사용해볼 것이다..

https://medium.com/@alexsung/react-navigation-navigationevents%EC%99%80-react-lifecycle-console-log-%EC%8B%A4%ED%97%98-%EA%B2%B0%EA%B3%BC-33a3c8870211

React-Navigation NavigationEvents와 React Lifecycle console.log 실험 결과

 

9. 아쉬웠던 점

- 공통으로 사용되는 컴포넌트를 모듈화 하지 못했다는 점

- 한 코드 내에서 컴포넌트들을 세분화 하지 못했던 점

- stackNavigator 말고, 화면이 쌓이지 않게하는 메소드를 사용하지 못했던 점

- react-native의 lifecycle을 사용하지 못했다는 점

- 순수 cli로 작업하지 못했던 점. expo init으로 손쉽게 어플을 구동했던 점

 - 아이폰 대응을 고려하지 못했던 점

-  앱스토어에 배포하지 못했던 점

 

등으로 이번 프로젝트때 너무 기본 리액트에 대한 아는 것들만 사용했던 것 같다.

조금 더 공부해서 다른 프로젝트때 다른개념들도 사용하여 위의 아쉬웠던 점의 갈증을 채우고 싶다..ㅜ