[Final Project] 4주 프로젝트 회고

4주 프로젝트 회고

---

마지막 프로젝트를 진행했다. 기획부터 배포까지 총 4주간 진행했고, 그 과정에서 배운 것들을 정리해보려고 한다.

 

 

A Week Trip

---

 

로그인 화면과 메인 화면

 

내일로 기반의 기차여행 계획 및 커뮤니티 앱 A Week Trip을 구현했다.
원래는 내일로 여행을 배경으로 삼은 앱이었는데, 프로젝트 도중에 내일로가 개편이 되는 바람에… 급하게 기차여행 앱으로 변경했다.

 

A Week Trip의 주요 기능은 아래와 같다.

1. 구글 / 페이스북 소셜로그인 및 로그아웃
2. 추천 기차역 및 추천 코스 조회
3. 기차역 검색 및 즐겨찾기
4. 기차 노선도가 있는 지도 줌인 / 줌아웃 조회
5. 날짜 / 일차별 계획 생성
6. 게시글 생성 / 수정 / 편집 / 삭제
7. 게시글 검색
8. 게시글에 사진 첨부하기
9. 게시글 스크랩
10. 댓글 생성 / 수정 / 편집 / 삭제
11. 내가 쓴 게시글 / 스크랩한 게시글 조회
12. 내가 만든 계획 조회 / 삭제 / 수정
13. 내가 만든 계획을 메인 페이지에 추가 / 삭제

 

맡은 역할

---

이번에도 프론트엔드를 담당했다.
소셜 로그인 / 메인 / 검색 / 계획 / 내 계획 보기 페이지의 구현을 맡아 작업했다.
운좋게 저번 2주 프로젝트와 같은 팀을 만나서, 훨씬 편안한 분위기에서 잘 아는 분들과 함께 진행할 수 있었다.

 

프론트엔드에서 사용한 기술 스택

---

• React Native
• Expo
• React Hooks
• React Navigation
• Redux
• Axios
• Native Base
• Paper
• Day.js

 

앱으로 구현할 예정이었기 때문에, 1순위로 React Native가 선정되었고 지난번에 사용해보지 못한 Redux를 꼭 사용해보고 싶어서 Redux 및 React Hooks를 함께 사용하기로 했다.

 

React Native를 그냥 사용하지 않고 Expo를 사용하기로 했는데, 가장 큰 이유는 진입 장벽이 낮다는 점이었다.
여러 가지 좋은 모듈들도 많았고, CRA처럼 Expo도 명령어만 몇 번 입력하면 알아서 React Native 프로젝트의 틀을 만들어 줬기 때문에 꽤 편리했다.

 

UI 템플릿으로는 Native Base, Paper를 사용했다. 전반적으로 적용하지는 않았고, ios와 호환되지 않는 부분이나, React Native 내장 컴포넌트만으로는 기능적으로 원하는 효과를 주기 힘들었을 경우에만 일부분 적용했다.

 

추가적으로 계획 작성 시에는 캘린더를 이용해야 했기에 날짜 포맷을 맞추기 위해 Day.js를 사용했다. Moment.js와 고민했지만, 조금 더 가벼운 버전인 Day.js를 선택했다.

 

겪었던 문제들

---

1. 데이터 형태가 명시되어 있지 않아서 문제를 겪었다.

앱의 규모가 커지며 state의 구조도 더욱 복잡해졌다.
데이터 역시 더더욱 다양한 자료형으로 들어오고 있었는데, 무슨 타입인지 명시되어 있지도 않고 오류에도 뜨지 않으니 어디에서 어떻게 들어오는지 하나하나 찾아서 디버깅하는 것을 반복했다.
가끔 서버 분들도 호출해서 무슨 형태로 들어오는지 여쭤보기도 했는데 귀찮아하지 않고 대답해주셨지만, 매번 여쭤보기도 죄송하기도 했고 번거롭기도 정말 번거로웠다.

 

그래서 TypeScript를 왜 사용하는지 정말… 정말 뼈저리게 느꼈다.
이 문제 때문에 하루 자체를 날린 적이 있어서 정말 더 필요성을 느꼈다.
PropTypes를 사용할까도 생각해봤지만, 작업 도중에 이미 복잡하게 얽혀 있는 state에 하나하나 적용하는 것도 꽤 시간이 걸릴 것 같아서 추가적으로 사용하지는 않았다.

 

다음 리액트 프로젝트는 TypeScript로 작업해보고 싶었는데, 단순히 맛만 봤지 그 필요성을 완전히 이해한 것은 아니어서 아쉬웠었다.
하지만 이번 프로젝트를 진행하며 TypeScript의 필요성을 어느 정도 이해한 것 같았고, 적어도 왜 쓰는지 알고 사용할 수 있게 되어서 그 부분은 다행이라고 생각하고 있다.

 

2. Expo로만 개발하는 것의 한계를 느꼈다.

소셜 로그인을 구현하기 위해 알아보는데, 카카오나 네이버 등과 같은 외부모듈을 Expo 앱 내에서 사용하려면 프로젝트의 eject가 필요했다.

 

eject를 하면 Expo 내장 모듈을 사용할 수 없게 된다고 하는데, 이러면 기껏 Expo를 사용하는 이유가 사라진다고 생각했다.
ExpoKit을 사용하면 된다고 하는데, 소셜 로그인을 구현할 시기가 프로젝트 막바지였기 때문에, 시간에 쫓기는 와중에 eject를 하는 것이 조금 부담으로 다가왔다.

Expo의 한계를 느끼기도 했고, 지난번 2주 프로젝트도 편하게 CRA를 사용했기 때문에 웹팩 / 바벨을 경험해볼 기회가 줄어서 이들에 대한 이해도가 떨어지는 느낌이었다.

그래서 추후 개인 프로젝트를 할 때나, 시간을 따로 내서 CRA / Expo를 사용하지 않고 기초 프로젝트 셋팅을 하는 경험을 해 볼 예정이다.

 

3. 초반 기획 설정의 중요성을 더 뼈아프게 깨닫게 되었다.

솔직하게 얘기하면, 마이페이지 부분이 중반부까지 계획이 구체적으로 설정되어 있지 않고 있었다.

 

원래는 계획 페이지에서 계획을 만들면, 메인 페이지에 있는 태스크 카드에 추가되고, 프론트에서 관리할 계획도 1개만 존재했었다.
또, 이미 계획이 존재한다면 계획 생성 페이지 대신 계획 수정 페이지를 표시하는 구조였다.

 

메인 태스크 카드에 계획이 없음에도 계획 수정 페이지가 나온다.

그런데 후반부에 마이페이지 계획이 구체화되며 내 계획보기 메뉴가 추가되며, 굳이 계획 생성 페이지와 계획 수정 페이지를 번갈아가며 표시해주지 않아도 되는 상황이 되었다.
또, 계획 페이지의 initial 페이지가 리로딩을 하지 않으면, 원래 의도한 대로 현재 메인 페이지에 있는 계획의 존재 여부와 일치하지 않는… 치명적이라면 치명적일 수 있는 버그가 발생했다.

 

그래서 데모데이 바로 전날, 뒤늦게지만 계획 수정을 계획 탭에서 마이페이지로 옮기기로 했다.
UI적으로도 계획 수정이 계획 탭에 있는것보다는 내 계획 보기에 들어가 있는 쪽이 훨씬 개연성이 있다고 판단했다.
마지막에 데모데이 팀별 문서를 작성하는 것도 이 문제를 디버깅하느라 지체되어서 팀원분들께 정말로 죄송했다.

 

이렇게 된 원인에 대해서 생각해 봤는데, 가장 먼저 초반의 기획 부실을 꼽을 수 있을 것 같았다.
마이페이지 기획이 부실한 점을 알았지만 나중에 어떻게 되겠지… 하면서 남겨 두다가 제대로 스노우볼을 맞은 느낌이었다.

앞으로는 다른 프로젝트 할 때, 초반에 정말 모든 앱의 흐름을 알 수 있을 정도로 구석구석 구조와 흐름을 다 짜 둬야겠다는 생각이 들었다.
또, 조금이라도 모호한 점이 있다면 절대 방치하지 말고, 꼭 회의시간에 얘기하고, 상의를 한 뒤 반영을 해야겠다.

 

 

4. 초반에 어떤 식으로 구현해야 좋을 지 더 생각해봐야할 것 같다.

계획을 만드는 부분이 계획 자체는 1개이고, 서버에도 만든 계획을 통째로 보내주는 구조였다.

보내 주는 것은 통째로이지만, 그 통째의 계획을 작성하려면 두 페이지를 설정한 일수만큼 왔다갔다 하며 서로간에 데이터를 보내 주고, 합치고, 가공해야 했다.
하지만 초반에 리덕스를 사용하지 않았고, 먼저 미니 프로젝트를 진행했음에도 리액트 네비게이션에 대한 이해도가 낮았기 때문에 코드 자체가 많이 꼬이게 되었다.
리덕스를 처음에 도입시키는 것이 부담스러울 것이라고 생각했는데, 오히려 초반에 리덕스를 사용하지 않음으로써 state 관리가 더욱 부담스러워지는 상황이 발생했다.

 

그래서 다음부터는 초반에 어떻게 구현을 할 지 조금 더 머릿속에 잘 그려 두고 프로젝트에 들어가야겠다고 생각했다. 원래도 어느정도 구상을 해 두지만… 정말 많이 부족했던 것 같다.

 

프로젝트, 그리고 회고를 마치며…

---

우선 사용한 기술 스택에 대해서 얘기를 조금 해 보자면, 정말로 애증의 리액트 네이티브였다.
디버깅이 어렵고, 리액트 네비게이션 라이프사이클이 리액트 라우터보다 다루기가 어려웠지만 또 앱만의 재미가 있었던 것 같았다.

 

색갈피 때는 리액트의 state를 이용해서 뷰를 동적으로 렌더링하는 것, 다양한 기능 자체를 추가하는게 재밌었다면, 이번에는 서버랑 통신하는 부분이 대폭 늘어서 비동기 처리를 다루는 부분이 많이 연습이 되었다.
다루는데 조금 더 감이 잡힌 느낌이었다.

 

더 필요한 것은 좀 더 딥한 리액트 기반지식… 리액트 하나만으로도 배우면 배울수록 부족하고, 잘 알지 못하는 느낌이 들어서 섣불리 좌우로 기술 스택 폭을 넓히기가 어려운 것 같다.
또, CSS로 화려한 뷰를 만들고 싶다는 마음이 더 들었다. 현재는 CSS 기본에 조금 더 충실하게 공부하는 것이 우선이라고 생각한다.
마지막으로, 리덕스에 관한 이해도를 조금 더 높이고 싶었다. 추가해서 MobX에도 관심을 가지고 있어서, 더 배워보고 싶다.

 

팀적으로는 이번에도 같은 멤버분들이라 굉장히 편한 분위기에서, 서로를 잘 아는 분들과 진행이 되어서 역할 분담부터 기획까지 수월하게 진행되었다.
하지만, 중간중간에 서버 분들과 살짝 소통이 부족했던 점이 있었다.
서버 측에서도, 서버가 바뀐 점이 있거나 아직 완성되지 않은 데모 버전을 적용시켰다면 미리 말씀을 주셨다면 더 좋았을 것 같았고, 프론트 측에서도 보내는 데이터 형태 등을 정확한 형태로 미리부터 말씀드렸다면 더 좋았을 것 같았다.

 

그리고, 함께 하는 프론트 팀원분을 고려하지 못하고 러닝 시간을 너무 짧게 가져간 것 같아서 초반에 많이 죄송했다…

 

기능적으로나, 팀 협업적으로나 저번 2주 프로젝트보다 조금씩 더 아쉬웠던 프로젝트였다.
아쉬웠지만 기능 자체는 초반에 정해 둔 advanced 기능을 거의 구현하긴 했다.
하지만 써보고 싶었던 Redux Saga를 끝까지 시간상 압박으로 사용해보지 못했던 것도 아쉬웠다.

모바일 기술 스택을 접해본 것은 좋은 경험이었고, 배운 것들도 많아서 재미있었다!

 

관련 링크

---

• 프로젝트 노션
• 프로젝트 발표 영상 (추가 예정입니다)