[Final Project] 마무리하기 (GoStop)

기획 의도

 

Final Project는 내가 낸 아이디어로 진행하게 되었다.

 

1년 전 쯤인가 인생이 지루하고 막막하다고 생각할 때였는지 메이플스토리를 한참 하다가 그런 생각이 들었다.

게임에서는 그냥 키보드를 누르고만 있으면 경험치가 오르는데, 현실에서는 아무리 많은 과제와 업무를 완성해도 내 경험치가 오르고 레벨업이 되는 것을 눈으로 확인할 수가 없다는 것이었다. 그래서 어떻게 하면 내 인생을 게임처럼 생각하고 레벨업 하기 위해서 하루하루 열심히 살게 할 수 있을까? 라는 고민을 하고 있었는데... 

 

얼마 뒤 나는 그런 어플이 이미 있다는 것을 알게 되었다. 기존의 todo 어플에 캐릭터를 적용한 'Habitica' 라는 해외어플이다. 해야 할 일을 하면 경험치가 오르고 레벨업을 할 수 있다. 이 때 얻은 코인으로 보상이나 다른 아이템들을 구매하는 기능도 있다. 간단하지만 센스있는 어플리케이션이라 마음에 쏙 들었다. 

 

그래서 한 달 전의 이야기를 하자면, 원래 하고 싶었던 project 에 참여하지 못하게 된 나는.. 급하게 다른 아이디어를 생각하다가 이 어플을 떠올리게 되었다. habitica는 원래 있는 어플이지만, 한글 패치가 완벽한 어플은 아니라는 이유를 대며 카피를 해보기로 하였다. 독자적인 내 아이디어는 아니지만, 어쨌든 내가 제안을 했기 때문에 팀장을 맡게 되었다. 

 

 

---

프로젝트 소개 

어플리케이션의 기능은 아래와 같다. github repository 의 read me와 동일하다. GoStop 이라는 어플의 이름은 이 어플의 주요 기능인 Habit 기능에서 비롯되었다. 새로 만들고 싶은 습관은 Go 하고, 끊어내고 싶은 습관은 Stop 하라는 의미이다.  

 

**본 어플리케이션의 모든 캐릭터는 [나의 최애캐_오빠돌]의 디자인입니다.

 

HABIT & TODO

새로 만들고 싶은 좋은 습관이나 없애고 싶은 안좋은 습관을 기록해보세요.

행동을 취할 때마다 버튼(+, -)을 눌러 경험치와 코인을 쌓아 캐릭터를 키울 수 있습니다.

또한 기간별로 해야 할 일들을 기록하고 완수하는 것으로도 캐릭터를 성장시킬 수 있습니다.

 

REWARD

미션을 본인이 정하는 것처럼, 보상 또한 스스로 정해주세요.

좋은 습관을 기르고, 해야 할 미션들을 완수하며 얻은 코인으로 보상을 구입할 수 있습니다.

치킨 시키기, 영화 보기 등 수고한 본인에게 선물을 줄 수 있습니다.

 

CHARACTER

경험치가 쌓이면 캐릭터는 레벨업이 가능합니다.

레벨이 오를수록 레벨업에 필요한 경험치도 높아집니다.

나쁜 습관을 자꾸 실행할 경우 체력이 감소하여 레벨이 내려갈 수 있으니 주의하세요!

 

ITEM

캐릭터는 코인으로 아이템을 구매할 수 있습니다.

아이템샵에서 새로운 헤어, 옷, 바지 등을 구입하고 나만의 캐릭터를 꾸며보세요.

 

 

로그인 성공 시 메인화면으로 이동

 

habit 추가

아이템 샵에서 코인으로 아이템 구매

구매한 아이템으로 캐릭터 꾸미기 가능

 

---

스택

지난 프로젝트에서 백엔드를 맡은 나는 이번에는 프론트엔드를 하고 싶었다. 게임의 요소가 들어있기 때문에 프론트가 더 재미있을 것이라는 생각도 들었다. 다행히 든든한 분께서 백엔드를 맡는다고 하셨기 때문에 무리없이 분담이 될 수 있었다.  

 

이번 프로젝트에서 프론트 엔드가 사용한 스택은

React-native, Redux, TypeScript, JWT, Expo, react-navigation 등이다. 

 

각각 프론트 백 에서 사용한 스택들

 

자세히 따로 포스팅을 하겠지만, 일단 각 스택들에 대한 내 느낀점을 이야기하자면,

1. React-native : react를 사용하던 방식대로 모바일 어플리케이션을 만들 수 있다.
   • 솔직히 react 하던 대로 하면 모바일 어플리케이션 만들 수 있다는 게 너무 획기적이고 나한테는 감사한 일이긴 한데, react-native 자체가 좋은 건지는 잘 모르겠다.  (차라리 새로운 언어 하나 배우는 게 나을까? 싶은) 일단 처음에는 컴포넌트를 넣어도 안 보여!! 안 보인다구!! 이런 문제가 가장 어이없었는데, flex box에 대한 이해가 없었기 때문이었다. 어쨌든 눈으로 확인이 안 되니까 가장 답답했던.. container의 style을 잘 적용해줘야 한다.  그리고 처음에는 navigation 구조를 이해하는 것도 어려운 부분이었고, 번들하는 데에 시간이 오래걸리고, 내 노트북 상태 안 좋아서 잘 되지도 않고.. 정말 힘든 시간이었다. 어쨌든 1달 동안 끙끙대서 다시 하라면 금방 만들 수 있을 것 같긴 하다. react 랑 비슷하긴 하지만, 정말 그것만으로 할 수 있는 것은 아닌..
2. expo : react-native 로 모바일 어플을 만들 때 안드로이드 스튜디오 없이도 개발을 가능하게 해주는 도구.
   • 처음에 다 같이 설치할 때 환경마다 다 다른 버전 문제가 있어서 힘들었다. ㅜㅜ 그리고 이번 프로젝트에서는 큰 문제가 없었지만, 진짜 많은 라이브러리를 사용해야 하는 프로젝트의 경우 expo가 다 지원하는 것은 아니라면, 매우 골치 아파지는 듯하다. 
3. Redux : 상태관리를 쉽게 할 수 있도록 해주는 라이브러리. 
   • 리액트에서는 state를 위에서 아래로 내려주는 방식을 사용했기 때문에, 복잡한 컴포넌트 구조에서는 state 관리가 어려웠는데, redux는 그냥 store 하나에 모든 state를 저장하고 그것들을 가져다가 사용하면 된다. 
   • 처음에 action, reducer, dispatchtoprops 등등 하는게 무슨 말인가 싶어서 그렇지, 적응하고나면 너무 편하다!
4. React-navigation : 리액트 라우터처럼 화면을 전환할 수 있게 해주는 라이브러리
   • 전체 구조를 짜는 게 어려웠다. 지금 생각해보면 어렵지 않은데, 그 때는 종합적으로 네비게이터를 사용한 예시를 잘 찾지 못해서 이상한 시도들을 하면서 차차 알게 되었다. 
5. TypeScript : 자바스크립트의 superSet
   • 자바스크립트는 타입을 따로 지정해주지 않기 때문에, 막 쓰기에 편하기도 하지만, 그렇기 때문에 복잡한 작업을 할 때는 오히려 불편해지기도 하는데, 이런 점을 보완하기 위해 정적타입을 지원하는 타입스크립트가 만들어졌다고 한다.
   • 쓰긴 썼는데, js만큼 익숙하게 다룰 수는 없기 때문에 더 공부해야 한다. 

---

기능

 

내가 구현한 기능들은 아래와 같다. (2,6,7 포스팅 완료)

 

1. 전체 컴포넌트 구성(공통)
2. JWT 로그인 & 로그아웃, refresh 토큰 이용하여 자동 로그인 구현 -> 잦은 로그아웃으로 인한 사용자들의 불편함을 최소화하였다. 
3. 기본 유저 정보 및 habit, todo, reward 정보 불러와서 store 저장
4. 메인 페이지 구현
5. 전체 store 관리, reducer 작성
6. react-navigation 이용하여 화면 이동 구현 (stack, tab, drawer, switch navigator 사용)
7. apk 파일 빌드 ( android studio 를 사용하지 않았기 때문에 playstore 배포는 하지 못함, 어차피 저작권 문제 때문에 배포는 못함)

https://soyoonty.tistory.com/136

JWT - Refresh Token을 이용한 자동로그인 구현

https://soyoonty.tistory.com/140

React-Navigation 적응기 1

https://soyoonty.tistory.com/142

Expo build로 안드로이드 apk파일 생성하기

 

 

---

회고

 

내가 팀장이었는데, 전체적으로 시간 관리를 잘 못했다는 아쉬움이 남는다. 

 

먼저, 일 분담을 잘못한 것 같다. 처음에 생각할 때는 연관되어 있는 메인페이지와 crud 기능 페이지들을 한 사람이 다 해야한다고 생각했었는데, 그러면 너무 일의 양이 한 사람에게 치우치게 되는 것 같아서 나누게 되었다. 결국, 그 결정이 프로젝트의 진도를 가장 더디게 한 요인이 아닌가 싶다. 나중에 합을 맞추는 것이 더 힘들었다. 

 

그리고 팀원들이 얼마나 진도를 나갔는지, 그리고 어느 정도로 이 프로젝트를 이해하고 있는지를 더 잘 파악하고, 코드리뷰도 더 세세하게 했어야 했는데 내가 해야하는 부분들이 급하다보니 그런 점들을 챙기지 못했다. 그래도.. 완성은 해야 하므로 끝까지 포기하지 않고 어떻게든 완성은 했다. (일을 잘 나누던가, 아니면 진행상황을 잘 파악했어야 하는데 둘 다 못한 내 잘못) 팀장은 진짜 어려운 자리라는 것을 너무 절절히 느꼈다. ㅋㅋㅋㅋㅋ

 

개인적으로는 내가 구현해야 하는 기능이 있을 때, 일단 무식하게 쓰지 말고 좀 구글링을 많~~이 했으면 좋겠다. 이것 때문에 가장 아쉬운 점이 react-navigation의 이벤트리스너(didfocus, didblur)를 잘 활용하지 못했다는 점인데, 그래서 코드가 많이 길어졌다고 생각한다. store에 state를 많이 넣는 게 나을까? 서버에 자주 다녀오는 게 나을까? 아직 확실하게 모르겠지만 그 부분을 중점적으로 리팩토링할 수 있을 것이다.

 

더 많은 기능들을 도전해보고 싶었는데, 전체적으로 속도가 그만큼 나지 않아서 해보고 싶은 새로운 기능들을 많이 넣지 못한 점이 좀 아쉬운 프로젝트였다. 클라이언트에서 시도할 수 있는 기능들이라면 시간을 내서 조금씩 더 도전해보고 싶다. 그리고 redux포스팅, typescript 좀 더 공부하고 포스팅 등의 과제가 남아있다. (추가 예정)

 

+ 서버가 보내준 데이터를 보면, mongoDB랑 mongoose는 테이블간 연동(용어 정확하지 않음)을 해서 보내주니까 클라이언트가 쓰기에 엄청 편했다. 다음에는 직접 백에서 사용해보고 싶다. 

 

이 프로젝트는 끝이 아니고, 앞으로 새로 할 프로젝트도 많으므로 너무 많이 아쉬워하지 말아야...