A반 1조 1BTI 미니 프로젝트 KPT 회고

스파르타 내일 배움 캠프 A반 1조 미니프로젝트 KTP 회고입니다.

1BTI 미니 프로젝트 기획 💁‍♀️💌

---

• 본 캠프의 준비 기간인 사전 캠프에서 학습한 내용을 바탕으로 미니 프로젝트를 진행했습니다.

• 백엔드 과정을 선택한 저희는 프론트엔트와 협업할 일이 많은데요! 웹 개발의 전반적인 흐름을 이해하고, 프론트와 백엔드의 구성과 상호작용에 대해 이해하기 위해 해당 프로젝트를 진행하였고 이를 토대로 우리의 팀원을 소개하는 “팀 소개 웹페이지“가 주제로 주어졌습니다.

• 4일의 기간이 주어졌기에 원활한 의사소통과 좋은 협업에 중점을 두었습니다.

  • 좋은 협업 : 예쁜 말로 소통, 팀원에게 도움 제공 및 받기

• 저희 팀은 모든 아이디어 회의는 브레인스토밍을 통해 ‘생각나는대로’ 다양한 아이디어를 자유롭게 제시하고 취합·수정·보완을하는 방식으로 진행하였습니다.

• MBTI를 활용한 팀원 소개 및 웹페이지를 제작하기로 했으며 다음과 같은 특징을 가집니다.

  • 웹페이지에 들어오면 MBTI 관련 질문이 주어지고 참여하는 사용자의 선택에 따라 결과가 달라집니다.
  • MBTI와 관련된 질문을 끝내면 자신과 궁합이 잘 맞는 팀원의 카드🃏를 보여줍니다.
  • 팀원 개개인한테 댓글을 작성할 수 있습니다.
  • Home 페이지에서 팀원을 응원하는 댓글🐱‍🏍을 작성할 수 있습니다.
  • 모든 팀원을 스와이프 제스처를 통해 볼 수 있습니다.
  • Q&A 페이지에서 댓글 기능을 통해 MBTI 관련 토론🗣을 할 수 있습니다.
  • 설문조사 페이지에서 피드백📜 및 별점⭐을 남길 수 있습니다.

와이어프레임 🧾

• figma를 사용하였고 구현하고자 하는 Page의 디자인을 그린 다음 역할 분담을 통해 Page를 나눠가졌습니다.

역할 분배 📤

• 일영님 👧🏻 : 질문 페이지 및 질문에 따른 팀원들 답안과 댓글 기능 모달 창 제작
• 해정님 👸🏻 : 팀원 소개하는 스와이프 화면, 버튼 클릭시 해당 팀원소개& 댓글 페이지로 이동
• 현아님 👶🏻 : 질문 화면 및 테스트 결과 화면 제작
• 효진님 🐹: 설문 조사 페이지 제작
• 나영(나) 👩🏻: 카드 클릭시 해당 사용자의 자기소개 페이지 제작, 홈 화면 버튼 클릭시 팀 페이지 제작

API 설계 🔨

• API 설계를 해본 적이 없어 완벽하게 설계하지 못했을 수 있습니다.

	요청방식	엔드포인트	요청	비고
응원 댓글 등록	POST	/support/comments	name: string, messgae:string	응원 댓글을 DB에 추가
응원 댓글 조회	GET	/supprot/comments		저장된 응원 댓글 반환
개인별 페이지 댓글 등록	POST	/comments/팀원이름	name: string, messgae:string	해당 팀원 페이지의 댓글을 개인이름comments DB에 추가
개인별 페이지 댓글 조회	GET	/comments/팀원이름		저장된 댓글을 반환

	method	기능	request	response
팀원 등록 > 나의사진 저장	post	post : storage image 생성 get: teamMembers - photourl 조회	{ “images/” : images.name }	{ “photourl”: “string” }
팀원 조회	get	firebase collection “teamMembers” 조회		{ “name”: “string”, “intro”: “string”, “hobby”: “string”, “mbti”: “string”, “adv”: “string”, “dis”: “string”, “nickname”: “string”, “motto”: “string”, “photourl”: “string” }
팀원 등록	post	firebase collection “teamMembers” 생성	{ “name”: “string”, “intro”: “string”, “hobby”: “string”, “mbti”: “string”, “adv”: “string”, “dis”: “string”, “nickname”: “string”, “motto”: “string” }

협업 🐱‍💻

• Github를 사용했고 팀원들 각자 브랜치에서 개발 후 main 브랜치에서 pull request하는 방식을 사용했습니다.

• 저희 팀원은 5명이기에 5명 + main까지 총 6개의 브랜치를 확인 할 수 있습니다.

수 많은 파일들과 커밋.. 🤣

KTP 회고 📌

---

Keep

💡 현재 프로젝트 진행 과정 중 다음 프로젝트에서도 유지했으면 하는 부분

• git branch 사용해 각 코드를 나누고, pull request를 활용하여 main으로 merge하는 것

• 에러를 해결하려고 포기하지 않고 노력한 점

• 모르는 점은 서로 도와주고 소통하려고 끝없이 노력한 점

• 서로를 존중해준 점

💡 현재 만족하고 있는 부분(Good)

• 역할 분담을 정확히 나누어 진행해서 시간 절약한 점

• 브레인스토밍을 통해 주제 선정, 팀명 등 회의하여 한 명도 빠짐없이 참여한 점

• 각자 맡은 역할을 진행부터 최종까지 계속 공유하고 피드백을 줌으로써 추가해야 할 부분이나 수정해야 할 부분을 서로 소통한 점

💡 계속 이어갔으면 하는 부분(Keep)

• 다른 조의 프로젝트와 차별화를 두려고 하는 점

Problem

💡 문제점 : 이번 프로젝트에서 발생한 문제점을 객관적으로

• Git PR 충돌 오류(Git 사용 미숙)

• script 와 css 파일이 분리되지 않고 html 파일에 다 들어가있음

• github issue를 활용해보는 것

• 주제와 컨셉은 확실했으나 color 등 페이지 내 세부적인 부분에 대한 와이어프레임이 좀 더 구체적이지 못 했던 점

Try

💡 잘하고 있는 것을 더 잘하기 위해, 그리고 문제가 있는 점을 해결하기 위해 우리가 시도해 볼 것들

• Git 공부의 필요성 -> Git 특강 정리, Git 강의 듣기(유튜브 활용 등) , branch & merge 등에 대한 정확한 학습 필요

• 각자의 코드에 대한 이해를 위해 코드 리뷰시간 갖기

• 최종 프로젝트 발표 전 본인이 맡은 파트를 팀원들에게 발표하기 -> 마감기한을 정하고 별도의 발표 회의 시간을 가지기 + 피드백

  • ex) 기능 구현을 위해 어떻게 공부했는지, 어떤 오류가 발생하여 힘들었는지 등

느낀점 🛫

• 나영 👩🏻 :
  • 개발자로서 Github와 같은 협업 툴을 배운 게 좋았습니다. 이전에는 Github Desktop을 써서 한 branch에서 작업했는데, 이번 프로젝트에서는 팀원마다 branch를 따로 만들어서 pull request로 합치는 방식을 사용했습니다. 이로 인해 충돌이나 다른 오류들을 마주치기도 했지만, 코드 변경 사항에 대해 이해하고 병합하는 과정에서 투명하게 협업할 수 있었습니다. Git 공부에 대한 필요성을 더욱 느끼게 되었고, 혼자 공부할 때와 달리 팀 프로젝트에서 여러 의견을 공유하고 피드백을 받으며 개개인의 부족한 부분을 보완할 수 있어서 성장할 수 있는 기회였던 거 같습니다.
• 일영 👧🏻 :
  • 일단 모르면 물어봐야 한다는 걸 가장 크게 느꼈다. 모두 바쁠 것을 걱정하여 혼자 고민하고 찾는 시간이 예상 외로 더 길어져서 내가 맡은 부분을 구현하는데 있어 생각보다 더 오래 걸렸던 것 같다. 그래서 팀원끼리의 협업이 가장 중요한 것 같다.
• 해정 👸🏻:
  • 팀원들과의 소통이 중요하고, 혼자서 고민하기 보다는 서로서로 모르는 것을 채워주는 것이 팀이라는 걸 알게 되었고 또, 질문하기 전 어떻게 질문을 전달할 건지에 대해서 명확하게 생각한 후 전달해야 명확한 답을 얻을 수 있다는 것을 느꼈다.
• 효진🐹 :
  • 각자의 생각을 끊임없이 말하고, 서로 도움을 주고받는 활동을 통해 더 성장할 수 있었다.
• 현아 👶🏻 :
  • 소통이 무엇보다 중요하다는 것을 체감했다. 한 명이 머리를 싸매고 고민하는 것보다 같이 고민해보는 게 더 빠르고 서로 배울 수도 있어서 앞으로도 협업을 할 때는 대화와 소통을 중점으로 해야겠다.

추가 ⏳

---

• github 💟 : https://github.com/LeeNaYoung240/1BTI_mini-project

• 프로젝트💥 : https://leenayoung240.github.io/1BTI_mini-project/