19.11.11 ~ 19.12.7 (4주)
기획의도 및 프로젝트 소개
게임 속에서는 열심히 노력하면 그 결과가 눈에 보이지만 현실에서는 눈으로 확인하기 어려워 금방 지치게 된다. 그러한 노력을 눈으로 확인해 삶을 더욱 활기차게 극복할 수 있도록 하기 위해 착안된 생활 관리 앱
소개
게임에서는 키보드를 누르고만 있어도 경험치가 오르고 레벨업이 되는데, 현실에서 우리는 아무리 많은 과제와 업무를 완성해도 경험치가 오르고 레벨업이 되는 것을 눈으로 확인할 수가 없습니다. 그래서 더 지치는 것은 아닐까요?
내가 현실세계에서 하는 일들로 캐릭터를 성장시킬 수 있는 생활관리 앱, GoStop 입니다.
HABIT & TODO
새로 만들고 싶은 좋은 습관이나 없애고 싶은 안좋은 습관을 기록해보세요.
행동을 취할 때마다 버튼을 눌러 경험치와 코인을 쌓아 캐릭터를 키울 수 있습니다.
또한 기간별로 해야 할 일들을 기록하고 완수하는 것으로도 캐릭터를 성장시킬 수 있습니다.
REWARD
미션을 본인이 정하는 것처럼, 보상 또한 스스로 정해주세요.
좋은 습관을 기르고, 해야 할 미션들을 완수하며 얻은 코인으로 보상을 구입할 수 있습니다.
치킨 시키기, 영화 보기 등 수고한 본인에게 선물을 줄 수 있습니다.
CHARACTER
경험치가 쌓이면 캐릭터는 레벨업이 가능합니다.
레벨이 오를수록 레벨업에 필요한 경험치도 높아집니다.
나쁜 습관을 자꾸 실행할 경우 체력이 감소하여 레벨이 내려갈 수 있으니 주의하세요!
ITEM
캐릭터는 코인으로 아이템을 구매할 수 있습니다.
아이템샵에서 새로운 헤어, 옷, 바지 등을 구입하고 나만의 캐릭터를 꾸며보세요.
포지션 및 스택
저번엔 백엔드를 맡았었는데 그 때 너무 고생한 기억이 있어 이번 프로젝트에서는 프론트엔드 쪽을 맡았다. 여기서 사용한 스택들은 React-native, Redux, TypeScript, JWT, Expo를 사용하였다. Expo는 스마트폰으로 앱을 실시간으로 확인하기 위한 용도로 사용하였다. React-native를 사용하면서 안드로이드 시뮬레이션을 이용해 확인하려했지만 컴퓨터에 부하가 너무 심해 다른 방안으로 Expo를 사용하였다.
- React-native : 기존의 React 방식으로 어플리케이션을 만들 수 있도록 만들어진 모바일 응용 프로그램 프레임 워크이다. 처음에는 React와 거의 비슷하다고 해서 금방 적응할 줄 알았는데 생각보다 차이점이 많아 고생했었다.
- Expo : 안드로이드 시뮬레이션을 대신하여 사용한 도구이다. 생각보다 많이 까다로웠던.....
- Redux : State관리를 보다 쉽게 할 수 있도록 사용한 라이브러리이다. 확실히 React보다 훨씬 깔끔하게 State관리를 할 수 있어서 좋았다.
- TypeScript : 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어라고 설명이 되어있다. 이거 때문에 이번 프로젝트에서 고생을 많이 했다. 타입을 설정해주는데 변수들의 타입이 맞지 않으면 은근 오류가 많이 생겨 이 오류를 해결하느라 시간을 더 많이 쓴 듯하다.
기능
- 전체 이미지 구성 및 컴포넌트 구성
- React-Native - Expo를 활용하여 앱(Android) 기본 구조 및 아이템 샵과 캐릭터 꾸미기 페이지구현
- React-Native - JWT를 활용하여 user마다 구매한 아이템을 구별할 수 있도록 구현하여 다른 사람이 볼 수 없도록 구성
- Redux - S3를 활용하여 아이템 이미지를 저장하고 구매한 아이템을 추가할 수 있도록 상태관리, 아이템 구매와 캐릭터 꾸미기시 변화 확인
- AWS로 구축한 서버와 연결하여 저장한 아이템을 불러와, 페이지 새로고침시 현 상태 유지가능
- Typescript를 활용하여 오류검사를 위한 타입 체킹과 Interface를 적절히 활용,
문제해결을 위한 시간단축
회고
이번 프로젝트에서 제일 아쉬웠던 점은 프론트 쪽을 구상하고 구현하면서 왜 서버 쪽과 빨리 연결을 안해봤냐는 것이다. 프로젝트 막바지에 가서 서버와 연결을 하였었는데 그 때 너무 많은 변수가 생겨서 백엔드를 맡으신 분에게 이것저것 바꿔주라, 변경해주라, 이건 빼주라하다보니 솔직히 싸움이 안 일어나면 이상한 상황까지 갔었던 적도 있다. 지금 생각해보면 너무 죄송할 따름이다.ㅎㅎㅎㅎㅠㅠㅠㅠ 그래도 많이 양보해주셔서 그나마 겨우 기능들을 완성하고 프로젝트를 끝낼 수 있었다.
원래는 더 많은 기능들을 구현하고 싶었지만 React-Native라든지 Expo라든지 이런 처음 사용해 본 것들이 있어서 속도도 많이 나지 않아 많은 기능들을 넣지 못한 점이 아쉬운 프로젝이다. 왜 개발자분들이 기존의 배웠던 것들로 왠만하면 사용하라는지 이제야 알 것 같다. 만약에 새로운 것을 사용하지 않고 기존의 것들을 사용했었다면 더 많은 기능을 넣고 더 좋은 기능들로 개선시킬 수 있었지 않았을 까라는 생각이 가끔씩 든다.
그리고 프로젝트를 하면서 많이 후회했던 점은 Typescript를 사용한 것이다. 솔직히 실무에서는 큰 프로젝트들이 많이 있고, 타입들도 지정을 해줘야 나중에 탈이 안나기 때문에 사용을 하겠지만 이번 프로젝트는 굳이 사용할 필요가 있었을 까라는 생각이 들었다. 기능들을 구현하면서 오류들이 많이 났었지만 그 중에서 제일 많이 오류가 난건 타입스크립트 쪽이다. 이것 또한 이번에 처음 사용해보는 것이라 사용방법을 몰라 이것저것 오류가 많이 났을거라 생각이 드는데 만약 이걸 사용하지 않았다면 다른 기능들을 좀 더 개선할 수 있었지 않았을까 라는 생각이 많이 든다.
이번에는 새로운 것들을 많이 시도하였는데 시간이 많다면 시도해 볼 법도 하지만 만약 시간이 많이 없다면 기존의 것들로 하는 것이 제일 현명할 것 같다.
프로젝트 작업 페이지
deck
A presentation created with Slides.
slides.com
LeeKyungJoon/Go-Stop-client
Contribute to LeeKyungJoon/Go-Stop-client development by creating an account on GitHub.
github.com
https://www.notion.so/7-GoStop-Tazza-cf7e1e96470b4824be575fe0b60f6ee6