웹 개발자 부트캠프 과정 3차 팀 프로젝트 회고 #1

0. 3차 팀 프로젝트가 끝난 후 쓰는 회고록

기간 : 2024.10.21 ~ 2024.11.08

개발인원 : FE 4명 BE 4명

담당 역할 : 프론트엔드

주제 : 부모와 아이가 함께할 장소와 모임을 찾는 사이트

깃허브 :

- frontend code : https://github.com/SeSAC-3rd-Kinderpia/kinderpia_front

1. 프로젝트 주제

이번 프로젝트는 클라이언트는 React와 TypeScript, 서버는 Spring Boot 를 이용해서 만들었다. 

어떤 주제로 할까 다방면으로 고민하면서 공공 데이터 API를 써보자라는 의견이 나왔고, 

공공 데이터 포털에서 쓸만한 데이터를 찾다가 어린이 관련 데이터들을 찾았다.

 

그것들을 어떻게 사용할 수 있을까 고민하다가

초등학교 자녀들을 가진 부모들에게 아이들과 갈만한 장소를 제공해주고, 같이 갈 사람들을 모으는 모임 기능을 제공해주자는 의견으로 됐다, 물론 그 의견이 나오기까지 정말 많은 의견들이 오갔다. 아무래도 인원들이 많다보니 각자 포트폴리오에 챙겨야할 기능들도 생각해야하고 기간은 한정되어 있다보니 너무 많은 기능도, 너무 적은 기능도 곤란해지는 상황이 발생했다.

 

그래도 최종적으로 의견들을 잘 모아서 기능들을 정리했고 큰 주제는 앞에서 말했다시피

부모들에게 아이들과 함께할 장소 정보를 제공하고, 같이 갈 사람들을 모을 수 있는 기능 제공 

이것으로 확정했다.

 

2. 주요 기능 및 설계

앞선 프로젝트와 마찬가지로 큰 주제를 앞에서 정하고, 그와 관련된 기능 정의서, 요구사항 정의서, 명세서를 작성했다.

작성된 데이터들을 바탕으로 프론트엔드는 피그마로 화면을 설계하고, 백엔드는 데이터베이스를 설계했다.

이전 프로젝트에서는 발사믹을 사용해서 와이어프레임 정도만 그렸지만, 발사믹의 단점은 같이 사용할 수 없다는 것이었다.

그래서 이번 프로젝트에서는 같이 설계를 할 수 있는 도구인 피그마를 사용해서 같이 설계를 진행했다.

피그마로 설계한 화면

 

3. 사용한 기술 스택

이번 프로젝트는 앞에서도 말했지만 클라이언트는 타입스크립트와 리액트를 사용했고, 서버는 스프링 부트를 사용했다.

또한, 같은 모임에 참가한 참여자들끼리 채팅을 할 수 있는 기능을 제공을 하기 위해 웹소켓을 사용했다.

발표 ppt 에 쓴 것을 참고하면 아래와 같다.

 

4. 내가 맡은 역할

이전 프로젝트와 마찬가지로 프론트는 각 페이지별로 기능을 분담해서 하기로 했다.

화면 별로 기능 나눈 것 중 일부

 

가장 많이 고민한 것이 채팅이었는데, 사실 부트캠프를 진행하면서 웹소켓을 이용한 채팅 기능을 배우긴 했지만

그 때는 node.js 로 서버를 구현하고 주고받는 거만 배웠었고,

리액트와 스프링부트 사이에서 소켓 통신을 구현하는 방법을 몰랐다.

 

그래도 최종적으로 채팅 기능을 도전해보자 해서 채팅 기능을 맡게 되었다. 

프로젝트를 하다보니 페이지 자체는 다른 팀원분들보다는 적었지만 잘 모르는 분야이다보니 공부?검색? 하면서 하다보니

진행도가 조금 더뎠었다.. 그러다보니 자괴감도 들었지만 그래도 성공적으로 프로젝트를 마무리 할 수 있었다.

 

채팅 기능을 어떻게 구현했는지에 대해선 다음 포스팅에 다루도록 하겠고,

최종 프로젝트에서 어떤 피드백을 받았는지에 대해서도 다음 포스팅에서 다루도록 하겠다.