0. Project Intro

누군가의 도움이나 조언을 필요로 하는 멘티와 누군가에게 도움의 손길을 내밀어 줄 멘토를 이어주는 서비스MENTOR TO MENTEE, 2주동안 진행한 팀 프로젝트를 회고해보자. 프로젝트 소개부터 개발 내용, 프로젝트를 통해 느낀점까지 작성해보려 한다. 🌻

먼저, 팀원 분들 정말 고생 많으셨습니다 👍

MENTOR TO MENTEE 서비스 링크 !

프로젝트 소개

---

취업을 준비하거나 진로를 고민하는 사람들이 현직자 멘토에게 다양한 질문을 하고 답변을 받는 서비스이다. 취업을 준비하는 사람들이 현 상황을 비롯해서, 여러가지로 취업이 어렵다고 생각했기 때문에 이런 분들의 걱정과 고민을 조금이나마 덜어주는 서비스를 만들어보고자 했다.

프로젝트 기간

• 2020년 12월 21일 - 2021년 01월 05일

팀 소개

• 팀 명 : VVS(Very Very Sexy brain guys)
• Front-End : 강희석, 조영권(Team Leader)
• Back-End : 박정환, 이재원

기술 스택

• Front-End : React, React Hooks, Redux, Styled-components
• Back-End : Node.js, Express, MySQL, Sequelize
• Deploy : AWS(EC2, ELB, S3, Route53, ACM)

1. 프로젝트 기획(SR)

주제 선정

---

주제 선정 과정에서 굉장히 다양한 아이디어가 나왔다. 그 중에서도 취업 관련 문제에 포커스를 두고 주제를 선정했다. 멘토와 멘티를 이어주는 서비스(나의 아이디어 😎)로 선택을 하고 서비스 이름을 정하는 과정에서 정말 많은 후보가 있었다. 예를 들면...

• 멘토투멘티(MENTORTOMENTI), 멘토플러스(MENTORPLUS), 멘토포유(MENTORFORYOU), 멘토모아(MENTORMORE), 겟멘토(GETMENTOR), 멘토딜리버(MENTORDELIEVER), 멘토팩토리(MENTORFACTORY), 멘토맨(MENTORMAN), 멘토스토어(MENTORSTORE), 멘토농장(MENTORFARM), 테이크멘토(TAKEMENTOR), 멘토파크(MENTORPARK), 멘토컴퍼니(MENTORCOMPANY), 뉴멘토(NEWMENTOR), 멘토의민족...

이게 모두 당시에 전두엽이 갑자기 활성화된 내가 제시했던 이름들인데 다행히도(!) 그 중 하나로 선정을 하게 됐다. 참 많았다.

시스템 아케텍처 설계

---

와이어 프레임

기능 플로우(client, server)

스키마 작성

---

API 문서 작성

---

API 문서는 노션을 통해 작성하였다.

2. Front-End 개발

구현 사항 및 결과 화면

---

SignUp & Login

로그인과 회원 가입 기능 자체는 프론트 개발을 맡은 팀원 분이 하셨지만, 모달(Modal) 창 컴포넌트를 재사용이 가능하도록 구현했고, 아이콘 적용 등 UI도 조금 더 깔끔하게 수정했다.

Naver Login

소셜 로그인을 구현했던 백엔드 팀원 분의 고뇌와 노력이 고스란히 묻어나는 화면이다.

MyPage

마이페이지에 계정 설정, 멘티/멘토 정보, 비밀번호 설정, 회원탈퇴를 각각 구현했고, 계정 설정에서는 이미지 업로드까지 구현했다.

Apply Mentor

멘토 지원하기 기능이다. 멘토에 지원하면 메인 화면에 멘토 카드가 렌더되는 모습이다.

MentorInfo

멘토에 지원하게 되면 마이페이지에 '멘티 정보'가 '멘티•멘토 정보'로 바뀌고 멘토 정보를 수정할 수 있게 구현했다. 수정 정보는 멘토 프로필에 반영된다.

Ask Question

멘토에게 질문을 보내는 기능이다. 질문을 보내면 멘토는 '나의 질문' 페이지에 받은 질문에서 확인할 수 있다.

Send Answer

받은 질문에 대해 답변하는 기능이다. 답변을 작성하여 보내게 되면 질문을 보낸 사람은 '답변 대기중' 버튼이 '답변이 도착했습니다!' 버튼으로 바뀌게 구현했다.

3. Project Review

좋았던 점

---

Git Work Flow !

git을 통한 협업에 대해 이야기 하지 아니하지 않을 수 없다. 함께 프론트 엔드 개발을 맡은 팀원분과 git에 완전히 익숙해지는 시간이었다. 네트워크 탭의 그래프가 너무 예쁘다. 코드스테이츠에서도 프로젝트가 끝나고 수많은 팀 중에서 우리 팀의 네트워크 탭을 좋은 예시로써 소개하는 영광을 경험했다 😁

팀원 분과 정말 매일매일 반복하니 어떻게 서로의 코드를 merge 하고, 어떻게 협업하는 것이 효율적인지 이해할 수 있었던 정말 좋은 공부였다.

프론트 엔드 개발의 매력

무엇보다도 이번 프로젝트를 통해 프론트 엔드 개발이 어렵지만 동시에 정말 재밌다는 것을 느꼈다. 내가 생각한 아이디어를 바로 눈에 보이는 웹 사이트로 구현해가는 과정이 정말 매력적이고, 해냈을 때 성취감은 이루 말할 수 없이 큰 것 같다. 앞으로 더 많은 공부와 배움이 필요하겠지만 전혀 두렵지 않고 오히려 많이 설렌다.

좋은 팀원들을 만나 좋은 프로젝트에 참여하게 되어 많이 배운 것 같다.

아쉬웠던 점

---

사용자의 관점에서 생각하기

로그인을 하지 못하면 서비스 내의 많은 부분을 이용하지 못하는 것이 아쉽다. 사용자의 관점에서 생각하지 못했던 것 같다. 나조차도 로그인을 해야하면 거부감이 드는데 기획 단계에서 짚고 넘어가지 못했던 부분이다. 사용자에게 더 좋은 경험을 제공하려면 어떻게 해야하는지 느꼈고, 그것이 정말 중요하다는 것을 깨달았다.

반응형 웹

기능 구현에 급급한 나머지 모바일 화면에서 보여지는 것을 생각하지 못했다. 다음부터는 모바일 화면에서 사용자들이 어떻게 보여질지를 먼저 생각하고 개발해야겠다고 팀원 분과도 함께 공감했다.

마치며

앞서 말했지만 정말 좋은 팀원들을 만나서 즐겁게 프로젝트를 마무리 한 것 같아서 뿌듯하다. 결과물도 막판에 UI를 많이 수정해서 그런지 나름 만족한다. 하지만 역시 프론트엔드 개발자의 욕심은 끝이 없다. 더 예쁘게 만들고 싶다. 추가하고 싶은 것이 산더미이지만 짧은 시간동안 정말 몰입했고, 꽤 많은 것을 배웠고 꽤 많이 성장했다고 생각한다.

이 프로젝트 덕분에 앞으로 공부하고 싶은 것들이 정말 많아졌다. 또한, 개인의 역량 뿐 아니라 팀의 화합이 얼마나 중요한지 깨달았다. 역시 팀으로 만드는 일에 있어서 서로 협동하고 소통하는 것보다 중요한 것은 없는 것 같다. 2주 동안 정말 즐거웠고, 이젠 다음 프로젝트를 위해 힘을 내야겠다.