프로젝트 명 : Buyte

1. 프로젝트 개요

• 목표 : 커스텀 케이크, 빵, 쿠키를 제작해주는 제과점 중개 유통 서비스
• 기간 : 2023.06.28 ~ 07.24(평일 오전 9시 ~ 오후 6시)
• 참여자 : FE-김준표(팀장), 민정호, 양효정 / BE-김현우(부팀장), 오숙현, 이준기
• 깃허브 : https://github.com/KimJunpyo/Buyte
• 배포 링크 : https://www.buyte.site

2. 프로젝트 스택

• React, TS, styled-components, Redux Toolkit

3. 프로젝트 성과

• 팀 단위 성취한 목표 : 3단계로 구분한 개발 기획을 모두 구현, 차후 추가 개발 목표의 30% 구현

개인 단위 완료한 작업
1. 유저 인증 기능 개발
2. 헤더 개발
3. 장바구니 및 결제 개발
4. 입점 가게 위치 지도 개발
5. Private Routing 적용
6. 채팅 개발
7. 사이트 배포
8. 프로젝트 팀장 역할 수행

획득한 능력/지식
1. HttpOnly 방식의 쿠키 통신 방법
2. Websocket의 기초 개념과 sockJS, StompJS를 통한 채팅 기능 구현 방법
3. Private Routing을 통한 페이지 접근 제어 방법
4. JWT 토큰 방식의 유저 인증 로직을 커스텀 훅으로 분리하여 사용하는 방법
5. Netlify를 통한 배포 방법
6. 결제, 주소 입력 라이브러리의 사용 방법

4. 향상해야 할 점

1. 초기 기획의 부족함

초기 기획 단계와 최종 완성본의 기획적인 부분에서 차이가 많이 납니다.
어떤 형태의 데이터들이 들어올지, 디자인은 어떤 형태가 될 것인지 등 많은 부분에서 변화가 발생했는데, 이런 상황이 발생할때마다 개발의 속도가 많이 느려졌습니다.
디자이너가 없는 개발 환경의 특성상 디자인을 보다 더 컴팩트하게 완성하고 최대한의 변경점 없이 진행이 되어야했다고 생각합니다.

2. 모바일 환경에 대한 기획

모바일 환경에 대한 기획을 전혀 고려하지 않았습니다.
개발 이후, 모바일로 사이트에 접근 했을 때, 몇몇 페이지를 제외하고는 고정적인 최소 크기를 가지게 구현했다보니 화면에 다 보이지 않는 문제가 있었습니다.
또한, 모바일 디자인을 하나도 기획하지 않았기 때문에 직접 페이지 담당자가 시간을 들여가며 엇비슷한 반응형 디자인을 구현해야했습니다.
때문에 상당한 개발 시간 손실이 있었습니다.

5. 프로젝트를 통해 느낀점

개발 팀원들간의 빠르고 잦은 의사소통

이번 프로젝트에서 가장 핵심적인 개발 성공 요인은 "소통" 입니다.

정식 개발 시간인 오전 9시 ~ 오후 6시의 시간동안 FE, BE 모두가 협업 툴에서 상주하며 문제가 발생했을 때, 곧바로 마이크를 켜고 문제를 공유 및 해결하는 방식으로 개발이 진행되었습니다.

또한, 협업 툴에서 다른 파트 담당자와 결정할 사항이 있거나 테스트를 해야하는 경우에 곧바로 호출하여 두 팀원이 마이크를 켜고 소통하며 매우 효율적이고 빠른 협업을 할 수 있었습니다.

훌륭한 팀원은 프로젝트의 성공과 직결

Buyte팀의 팀원들이 너무나 훌륭한 동료 및 개발자였습니다.

팀 멤버는 PreProject에서 각 팀의 팀장 혹은 부팀장을 담당한 분들로 섭외를하여 구성했는데, 이미 관리의 경험이 있으신 분들이셨기 때문에 의견 소통도 굉장히 원활하고 활발하였으며, 팀장이 담당할 여러 역할들을 분담하여 대신 맡아주시기도 하셨습니다.

회의록 작성, 디자인, 다른 파트와 소통이 발생할 때 팀장을 통한 소통이 아닌 개인이 직접 소통, 문제가 발생했을 때 팀원 모두가 함께 해결 등 이전 PreProject에서 제가 담당했던 부분들을 모든 팀원들이 자발적으로 나눠서 역할 분담을 해주었고, 또한 개발 마감 기한도 굉장히 노력하여 최대한 맞춰주는 등 팀원으로써 가장 함께하고 싶은 개발자 동료들을 만나서 이번 프로젝트가 잘 성공할 수 있었습니다.

6. 마무리

Main 프로젝트를 너무 성황리에 잘 완성시켜서 매우 다행이였습니다.
부트캠프를 진행하는 모든 기간동안 Main 프로젝트에 대한 고민을 굉장히 많이 했습니다.

어떤 사람들과 함께 개발을 해야 할지, 무슨 개발을 하게 될지, 이전 기수들처럼 훌륭한 프로젝트를 완성해낼 수 있을지 등 다양한 고민을 했었고 프로젝트가 시작하기 전에 팀원들을 먼저 섭외하여 구성을 끝내놓길 굉장히 잘한 것 같습니다.

그리고 이번 프로젝트에서는 제가 지금껏 다양한 프로젝트 개발에서 담당하던 핵심 기능 개발을 하지 않았는데, 조금 아쉽습니다.

팀원중 한 분이 핵심 기능 개발을 맡고, 실력적으로 조금 부족한 분이 인피니티 스크롤을 포함한 리스트 페이지 및 마이페이지를 개발하셨습니다.

이런 역할 분담으로 인해 상대적으로 제가 다른 팀원들보다 많은 파트 개발을 하게 되었는데 카카오 맵, 아임포트, 다음 우편번호 라이브러리들을 사용하면서 개발을 하다보니 제가 개발을 잘 하고 있다는 느낌이 들지 않았습니다.

그래서 예정에 없던 404페이지, Private Routing, 채팅 기능을 구현하게 되었는데 아직까지도 핵심 기능을 담당하지 못한게 너무 아쉽습니다.

하지만 이번 프로젝트를 통해 Redux ToolKit, TypeScript 스택의 사용법을 너무 잘 습득할 수 있었고 전역 상태 관리 스택을 Redux 대신 다른 스택을 써봐야겠다는 생각도 가지게 되었고, TypeScript의 any 타입을 코드에서 제거하는 방법이나 제네릭 타입을 이용한 타입 선언 방식을 익힐 수 있었습니다.

코드스테이츠 데모 데이에서도 20순번이 넘어가는 팀 중 유일하게 10위권 내에 있으며, 1위도 해보고 최종 4위까지 한 경험은 잊지 못할 추억이 될 것 같습니다.