정규 수업이 종료되고 약 1달간의 프로젝트가 시작되었다.
프로젝트 인원은 총 4명으로 구성되었다.
프로젝트 방향 웹? 앱?
프로젝트팀은 프로젝트 시작 2주전에 구성되었기 때문에 그동안 많은 회의를 하면서 프로젝트의 방향성을 잡아갔다.
가장먼저 정해야할것은 웹 프로젝트를 할것인가? 앱 프로젝트를 할것인가? 이다.
웹 프로젝트를 진행한다면 상대적으로 쉬운 개발환경 구성 및 그동안 배웠던 내용으로 빠르게 진행할수 있는 장점이 있고
앱 프로젝트를 진행한다면 어려운 개발환경 구성, 배우지 않았던 언어의 사용등 단점이 있지만 앱 개발도 경험해볼수 있는 장점이 있다.
여러 고민끝에 우리는 ReactNative를 이용해서 앱 프로젝트로 진행하기로 결정했다.
어떤 앱을 만들지?...
앱 프로젝트를 진행하기로 결정한 후 아이디어 회의에 들어갔다.
가장 중요한점은 획기적인 아이디어보다, 그동안 우리가 배운 내용을 보여줌과 동시에 완성물이 나오는 것이다.
욕심이 앞서 현재 우리의 수준에서 실행하기 어려운 아이디어를 선택하지 않는것이 중요했다.
프로젝트 팀이 꾸려진 후 매주 한번씩 아이디어를 모아서 회의를 진행했다.
프로젝트 아이디어 정리
회의는 총 3주정도 이루어 졌고, 그 주마다 가장 좋은 아이디어를 결정했다.
마지막주에 그동안 가장 좋았던 아이디어중 1개를 채택했다.
선택한 아이디어는 수면용품 쇼핑어플이다.
간단한 설명을 하자면 수면용품을 판매하는 판매업체들과, 구매하는 구매자들을 중간에서 이어주는 쇼핑어플이다. (오늘의 집 같은 어플...)
프로젝트 시작!
프로젝트를 시작후 우리는 각자 임무를 먼저 정했다.
협업에 필요한 Git 공부도 필요했고, ReactNative, firebase 등등 모두 처음부터 시작해야 했기에 시간도 필요했다.
figma를 이용한 와이어프레임
figma를 이용해 와이어프레임을 정한후 디자인작업이 들어가야 하기에 와이어 프레임을 가장먼저 그리기 시작했다.
각자의 의견이 모두 적절하게 들어가야 하기에 와이어프레임은 역할을 나누지 않고 모두 함께 참여해서 그리기 시작했다.
와이어 프레임
와이어 프레임시 가장 중요하게 생각한것은 단계를 정하는 것이었다.
1차 구현, 2차구현, 3차구현 등등 단계를 정해서 진행하기로 했다.
기간이 짧은 프로젝트 이기 때문에 단계마다의 완성본을 산출한 후 진행하는것이 좋다고 생각했기 때문이다.
임무 분배
와이어프레임 제작이 끝난후 각자 파트를 정리했다.
병진님: firebase, LoginPage(구글인증, backend + firebase 결합 연구)
경환님: GitHub, Mypage
혜선님: GitHub, DetailPage, BuyPage
나: 폴더구조 정하기, MainPage, ListPage
시간이 부족하다고 빠르게 시작하기 보다, 각자의 파트에서 충분히 공부하고 가는게 시간을 더 절약하는 방법이라고 생각했다.
예를 들면 협업과정에서 GitHub merge시 충돌이슈가 빈번하다.
가장 좋은방법은 충돌이 안나는것이고, 충돌이 나더라도 해결방법을 알아야 하기때문에 약 3일정도의 시간을 가지고 GitFlow 와 troubleshooting에 대한 정보가 필요했다.
폴더구조
프로젝트 폴더구조를 짜기위해 ReactNative 공부부터 시작했는데 웹과 다른점이 바로 페이지 이동이였다.
웹에서는 주소가 있기 때문에 /boards 이런식으로 주소창에 입력하면 갈수있지만 앱에서는 주소가 없고 페이지 이동하려면 ReactNavigation 을 이용해야 했는데
ReactNavigation 적용이 익숙하지 않았다.
그래서 먼저 페이지 이동시 어디로 가야하는지에 대한부분부터 정리하기 시작했다.
app.js 파일부터 depth를 정리하기 시작했다.
이렇게 정한 방법대로 navigator 파일에 각각의 페이지를 Stack.Screen으로 구성했다.
완성된 폴더구조
기본적으로 Container, presenter 폴더구조 방식을 사용했다.
웹에서 사용하던 방식보다 한단계 더 들어가 Navigation 파일이 필요했다.
component ==> screen ==> navigator ===> tabnavigator ==> app.js <=== landing
추후 구현될 로그인 페이지(landing)와 로그인시 들어오는 페이지(tabnavigator) 를 app.js에서 삼항연산자로 구현할 예정이다.
(로그인된 유저는 tabnavigator로, 안된 유저는 로그인 페이지로)
그렇게 tabnavigator로 들어오면 tabnavigator 에서 2번째 depth 페이지로 2번째 depth 페이지에서는 3번째 페이지로 이동하는 방식이다.
폴더구조 완료 후 첫 git push & pull
폴더구조 구성이 끝날때 쯤 GitHub에 대한 공부가 종료되어 코딩이 시작되었다.
폴더구조 구성시 최대한 많은 부분을 구현한 후 push 하였으며, 페이지 이동이 완료되었기 때문에 각자 맡은 페이지에서 코딩을 시작했다.
