스택오버플로우 클론 프로젝트가 끝난 후, 9월 8일부터 본격적으로 프론트엔드 2명, 백엔드 2명으로 이루어진 팀으로 메인 프로젝트를 시작했다. 협업 도구로는 주로 노션과 게더타운을 사용했다.
진행 순서
- 기획 및 역할 분담 → 클라이언트 및 API 설계 → 개발 → 서버 연동 테스트 → 빌드 → 오류 수정 → 배포 순으로 진행했다.
1. 기획
⛳️ 주제선정
팀원들과 함께 모여 프로젝트 주제를 논의한 끝에, 중고 거래 플랫폼 서비스를 구현하기로 결정했다. 중고 거래라는 큰 범위 내에서 키워드를 티켓으로 설정하였다. 주요 서비스는 사용자가 사이트에 상품을 등록하고, 채팅을 통해 개인 간 거래가 이루어지도록 하는 것이다. 추후 택배 시스템과 사이트 내 결제 시스템도 도입할 계획이다.
🧑🏻💻 기능선정
플로우 차트를 통해 도입할 기능과 우선순위를 정리했다. 필수 기능으로는 회원 CRUD, 게시물 CRUD, 채팅 기능, 지역 인증을 포함했다.
역할분담
- 게시물 CRUD와 채팅은 내가 맡았고,
- 회원 CRUD와 지역 인증은 다른 팀원이 맡아서 진행하기로 했다.
2. 구조설계
화면 설계
프론트엔드 팀원과 함께 피그마(Figma)를 이용해 클라이언트 설계를 진행했으며, 필요한 부분은 프로젝트 진행 중에 조금씩 수정해 나갈 예정이다.
테이블 및 API 설계
백엔드 팀원들이 다이어그램과 Swagger를 활용해 API 설계를 구현했다.
☑️ 기술스택
- 프론트엔드:
JavaScript, React, Webpack, Babel, Axios, Redux - 백엔드:
Spring Boot, MySQL, Security, Tomcat - 배포:
AWS - EC2, S3
🏝 회고
이번 프로젝트에서 팀장을 맡았고, 좋은 결과를 만들어 프로젝트 유지보수까지 하고 싶었다. 하지만 시작부터 난관이 많았다. 백엔드 팀원들은 API를 제대로 만들 줄 몰랐고, API 설계도 내가 맡아서 진행해야 했다. 이후 멘토링을 통해 Swagger API를 알게 되어 도입했지만, 초반에 어려움이 많았고 소통에도 문제가 있었다.
진행 사항을 파악하고 버그나 어려움을 해결하기 위해 계속 팀원들에게 찾아가 물어봐야 했던 것이 힘들었고, 이를 해결하기 위해 많은 고민을 했다.
리액트에서 Webpack을 사용한 이유는, 큰 프로젝트를 해본 적이 없기 때문에 React의 동작 방식을 깊이 이해하고 싶었기 때문이다. 또한, 번들링 최적화로 로딩 속도와 성능을 향상시키는 효과를 확인하고 싶었다.
프로젝트의 좋은 결과를 위해, 새로운 기술들을 배우고 도입해야겠다고 다짐했다.
