프로젝트 개요 - 3분 이내
1. 인사 및 팀 소개
안녕하세요 2조 카북 팀의 발표를 시작하겠습니다.
저희 프로젝트의 프론트엔드는 김은아, 정동환 님이, 백엔드는 임수민, 이재훈, 최주형 님이 담당했습니다.
2. 프로젝트 소개
- 개발 동기
- 저희는 피그잼을 통해 브레인스토밍을 진행했고, 여러 가지 주제 중 프로젝트 기간과 구현 사항, 도전 가능한 목표들, 팀워크를 위한 역할 분배를 고려해 최종적으로 차량 공유 SNS 주제를 선택하게 되었습니다.
- 프로젝트 간단 소개
- 서비스 이름은 “카북”으로, 차를 사랑하는 사람들이 친구들과 자신의 멋진 차량 사진을 공유할 수 있는 SNS 입니다.
- 사용자는 차 모델과 종류를 입력하고 자신이 원하는 해시태그를 차량 사진과 함께 게시물을 올릴 수 있으며, 다른 사용자는 자신이 원하는 해시태그를 검색하여 필터링 되어진 차 사진을 볼 수 있습니다.
- 시스템 구성도
- 기술 스택
- FE : Ts(언어), vite(번들러), sass(BEM), axios, eslint, prettier(코드 포맷터)
- BE: Spring, MySQL(DB), jdbctemplate(DB 매핑 기술)
- ci/cd: AWS (EC2, S3), Github Actions 자동화 (쉘)
- 시스템 아키텍처
- 배포 아키텍처
문제 해결 - 7분 이내
3. 기능 구현 - 2분 이내
저희 팀은 기능을 구현하기 전 팀 컨벤션을 정하여 브랜치 네이밍, 이슈 및 pr 머지 방식, 코드 리뷰 등에 대해 협의 하였습니다.
또한 백엔드와 프론트엔드 개발 간의 원활한 커뮤니케이션을 위해 포스트맨을 사용하여 api 요청 및 응답에 대한 명세서를 함께 작성하였습니다.
- 프론트엔드
프론트엔드는 타입스크립트을 활용하여 타입스크립트의 장점을 최대한 활용하기 위해 OOP 방식으로 기능을 개발하였습니다. 또한 컴포넌트 구조를 기반으로 프로젝트를 설계하여 코드의 재사용성과 응집도를 높였습니다.
부모 클래스인 컴포넌트는 state를 가지며 state가 변경시 해당 컴포넌트가 렌더링 되도록 설계하였고 모든 요소들은 해당 클래스를 상속받아 같은 구조를 가지게 되어 코드의 일관성을 유지하였습니다.