SSAFY 10기 자율 프로젝트 서울 1반 Edge Scheduler (2024.04.08 ~ 2024.05.20)
1️⃣ 서비스 소개
2️⃣ 서비스 화면
3️⃣ 개발 환경
4️⃣ 기술 특이점
5️⃣ 기획 및 설계 산출물
6️⃣ Conventions
7️⃣ 팀원 소개 및 개발 회고
- 글로벌 기업을 위한 글로벌 회의 일정 추천 서비스
세계 각지에 흩어져 있는 팀원들과 함께 일할 때 시차로 인한 불편사항 발생
회의 일정 고려 시, 각 팀원들의 시차를 고려한 시간대를 파악해야 하는 번거로움존재
일부 팀원들은 이른 시간에 일어나거나, 늦은 시간까지 일을 해야하는 불편함 존재
팀원들의 피로도 상승, 생산성과 업무 만족도 하락
-
각 사용자는 개인 일정을 등록하여 관리할 수 있습니다.
-
month, week, day별 일정을 조회할 수 있습니다.
-
반복 일정 및 비공개 일정을 관리할 수 있습니다.
-
회의 생성 시, 참여자들의 필참 여부를 선택하여 최적의 회의시간을 추천받을 수 있습니다.
-
설정한 기간 내에서 **3가지 기준(가장 빠른 시간, 불참자가 가장 적은 시간, 근무시간 내 참여자가 가증 많은 시간)**으로 최적의 회의시간을 추천받을 수 있습니다.
-
회의 참여를 요청받은 참여자들은 수락, 거절, 새로운 시간 제안을 통해 자신의 참석여부를 결정할 수 있습니다.
-
새로운 시간을 제안하기 전에, 해당 시간 내에 가능한 인원 조회기능을 이용할 수 있습니다.
-
드래그 기능으로 쉽고 간편하게 회의 시간을 설정할 수 있습니다.
-
타임존 설정을 통해 세계 어디에서나 편하게 시간 변환을 통해 서비스를 이용할 수 있습니다.
-
실시간 브라우저 알림을 통해서 회의 생성, 수정 및 새로운 시간 제안에 대한 알림을 받아볼 수 있습니다.
-
이메일 알림을 통해 사이트에 접속해 있지 않더라도 회의와 관련한 알림을 받아볼 수 있습니다.
-
로그인 | 개인 일정 등록 |
근무 시간 설정 | 회의 생성 |
회의 수락 | 회의 수정 |
회의 거절(새로운 시간 제안) | 회의 삭제 |
-
- 외부 라이브러리 사용 없이 드래그 기능 및 캘린더 기능 구현
-
- NextJS 활용 SEO를 고려한 SSR방식 웹사이트 제작
-
- NextJS 활용 데이터 캐싱으로 UX 향상
-
- Zustand를 활용해 전역 상태 관리
-
- refreshToken과 accessToken으로 로그인 로직 구현
✨Feat : 새로운 기능 추가
🐛Fix : 버그 수정
📝Docs : 문서 수정
🗃️Style : 코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
♻️Refactor : 코드 리펙토링
✅Test : 테스트 코드, 리펙토링 테스트 코드 추가
💡Comment : 필요한 주석 추가 했을 경우
🎨Design : css나 디자인 변경, 이미지 추가 등
🚑Hotfix : 치명적인 버그 수정
👷Build : 배포 관련
🤝🏻Merge : f-기능명 into dev-frontend
- 기획 및 설계(학습) : 24.04.08 ~ 24.04.18
- 프로젝트 구현 : 24.04.19 ~ 24.05.16
- 버그 수정 및 산출물 정리 : 24.05.17 ~ 24.05.19
- 코드 리팩토링 : 24.05.20 ~
👑 조현수 (Back-End) |
👶🏻 전은평 (Back-End) |
👶🏻 오형택 (Back-End) |
👶🏻 조용환 (Front-End) |
👶🏻 김중광 (Front-End) |
👶🏻 노세희 (Front-End) |
- 이번 프로젝트에서 처음으로 MSA 설계와 스프링 클라우드 기술을 활용해보았습니다. 또한 물리서버 EC2를 여러 대 사용해서 gateway 서비스, discovery 서비스, micro 서비스들끼리 서로 통신하도록 했습니다. 해당 작업이 쉽지 않았지만 네트워크에 대한 인사이트를 얻을 수 있었습니다. 그리고 Gerrit을 활용해서 코드리뷰를 체계적으로 진행함으로써 클린코드에 대한 고민과 다른 사람의 코드를 이해하기 위해 꼼꼼하게 읽고 피드백을 주기 위해 노력했었습니다. 기업 요구사항 명세서 분석, MSA, 코드 리뷰 등 새로운 경험과 개발을 해볼 수 있었던 프로젝트였다고 생각합니다.
- 프로젝트 초기 설계 단계에서 팀원들과의 적극적인 소통을 통해 잠재적으로 문제가 될 수 있는 요소를 사전에 파악하려고 노력했습니다. 이 과정에서 탄탄한 설계를 구축할 수 있었으며, 차후 발생할 수 있는 많은 문제를 예방할 수 있었습니다. 코드를 작성할 때에도 중복을 최소화하고 코드의 재활용성을 높이기 위해 여러 곳에서 사용할 수 있는 메서드를 한 곳에 모아 관리했습니다. 이를 통해 코드의 일관성과 유지보수성을 높일 수 있었습니다. 비록 테스트 코드를 작성했지만, 예상치 못한 사항들이 발생하여 추가 작업이 필요했던 경우가 있었습니다. 이는 기초 설계의 중요성을 다시 한 번 실감하게 하는 계기가 되었습니다. 앞으로 새로운 프로젝트를 진행할 때는 설계 단계에서 더 다양한 경우를 고려하고 이를 꼼꼼하게 기록하겠습니다. 이를 통해 추가 작업을 최소화하고 프로젝트의 완성도를 높이겠습니다. 이번 회고를 통해 얻은 교훈을 바탕으로 다음 프로젝트에서는 더욱 철저한 계획과 준비로 성공적인 결과를 도출할 수 있도록 하겠습니다.
- 백엔드 리드로서 아키텍처 설계와 회의일정 조율 메인로직 / 알림 서비스의 구현을 담당했습니다. MSA와 Reactive Programming이라는 새로운 기술적 도전에 한껏 몰입할 수 있었던 프로젝트였습니다. 일정이 넉넉지 않아 프로덕션 레벨에서 고민해볼만한 문제들을 마주하지 못한 것이 아쉬움으로 남습니다. SSAFY에서의 마지막 프로젝트인만큼 모두가 열정적으로 참여했고 다들 고생했어요!
- 각자 로컬 시간에 맞춰 시간을 표시하고, 가지고 있는 일정을 hover를 통해 동적으로 설정하는 것이 어려웠습니다. 또한 drag & drop 기능 및 dropdown 등을 시간 설정에 사용할 수 있도록 연동시키는 것이 힘들었습니다. 다행히 만족스럽게 마무리 할 수 있어 좋았습니다.
- 이번 프로젝트에서 저는 프론트엔드 개발자로 스케줄 페이지의 구현과 일정 조회, 등록, 수정, 삭제, 로그인 처리를 담당하였습니다. 프로젝트에서 React, Next.js, TypeScript를 사용하였으며 특히 Next.js를 처음 사용해봐 좋은 경험이었습니다. 또한 코드리뷰 도구로 Gerrit을 사용하여 처음으로 코드리뷰를 경험 해봤습니다. 코드리뷰를 통해 다른 사람의 코드를 더 살펴보고 내코드에 대한 리뷰를 받는 과정에서 한걸음 더 성장 한것 같습니다.
- 프로젝트 진행 과정에서 회의 생성 페이지, SSE 알림 연결을 담당하였습니다. 글로벌 회의 일정 잡기라는 주제처럼 각 사용자들의 시간 설정이 다르기 때문에 백엔드와 연결하는 부분에서 발생하는 오류를 찾고 해결하는 과정에서 초기 설계 단계에서 문서 작업의 중요성을 배울 수 있었습니다. 회의 생성 페이지에서 이름을 검색할 때, 자바스크립트의 정규표현식과 유니코드를 사용하여 초성 검색이 가능하도록 구현하는 과정이 어려웠지만 많이 성장할 수 있었습니다. 코드 리뷰를 과정을 통해 코드 작성 시 중복을 최소화하고, 컴포넌트 단위로 나눠 가독성을 높이는 것에 대한 중요성에 대해 배울 수 있었습니다.