[한경xToss] Fullstack 개발 - 중간 프로젝트 회고 📚👩‍💻

 

[한국경제신문 with toss bank] Tech 우수인재 양성을 위한 풀스택 과정 2기

 

약 3주 동안 진행한 중간 프로젝트 후기.

지난 주에 발표가 끝났는데, 더 미뤘다가는 기억이 휘발될 것 같아 서둘러 작성해보려 한다

 

⬇️ 플젝 소스 ⬇️

 

https://github.com/inthhh/bufl_fe

GitHub - inthhh/bufl_fe: 버플 - 월급 쪼개기 자동화 서비스

---

 

목차

 

1. 팀 빌딩

2. 주제

3. 기획안 작성

4. 개발

    - 개발 진행

    - 사건사고

5. 발표 준비

 

---

1. 팀 빌딩

팀은 강사님께서 임의로 조합/조정해주셨다.

실력 기준으로 팀장을 우선 정하신 후, 밸런스를 조절하며 팀원을 넣으셨다고 했다

팀빌딩 이전에 강사님과 사전 미팅을 잠깐 했었는데, 팀장을 제안받게 되어서 기분이 좋았다 ㅎ.ㅎ

백엔드는 잘 모르지만, 프론트엔드는 자신이 있었기 때문에 잘 이끌 수 있을 것이라 생각했다.

 

우리 팀에는 개발을 처음 접해보는 팀원이 있었지만

이외의 다른 팀원들은 모두 경험이 있어서 다행이었다

FE/BE 역할 분배도 경험에 따라서 자연스럽게 3명/2명으로 정해졌다.

 

---

2. 주제

각자 아이디어를 서칭 후 공유하며 브레인스토밍 식으로 의논했다.

이번 중간 프로젝트는 '금융 API를 활용하는 서비스'라는 포괄적인 주제였기 때문에, 다양한 의견들을 공유하고 토의했고

최종적으로 투표를 통해서 '월급 쪼개기'라는 주제를 확정하게 되었다.

애초에 프론트엔드 프로젝트였고, 기획의 창의성에 대한 점수 비율은 낮다고 들었기 때문에

개발에 시간을 더 쏟아야겠다고 생각했어서 주제를 빠르게 확정한 것도 있다.

 

이후 아이디어를 발전시켜 기획안을 작성하기 위한 구체화를 진행했다! (chatGPT 활용)

 

---

3. 기획안 작성

 

사용 기술 스택은 의논 후 원활한 협업을 위해 Typescript 및 Node JS로 진행하기로 했다!!

그리고 이전에 협업 시 스웨거의 도움을 많이 받아본 경험이 있어서,

스웨거 활용을 제안했고 API docs로 사용하게 되었다.

 

기획안은 크게 아래와 같은 순서로 작성하였다.

 

📌 프로젝트 개요

📌 주요 기능

    - 기능 설명

    - 대표 사용 기술

📢 기대 효과

 

만장일치로 주제를 빨리 확정해서 그런지, 구체화도 원활하게 진행되었고

우리 팀이 가장 빨리 기획안을 제출했다 😎

 

---

4. 개발

4-1) 개발 진행 💻

 

팀 조직을 생성하고, 프론트와 백엔드 각각의 레포지토리를 만들었다

 

 

개발된 주요 기능들은 크게 3가지이다.

 

 

웹 상에 모바일 화면으로 구현했으며

 

카테고리 비율을 시각화하기 위한 Chart.js,

전역 상태관리와 서버에 전송하기 전 정보를 저장하기 위한 Redux,

AI 추천 시스템 구현을 위한 Anthropic API

 

등의 도구를 사용하였다.

 

 

특히 open AI API는 프롬프트를 전송하고 응답받기까지의 시간이 꽤나 걸렸기 떄문에,

위와 같이 데이터 렌더링 이전에 사용자에게 데이터 로딩 중임을 알리는 Spinner를 삽입하였다. (트러블슈팅!)

 

이런 로딩 중 상태표시를 처음 구현해보았는데 너무 신기했다 ㅋㅋ

데이터가 렌더링되는 즉시 state를 변경하여 스피너 대신 데이터가 띄워지도록 하였다.

여러 서비스에서 사용되는 것을 봤었는데

이런 식으로 만드는거구나~ 싶었음

 

사용자 중심 UI를 위해서 필수적인 요소인 것 같다.

 

4-2) 사건사고 🔥

 

1. 압축 사건

    - 개발 초보 팀원이 다른 노트북에서 개발을 이어 작업하기 위해 폴더를 압축해서 옮긴 사건이다.

 

문제 : 이후 그 노트북에서 작업 내용을 git에 올리려고 할 때 계속 오류가 생김

원인 : 압축 과정에서 .git 폴더가 hidden이어서 같이 압축되지 않았던 게 원인이었다 ㅠㅠ

          신박한 발상이었지만 결국 해당 PC에서 작업한 내용은 다시 복붙을 통해 재작업해야했다.

해결 방법 : 해당 팀원에게 github의 존재 이유를 상기시켜주고, 짧은 교육을 진행해주었다

 

2. 개발 파트 재분배

    - DRI를 기반으로 개발 파트를 균등하게 배분하였는데, 각 팀원의 역량 차이로 스케줄 지연이 생긴 사건이다.

 

문제 : 이대로라면 데드라인 내에 완성을 못할 것 같다!!!

원인 : 개인 역량을 고려하지 않고 파트 분배를 진행한 팀장(나)의 실수,,

해결 방법 : 해당 상황을 어떻게 해결하는게 가장 좋을지에 대한 고민을 토스뱅크 멘토님께 말씀드렸고,

                  멘토님은 가장 우선순위인 "프로젝트 완성"과 팀원들과의 "상황 공유"가 가장 중요하다고 하셨다.

                  따라서 모든 팀원들에게 상황을 공유하고 해당 팀원의 파트를 조금씩 나누어 재분배하였다..!

                  덕분에 기한 내에 계획한 내용을 모두 개발할 수 있었다.

 

---

5. 발표 준비

vercel 배포 및 디버깅 후, 시연영상을 촬영하고 발표 자료를 제작하였다.

사실 영상을 일찍 제작했었는데 마음에 안 들어서...🥹 발표 전날 처음부터 다시 만들었다.

모든 팀원들이 붙어서 영상을 제작했고, 3시간만에 꽤나 퀄리티 좋은 영상을 완성했다. 엄청난 팀워크가 빛난던 순간이었다 ㅋㅋㅋㅋ

 

망고보드 PPT 템플릿과 gif를 활용하여 가시성 좋은 프레젠테이션을 만들었고,

내가 발표를 진행했다

발표 첫 순서였어서 QnA에서 예상치 못했던 질문들을 제대로 답변하지 못한게 조금 아쉬웠다 ㅜㅜ

 

---

 

아직 순위 발표가 나오지는 않았지만,

최선을 다했고 기획한 내용을 모두 구현하는데에 성공했기 때문에 후회는 없다!!

리더십에 대해서도 다시 생각해보는 계기가 되었고, 좋은 팀원들을 만난 덕분에 목표한 바를 이룰 수 있었던 것 같다 🤓

 

부트캠프에서 가장 많이 배우고 성장할 수 있었던 시간이었다

이제 백엔드 배우자....!