[회고] CEOS 프론트엔드 17기 프로젝트 바리바리 회고

8월 4일, 세오스 데모데이를 끝으로 17기 공식 활동이 끝났다.

마감 당일까지도 프로젝트를 하면서 수정할 게 조금씩 나와서 끝까지 고생을 했는데 잘 배포도 하고 마무리되어서 정말 뿌듯했다.

동아리가 끝나고 미니엠티도 다녀온 후 근육통을 달며 프로젝트 회고 글을 한 번 작성해보려 한다!😎

 

우선 내가 참여한 프로젝트의 이름은 '바리바리'이다. 이는 자취생을 위한 한 끼 해결 반찬 픽업 서비스로, 평소 건강한 음식을 섭취하기 어려운 1인 가구에게 반찬 가게에서 당일 남은 재고를 판매해주는 서비스이다. 자취생들의 입장에서는 한 끼를 채울 수 있는 적절한 양의 반찬을 합리적인 가격으로 구매할 수 있고, 건강한 식습관을 유지할 수 있다. 더불어 반찬 가게 사장님들은 폐기 처분해야 하는 재고들을 판매할 수 있는 기회가 된다.

 

배포 링크 www.baribari.store

바리바리

깃허브 링크 https://github.com/bariBari23/bariBari-FE

GitHub - bariBari23/bariBari-FE: About 잔반 도시락 웹앱 서비스 바리바리 프론트 Repo

 

우리는 기획 2 / 디자인 2 / 백 2 / 프론트 2이 참여했고, 나는 그 중 프엔으로 참여를 하게 되었다🚴‍♂️

 

협업 방식

 

처음에 팀 전체 협업 툴로 노션과 슬랙을 만들어서 활용을 했다. 근데 나중에는 노션이 편하지 않았던 팀원들도 있어 슬랙을 많이 활용했고, 개발팀이 협업할 때 노션을 활용했다. 프론트엔드로 참여를 하다보니 디자인이랑 협업할 일도 정말 많았고, 백이랑도 협업할 일도 많았다. 

 

디자인팀과 협업을 할 때는 피그마를 활용했다. 이번 플젝을 하면서 디자인 팀과 협업하는 방식이나 플로우를 알게 되었고, 개발을 할 때 어떤 식으로 피그마를 참고해야하는지를 알게 되었다. 공통 컴포넌트, 타이포그라피, 아이콘 등 모든 요소를 세세하게 정리해줘서 개발할 때 정말 깔끔했다😻 그리고 UI/UX가 어느정도 개발이 되었을 때는 임시 배포 링크를 공유해 디자인팀이 실제 구현된 사이트를 보며 피드백을 남겨줄 수 있도록 했다. (피그마 상으로 보이는 디자인이랑 실제 배포된 디자인이랑 살짝 차이가 나는 경우가 있었다.) 임시 배포 링크를 공유하고 디자인팀에서 보낸 피드백이 생각보다 많았었는데, 꼼꼼하게 적어줘서 빠르게 수정할 수 있었다! 

 

바리바리 피그마의 정말 일부..! 꼼꼼하고 알잘딱깔센이였던 우리 디자인 그저 빛이였다..✨

백이랑 협업할 때는 포스트맨과 노션을 많이 활용했다. 디자인과 협업을 했을 때와 마찬가지로 백과 협업할 때는 어떤 식으로 협업을 해야 되는지 배울 수 있었다:) 백이 만들어야 한 API 수가 적진 않았어서 포스트맨이나 더미데이터를 관리하는데 백이 고생이 참 많았다..🥺 API 연결을 하면서 걱정했던 것보다는 큰 문제가 터지진 않았고, 문제가 없진 않았다ㅎ. 문제가 터졌어도 착착 잘 해결이 돼서 다행이었다!

 

프론트엔드 파트너랑 개발을 할 때는 게더, 카톡, 전화.. 그냥 거의 모든 수단을 다 활용했다✨ 둘이서만 하는 협업이었지만 그래도 체계를 가지고 협업해보려고 노력했다. 다만 개발을 하다보니 꽤 일정이 타이트하고 바쁘게 돌아가서 내 생각만큼 협업 방식을 많이 활용해보진 못했다는 개인적인 아쉬움이 있긴 했지만, 결과적으로 보았을 땐 파트너와 원활하게 플젝을 완성한 것 같아 너무 뿌듯하다!:)

 

개발 내용

 

우선 우리는 리액트 + 타입스크립트로 개발을 진행했다. 

 

바리바리에서 내가 맡았던 부분들을 큼직하게만 정리해보면, 

 

1️⃣ 로그인/회원가입

- react form hook 라이브러리를 활용해보았다.

- input 폼의 유효성을 검사하기 위해 yup을 활용했다.

-  처음 로그인하는 사용자에 한하여 자신의 주소지를 설정할 수 있는 페이지가 있었는데, 여기서 주소지를 서치하면 카카오맵 지도에 커스텀 마커가 뜨고 주소가 서버로 넘어가는 기능을 구현했다.

 

2️⃣ 홈 화면 / 검색 화면

- 찜한 가게 목록 보기 기능을 구현했다.

- 최신순, 가격 낮은 순, 가격 높은 순으로 도시락 리스트 보기 기능을 구현했다.

 

3️⃣ 마이페이지 및 즐겨찾기

- 마이페이지에서 카카오맵 위에 내 주소지와 주변 가게들이 커스텀 마커로 표시되는 기능을 구현했다.

- 즐겨찾기 페이지에서는 즐겨찾기 해제가 가능하도록 구현!

 

+ 404 페이지, 임시 페이지에 로띠 적용하기,, 등도 작업했다!

 

느낀 점

 

1. 개발을 하면서 새로운 내용을 정말 많이 배웠다. 이런 기능을 구현해야하는데 더 효율적인 방법은 없을까, 다른 방법은 없을까 등등을 생각해보면서 구글링도 하고 다른 사람들의 코드도 읽으며 공부가 많이 되었다. 매일 새로운 걸 공부하다보니 뭔가 기록을 해놓아야 프로젝트가 끝이 나도 기억을 할 수 있겠다 싶어 개발 도중 노션에 TIL을 적기 시작했다. 간단하게 무엇을 배웠는지, 그리고 참고한 레퍼런스 자료는 무엇인지 대략 적어놓는 식으로! 이게 이제보니 꽤 도움이 되는 것 같아 다음에는 시작부터 이렇게 정리를 해보자 싶었다. (그리고 한 20개씩 열어놓았던 내 인터넷 탭 들을 정리하는데도 정말.. 큰 도움이 되는듯.. ;-;)

나중에 고쳐야 할 큰 버그들도 써놨었다..:P 애먹었던 토큰에 대해서는 블로그에 정리해볼 예정! 개봉박두👀

 

2. 원래 세오스에 들어온 이유 중에 하나가 내가 개발한 프로젝트를 배포해보고 싶어서였다. 그 전에 참여했던 팀 프로젝트도 로컬 환경에서 동작하는 것까지만 했어서.. 그래서 https://www.baribari.store 이라는 도메인으로 배포를 했을 때 정말 뿌듯했다! 그리고 다른 사람들이 실제로 사이트를 이용하는 게 신기하기도 하고.. 개발자 입장에서 정말 떨렸다. 데모데이 때 라이브로 시현했었는데 혹시라도 튕길까봐 프엔 파트너랑 손을 꼭 잡고 기도하고 있었다..😇 배포 과정에서도 신경쓸 부분이 많았고, 많이 배웠다. 참고로 우리는 vercel로 배포를 했는데, 백엔드 친구가 aws s3에서 구매해놓은 도메인으로 vercel에서도 쉽게 커스텀 주소로 변경할 수 있었다! 신기방기😳

📌vercel에서 커스텀 도메인으로 바꾸기 참고 링크

📌vercel에서 커스텀 도메인으로 바꾸기 참고링크2

 

3. 공통 컴포넌트를 설정하는 기준에 대해서 깨달았다. 원래 나는 디자인 상으로 많이 사용이 되는 컴포넌트들은 따로 공통으로 관리하는 게 맞겠지 싶어 UI/UX 화면 짤 때 그런 식으로 코드를 짰다. 그런데 왠걸, API 연결하고 데이터를 받거나 가공해서 사용할 때 상위 컴포넌트와 하위 컴포넌트가 분리가 되어있어 컴포넌트 간에 데이터를 불필요하게 전달해야 하는 경우들이 많았다. 이 때문에 애를 먹었었다:( 때문에 코드도 지저분해지고 불필요한 부분들이 많이 붙었다. 이를 통해 전체 코드를 짤 때는 추후 API를 연결할 것도 고려를 하면서 컴포넌트 구상해야겠다는 것을 배웠다. 

 

4. 물론 공부를 하면서 코드를 짰다고는 하지만 리팩토링해야 할 부분들이 많이 보였다. 아쉽게도 여러 이유로 초기 배포 과정 후 바리바리 프로젝트는 마무리하게 되었지만, 나는 내 코드를 돌아보면서 고칠 부분은 리팩토링 해보고 싶다. 리팩토링까지는 무리더라도 내가 배웠던 내용들을 블로그에 정리하면서 다시 보고 싶다! 차근차근 정리해봐야지:)

 

5. 기획, 디자인, 백, 프론트가 모여 5개월 간 프로젝트를 끝까지, 그것도 무사히 완성시킨다는 건 정말 쉽지 않은 일이라는 것을 느꼈다. 5개월 간 치열하게 달려온 바리바리의 똑똑이 기획, 천재 디자인, 만능 백, 열정 프엔에게 너무 고맙다. 너무 고생했다~~!🎉