팀 프로젝트 Hey Toss Me 최종 회고

 

🔎 Overview

💡 Notion

💡 GitHub

✔ 저기요! 안 쓰는 티켓 있어요? 👀 그럼 넘겨요! = Hey! Toss Me! 🙋‍♀️

 

❓ 전국구의 못 쓰게 된 서비스 거래만 모아둔 곳 없을까?

🙏 취소 수수료 물지 말고 간단하게 거래해요!

💪 미용실도! 뮤지컬도! 어떤 예약 서비스라도 좋아요!

 

📅 작업 기간

2023년 02월 24일 ~ 2023년 04월 06일

 

🤹 팀원 구성

BackEnd 3명 : 이보미, 최웅준, 허진혁

FrontEnd 2명 : 박주경, 김규리

 

📜 프로젝트 아키텍처

 

🔨 기술 스택

FrontEnd	BackEnd	CI / CD
React Typescript Redux-toolkit Redux-persist React-router-dom Axios StompJS React-datepicker React Icons browser-image-compression Styles SCSS Tailwind CSS DaisyUI Interface Kakao Maps API Daum-postcode API	Language : Java 17 Framework : Springboot Build Tool : Gradle DB : MySQL Test : Junit, Postman JPA + JPA Sepcification Auth : Jwt Docker, Docker compose Cloud Storage Service : S3 Firebase Cloud Message STOMP RabbitMQ	Communication Figma Postman Gitbook Deploy Netlify Github action Cloud Service : Azure

 

📹 서비스 시연

 

📸 페이지 구성

 

📡 랜딩 페이지

• 이미지 슬라이드 (Infinite Loop) 구현
• 다크 모드 기능

 

📡 회원가입, 로그인 페이지

• 기재한 이메일로 인증 코드 전송 후 인증 코드가 일치해야 회원 가입 가능
  • 버튼 활성화 기준 : 인증 코드 확인, 이메일 양식, 비밀번호 양식(영문, 숫자 조합 최소 8글자 이상), 이름 기재
• 카카오 소셜 로그인 구현

 

📡 비밀번호 찾기

• 비밀번호를 분실한 경우 비밀번호 찾기 기능
  • 인증 로직은 회원가입과 동일하게 구현

 

📡 카테고리 페이지

• 유저가 등록한 상품 노출, 페이지네이션 구현
• 카테고리에 맞는 상품 검색을 비롯해 마감 임박 카테고리를 둬서 3일 이내 예약도 확인할 수 있음
• 지역, 예약일자, 키워드 검색
  • 중첩 검색도 가능

 

📡 알림 페이지

• 관심 키워드 포함 게시글 등록, 거래 완료, 내가 등록한 상품 북마크 시 실시간 알림 전송
• 읽지 않은 알림이 있는 경우 상단 알림 아이콘 영역에 뱃지 노출

 

📡 상품 등록 페이지

• 유저 업로드 이미지 미리보기 제공
• 이미지 업로드 시 이미지 최적화 (최대 2MB, 최대 길이 900px) 적용
• DAUM Post-Code, Date Picker 구현

 

📡 채팅 컴포넌트

• STOMP 구독, 연결, 발행 로직 구현
• state에 실시간 메시지를 저장해 별도의 API 요청 없이 채팅 가능

 

📡 마이 페이지

• 프로필 이미지 변경, 회원 계좌 정보 변경 가능
  • 프로필 이미지 업로드 시 이미지 최적화 (최대 2MB, 최대 길이 300px) 적용
• 내 예약, 업로드한 상품, 북마크 상품, 관심 키워드 확인 가능
• 페이지네이션, 탭 기능 구현

 

🌼 내가 맡은 역할

• 랜딩 페이지 UI 구현
• 회원가입, 로그인, 비밀번호 찾기 UI 구현 및 연동
  • JWT 토큰 저장 및 관리, 카카오 소셜 로그인 구현
• 우측 하단 Fixed Button 및 채팅 리스트, 채팅방 컴포넌트 UI 구현 및 연동
  • STOMP JS를 통한 채팅 로직 구현
• 마이페이지 UI 구현 및 연동
• 페이지네이션 처리 및 이미지 최적화, PWA 적용

 

💚 프로젝트 회고

 

🍏 잘한 점

• 멘토님 피드백을 적극적으로 수용한 점 (Modal Portal 적용, PWA, 스크린리더 태그 적용 등)
  
  • 개발자 커리어를 시작하기 전까지는 어쩌면 개발자가 되고서도 시니어 개발자가 내 코드를 뜯어서 보고 피드백을 줄 기회가 잘 없을 거라는 생각이 들어서 멘토링 시간에 질문할 것들도 미리 정리해 가고, 멘토링 때 들었던 피드백은 날밤을 까서라도 당일에 바로 수정했다. 디테일이 모여서 완성도를 가른다고 생각하는데, 멘토님이 디테일을 너무 잘 잡아주셔서 완성도에 한몫하지 않았나 싶다.

너무 감동 받아서 캡처함 난 상여자라 눈물이 뭔지 모르는데 5년 뒤에 다시 보면 눈물이라는 거... 흘릴 거 같다 진심

• 일정 관리를 늘 언제나 잘하는 점
  • 내 최대 강점이라고 생각하는데, 일정이 늦어질 것 같으면 미리 공유하고 어지간한 일은 계획한 일정 안에 끝낸다. 이번 프로젝트에서 내가 맡은 일이 적지 않았고 일정이 타이트했는데, 예상 일정보다 늦어진 일은 한 번도 없었다.
• 프론트 측면에서의 JWT Authentication 이해도 제고
  • HeyTossMe가 백엔드와의 두 번째 협업인데, 지난 협업 프로젝트에서는 해내지 못했던 부분이다. 유저가 사이트를 사용함에 있어 주춧돌 같은 영역이라고 생각하기 때문에 아쉬움이 컸었다.
  • 보안을 위해 store에 토큰을 저장한다. UX를 위해 redux-persist를 사용해 새로고침 시에도 유저 정보가 휘발되지 않도록 한다. 토큰 만료인 401 error가 떨어지면 자동으로 토큰 재발급 및 API 재요청하는 로직을 짠다. 이 세 문장을 구현하려고 쏟은 시간 동안 Redux랑 Axios 공부가 자연스럽게 됐다는 점이 좋았다. Custom Axios도 이번에 처음 써 봤는데 Axios랑 한결 더 친해진 기분이 든다.
• 부족한 부분에 대해 계속 체크하고 개선한 점
  • 연동 일정이 혼자 일찍 끝난 이후에도 Light House 최적화, 첨부 이미지 압축 (서버 비용은 소중하니깐...) 등의 작업을 진행했다.

 

🍏 못한 점

•  프론트 배포를 진행한 Netlify는 https고 서버는 SSL 인증을 받지 않은 http다. http와 https의 통신을 금지하는 네트워크 정책 때문에 배포 환경에서는 통신이 불가하다. 여기까지만 알고 있어서 더 시도하지 않았다는 점이 제일 아쉽다. 
  
  • Proxy 설정을 추가하거나 보안 관련 메타 태그를 추가하는 정도는 시도해 봤어도 좋았을 거 같다.
  • 2023년 04월 11일 내가 해냄!!! https://heytossme.netlify.app/
• 일정 관리를 늘 언제나 잘하다 못해 일정이 틀어지면 스트레스 받는 점
  • 사실 제일 답답한 건 당사자일 텐데 일정이 미뤄지면 팀원들을 박박 긁기도 하고 좀 예민해졌다. 평생 고쳐나가야 할 숙제라고 생각한다.
• 어떤 팀원은 커뮤니케이션이 잘 돼서 만족했다는 얘기를 했었는데, 나는 완전히 반대 입장이다.
  • 특히나 안 되는 거 공유가 많이 더뎠다. 되는 거 공유보다 안 되는 거 공유가 중요하다. 오늘 무조건 해결할 수 있는 오류는 절대 없는데, 자꾸 오늘 안에 무조건 해결하겠다는 피드백만 돌아오는 점이 답답했었다. 우리 팀원 모두 다 책임감이 강해서 자기 담당 일을 남에게 떠넘기면 안 된다는 생각을 했었던 거 같은데, 나에게 문제가 있다면 팀원들에게 빨리 공유를 하고, 같이 해결책을 찾아나가는 일이 가장 관건인 것 같다. 해결을 할 수 없다면 빨리 머리 맞대고 플랜 비라도 세워야 한다. 이번에 진짜 많이 느꼈다.

 

🍏 느낀 점

• 협업 지이이이이이이이인짜 힘들고 가끔 욱하기도 하는데 끝나면 힘들었던 거 다 까먹고 마냥 좋고 팀원들 걍 다 기특해 보인다는(저보다 언니 오빠도 계신데 죄송하게 생각합니다) 점이 진짜 매력 있고 중독성 있다. 과정이 마냥 신나고 재밌지만은 않는데 다 끝나고 생각해 보니까 되게 재밌고 신났던 거 같네... 
• 나이가 많은 건 아니지만 대학 졸업하고부터는 열정 넘치게 어떤 일에 임할 기회가 없었던 게 사실이고 앞으로는 진짜 없을 거 같아서 좀 치열하게 했다. 어지간하면 부끄러워서 저 열심히 했어요 이런 말 잘 못하는데 이번에 진짜 열심히 했다. 나 잘했다.
• 내일부터는 미뤄왔던 개인 프로젝트와 코딩 테스트 연습을 해야겠다고 생각한다. 두 달 동안 잠 못 자고 두 번의 거친 협업을 끝냈으니까... 이제 잠도 자고 운동도 하고 코딩도 하고 갓생 살 거야!!!