여섯 번째 프로젝트. Awesome Project Timeline App

설명:

예전부터 내가 작업한 프로젝트를 관리할 수 있는 앱을 만들고 싶었다. 그러던 중 timeline 라이브러리를 알게 됐고 이걸 사용해서 내가 작업해온 프로젝트를 한 눈에 볼 수 있는 앱을 만들기로 했다. 

https://reactnativeexample.com/timeline-component-for-react-native-app-work-for-android-and-ios/

이 라이브러리인데.. 사실 선 그려주고, 시간 혹은 날짜 그려주고, 동그라미 그려주는 게 전부인 리액트 라이브러리. 옵션을 전부 떼니까 정말 단순한 라이브러리가 되었고, 나는 타임라인 자체를 수정할 일은 없기 때문에 옵션을 전부 뗀 상태로 파일 하나를 프로젝트 안에 넣었다.

또한, 로그인 과정을 참고해서 만들었다. 이번 프로젝트에서는 firebase를 연동해서 가입/로그인/비밀번호 찾기까지 firebase 기능을 이용하였다.

- 지금까진 expo 를 사용해서 리액트 네이티브 앱을 만들었다면 이번에는 처음으로 react-native init으로 시작했다. 이유는 @react-native-firebase 모듈이 expo를 지원하지 않았기 때문이다. 다시 말하면, 앞으로 모든 firebase를 사용하는 프로젝트들은 expo를 사용할 수 없다.

- 여러 StackNavigation, TabNavigation 등을 추가했다. 처음에 로딩화면이 있고, 유저 정보를 못가져오면 로그인 화면으로, 아니면 바로 메인화면으로 이동하는 구조이다.

- 메인화면에는 탭 네비게이션을 넣었다. 메인 탭과 다른 사람의 타임라인 탭을 볼 수 있는 탭이 있다. 각 탭에는 다시 Stack Navigation으로 감싸져 있어서 내부에서 상세 페이지 이동한다.

- 스크린샷 기능이나 이미지 업로드 기능은 에뮬레이터에서 제대로 동작을 하지 않는 듯 하다. 배포 후 확인해 봐야겠다.

github 주소: https://github.com/adler0311/awesome-project-timeline-app

스택:

- react

- react-native

- react-hook

- @react-native-firebase

- typescript

- mobx

 

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

- react-navigation: 이번에 주로 사용한 건 네비게이션이다. react-navigation을 사용해서 Stack Navigation, Tab Navigation을 구현했다.(물론 각각은 또 모듈을 깔아야 하긴 하다만..). 화면 이동을 위해서는 navigation을 전달해서 push 해준다. 추가로 SwitchNavigation도 사용을 했는데 이 네비게이션은 주로 인증 절차(로딩 -> 로그인 시에는 메인화면, 이면 로그인 화면)에서 주로 사용한다고 한다.

- @react-native-firebase: 파이어베이스의 firestore 및 인증을 사용하기 위해서 이 라이브러리를 사용했다. 단점이라면 expo를 사용할 수 없다는 점. 아마도 expo를 썼다면 폰에서 스크린샷이나 이미지 업로드를 확인해볼 수 있지 않았을까. 

- mobx: 처음으로 개인 프로젝트에서 mobx를 사용했다. 역시나 처음 도입하는데 굉장히 빠르게 적용할 수 있었다. 

 

후기:

이번 프로젝트의 메인 목표는 내가 프로젝트 관리를 할 수 있는 앱을 만들어서 뽀모도로 앱처럼 한 눈에 볼 수 있도록 하는 것이였다. 항상 느끼는 거지만 앱을 사용하고 싶은 마음이 들 때는 디자인이 이쁠 때이다. 내가 만든 앱을 내가 직접 사용하기 위해서는 일단 디자인에 좀 더 신경을 쓰는 게 좋을 거 같다는 생각이 든다. 그래서 이 코스를 수강해보면 어떨까 싶다. https://frontendmasters.com/courses/design-for-developers/

Learn Design for Developers from Sarah Drasner

 

이번 프로젝트에서는 3가지의 네비게이션을 사용했다. 처음에는 메인에 스택 네비게이션에 들어가는 모든 페이지를 넣으려고 했으나 탭 네비게이션을 중간에 넣기 위해서 위와 같이 작업을 진행하였다.

mobx를 사용할 때는 redux도 마찬가지겠지만, 상태를 함수 컴포넌트에서 떼어 내야 한다. 비동기처리를 하고 mobx에 있는 상태를 다시 함수 컴포넌트에 넣으려고 하면 순서가 보장받지 못해서 문제가 생긴다. 프로젝트가 끝나고 나서야 프로그래머스 리액트 강의를 들었는데 google trend redux vs mobx 에서 redux가 압도적이라는 말을 들었다.아무튼 지금 프로그래머스도 그렇고 다음 프로젝트에서는 다시 redux를 사용하고, saga를 같이 공부하기로 하자.

 

조금 아쉬운 점:

프로그래머스 1주차가 끝나고 나서야 컴포넌트 분리에 대해 배웠다. 그리고 나서 다시 코드를 보니 파일들이 너무 엉망이라는 생각이 들었다.

그리고 색깔을 고르는 데 너무 애를 먹었던 거 같다. 위의 design 강의를 들어보면 어떨까 싶다.