[프로젝트] 스마트오더 플랫폼, Food Bridge 프로젝트 회고

 

 

2024. 01. 15 ~ 2024. 04. 28까지 3달 넘게 진행한 프로젝트가 끝났다.

4월 5일에 배포를 하고 그 뒤에 서비스를 운영하며 유지보수 기간도 가졌다.

긴 프로젝트 기간 동안 어떤 일들이 있었는지 그때마다 기록했으면 좋았겠지만 아쉽게도 그러지 못했다.

이게 첫 프로젝트라 그래서일까 기록의 중요성을 너무나 늦게 알아버렸다.

그 당시에 기록은 못했지만 사후기록이라도 남겨봐야지.

 

첫 프로젝트를 시작한다고 의욕 넘치던 초반에 썼던 글...

이때부터 계속 기록을 남겼어야했는데!

 

https://jemarque.tistory.com/entry/%EC%B2%AB-%ED%8C%80-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%ED%8C%80-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EB%A5%BC-%EC%8B%9C%EC%9E%91%ED%95%98%EB%8B%A4

[스마트오더] 팀 프로젝트를 시작하다

 

---

프로젝트 소개

 

• 인원 : 4명 (프론트엔드 2명 / 백엔드 2명)
• 주제 : 스마트 오더 플랫폼
• 설명 : 전국의 배달 음식점과 소비자를 연결하는 웹사이트
• 기술스택
  • frontend : React, Redux, SCSS, JavaScript
  • backend: DjangoRestFramework, PostgreSQL, Python, Docker
• 협업도구 : Github, Notion, Discord, Figma
• 깃헙 링크 : https://github.com/Food-Bridge/Front-end
• 링크 : https://foodbridge.vercel.app/

Food Bridge

 

나의 역할

• 기획 및 디자인
  • 플로우 차트 작성
  • 페이지 와이어프레임 및 목업 제작
• 페이지 구현 및 서버 연결
  • 전체 페이지 구현
  • 전체 페이지 서버 연결
• 유지보수
  • 유저 피드백 반영
  • 페이지 최적화
  • 오류 수정

 

---

프로젝트 회고

 

많이 사용하는 회고 방식인 KPT 회고 방식으로 정리해보겠다.

Keep, Problem, Try

그리고 새롭게 알게 된 점까지 추가로 정리해보겠다.

 

1. Keep (잘한 점)

 

• 첫 팀 프로젝트 도전
  
  • 이전까지는 인강을 듣고 따라해보는 방식으로 자바스크립트와 리액트를 학습했다. 강의를 들을 때는 충분히 이해가 되었지만 강의를 끄고 혼자 프로젝트를 만들어보려고 시도할 때마다 어려움에 부딪혀 멈추게 되었다.
  • 그러나 이 프로젝트를 진행하면서는 어려운 부분, 모르는 부분에 부딪혀도 멈출 수 없었다. 개인 프로젝트가 아니었기 때문이다. 팀 프로젝트에서는 개인 프로젝트 보다 더 큰 책임감을 가지고 작업에 임할 수 있었다.
  • 특히 이 프로젝트는 분리 개발을 택하였는데, 백엔드와 소통하고 api를 연결하는 과정에서 참 많은 걸 배웠다.
• 매주 오프라인 회의
  • 다행히 팀원들이 사는 곳이 그리 멀지 않아 이수역에서 매주 토요일에 모여 4시간 정도 회의를 진행했다. 온라인 상으로만 소통할 때보다 훨씬 집중이 잘 되었고 소통도 원활했다.
• 다양한 협업도구 사용
  • 디스코드, 노션 등 협업도구를 적절히 잘 사용해서 제때 문제를 해결할 수 있었다.
  • 처음에는 에러가 떴을 때 이게 프론트 문제인지, 백 문제인지 잘 구분을 못했었는데 이제는 잘 구분할 수 있게 되었다. 게다가 약간의 파이썬, 장고 지식도 생긴 것 같다. 전공자이신 백엔드 팀원분들께 에러 내용을 전달하면 바로 어떤 문제인지 알려주시거나 수정사항을 반영해주셔서 금방 문제를 해결했다.
• 전체 개발 프로세스 경험
  • 기획 - 디자인 - 개발 - 배포 - 유지보수의 단계들을 거치면서 큰 개발 프로세스를 경험했다. 그동안은 기획도 디자인도 제대로 하지 않고 개발만 해보았는데 이 모든 과정을 경험해 볼 수 있어서 좋았다.
  • 디자인이 있으면 더 화면 구현이 편하다는 것, 배포한 사이트는 로컬 사이트 보다 속도가 느리다는 것, 그리고 사용자들에게 직접 피드백을 받으면서 좀 더 나은 결과물을 만들 수 있다는 것.

 

2. Problem (아쉬운 점)

 

• 팀원의 이탈
  • 프론트엔드가 처음에는 2명이었다가 1명이 되었다. 부트캠프 참여로 프로젝트에 많은 시간을 쏟기 어려우셔서 결국에는 이탈을 택하셨다.
  • 혼자 프론트엔드를 맡아 마무리하는 과정에서 큰 스트레스를 받았다. 이전에 팀원 분이 작성해두신 코드를 확인하는데 api 연결이 제대로 되어 있지 않아 이 부분을 수정하느라 애먹었다. 다른 사람의 코드를 읽고 해석해서 나의 코드로 만들어 수정하는 건 쉬운 일이 아니었다. 배포 전후와 배포 이후의 오류 수정 단계에서 이러한 어려움이 특히 두드러졌다.
  • 그래도 배포 이후에 새로운 팀원 분이 오셔서 함께 유지보수와 문서화를 진행해  결국에는 잘 마무리가 되었다.
• 너무 짧았던 기획 기간
  • 기획을 큰 틀로 스마트오더플랫폼을 만들자! 라고만 정하고 그 뒤로는 프론트엔드에서 디자인을 알아서 하고 백엔드에서는 그 디자인을 보고 api를 만들었다.
  • 이러한 기획 방식의 문제는 백엔드 입장에서 디자인만 보고 api를 만들어 공유하니 꼭 필요한 필드들이 빠진다는 점이었다. 그래서 백엔드에서 만들어주신 api를 연결하다가 필요한 필드가 없어 다시 요청하고 기다리는데 시간이 소요되었다.
  • 또한 초반에 어떤 페이지가 필요한지 완전히 알 수 없어 프로젝트 중간중간에도 피그마에 새로운 페이지를 디자인해야했다. 갑자기 판매자 페이지를 추가하게 되어서 디자인-페이지구현-서버연결까지 하느라 배포하기까지 기간이 길어졌다.
• 기록의 부족
  • 초반에는 기록을 잘 해야겠다는 생각으로 컴포넌트 하나, 페이지 하나마다 노션에 기록을 남겼지만 어느 순간부터 너무 작업이 더뎌서 개발 자체에만 시간을 투자하다보니 기록을 못했다.
  • 마지막 쯤에 문서화 작업을 하면서 노션과 깃헙 리드미를 정리하는데 미리 회의록이나 오류 등을 잘 정리해왔다면 더 수월했을 것 같다는 생각이 들었다.
• api 명세서 없이 개발한 기간
  • 백엔드와 협업이 처음이라 api 연결도 처음이었다. axios를 사용해서 연결하는데 url도 모르겠고 어떤 필드가 있는지도 몰라서 너무 힘들었다. 파이썬 코드를 해석해가면서 필드를 찾아헤매느라 서버 연결이 늦었다.
  • 중간에 백엔드 팀원분들께 명세서 공유를 요청드렸고 그때부터는 swagger를 활용하여 어떤 필드가 있는지 확인하고 테스트도 해 볼 수 있었다.
• 디자인 패턴 적용 실패
  • 원래는 mvvvm 모델을 선택해 view, viewmodel 폴더를 분리해두었으나, 모델에 대한 이해도가 떨어져서 viewmodel 폴더를 비운 채로 프로젝트를 마무리했다. 즉, view에 모든 코드가 들어간 것이다.
  • viewmodel이 무엇인지는 정보처리기사를 공부하다가 늦게서야 알게되었고 이미 너무 거대해진 프로젝트를 다시 다 뜯어고치기는 어려웠다.

 

3. Try (개선점)

 

• 모든 걸 기록하기
• 기획과 디자인에 충분한 시간을 두고 개발 단계로 넘어가기
• 컴포넌트를 적절한 크기로 분리하기 (300줄 넘는 페이지가 있음, 버튼 등 자주 쓰는 컴포넌트 미리 만들어서 재사용하기)
• 프론트엔드 인원은 백엔드와 같거나 그보다 많아야 좋을 듯
• 프론트만 알아서는 안된다, 백엔드도 알아야한다!
• react 개발자 도구, redux 개발자 도구 적절히 활용하기
• TypeScript 사용하기

 

4. 새롭게 알게 된 점

 

• Github으로 협업하는 방법을 알았다. (branch 활용과 pull request 등...)
• JWT 토큰, 카카오/구글 소셜로그인 구현 성공!
• axios는 이제 자신 있다!! 서버에 요청 보내는 코드에 익숙해졌다. (처음에는 header에 토큰 넣어야 하는 줄도 몰랐음..)
• sweetalert2, react-spinner 등등 새로운 라이브러리를 사용해보았다.
• chrome 개발자 도구의 Lighthouse를 활용해 최적화를 해보았다.

 

---

 

마무리

 

첫 프로젝트다 보니 여러 우여곡절이 많았지만 그래도 잘 끝났다.

아쉬운 점도, 개선할 점도 많지만 새롭게 알게 된 점이 많았다.

무엇보다 내가 개발 공부를 시작하고 처음으로 제대로 만들어본 웹사이트가 생겨서 뿌듯했다.

배포 이후에 주변 지인이 내가 만든 사이트를 이용하고 피드백을 남겨주는 것도 좋았는데,

서비스 기업에서 근무하면서 주변 지인들이 그 사이트를 많이 이용한다면 얼마나 더 기쁠까.

 

나는 프론트에만 관심이 있었는데 이번 프로젝트를 통해 백엔드에도 관심을 가질 수 있었다.

나에게 잘 맞는 직무를 찾기 위해 이제는 자바를 배워보려고 한다!

 

이번 프로젝트에서 얻은 걸 바탕으로 다음 프로젝트는 더 잘 할 수 있을 것 같다.

다음 팀 프로젝트 전에 개인프로젝트도 해봐야지.