Calenkit

Project Summary

일정을 등록하고 다른 사람들과 공유할 수 있는 실시간 일정 공유 웹 애플리케이션입니다.
로그인 프로세스 구현과 메일 전송 기능, 이미지 업로드 기능을 구현하였으며, 실시간 일정 공유 기능 구현에 일부 기여하였습니다.
Spring Boot를 사용해 본 첫 프로젝트이며, OAuth2.0이라는 생소한 기술을 사용해볼 수 있었습니다.
Google Slides, Notion 등을 이용하여 팀원들과 함께 구체적인 설계를 진행해볼 수 있었으며 브랜치 전략을 수립하고 커밋 규칙을 정하는 등의 팀 프로젝트 경험을 해볼 수 있었습니다.

👨‍👨‍👧‍👦Team Member

김민재 : 일정 캘린더 출력, 일정 추가 삭제 및 수정, 휴지통, 즐겨찾기, 검색, 무한 스크롤 기능
라재희 : 일정 메인 및 상세 레이아웃, 일정 초대 및 공유, 일정 내용 변경 실시간 반영, 푸시 알림
이진규 : 회원 개인정보 관리(마이페이지), 회원 관리(관리자페이지)
오세욱 : 카카오 소셜로그인, 회원가입, 이메일 전송 기능, 이미지 저장 기능

📙WIKI

calenkit의 부가적 설명은 WIKI를 이용했습니다.
calenkit WIKI 내용을 참고해주세요.

🛠️Skill

🛠️Team Collaboration Tool

Github
Notion
Google Slide
diagrams.net
ERD Cloud
Discord
Code with Me (IntelliJ)

✔Git Branch Policy

Github-Flow 전략과 유사함
작업은 user-branch에서만 이루어지며 develop, main 브랜치로 직접 접근 불가능
새로운 브랜치는 develop을 기준으로 생성하여 작업 진행
브랜치는 로컬에 commit하고 정기적으로 user-branch로 push
정해진 회의시간에 코드리뷰를 진행하고 pull-request를 생성해 develop 브랜치로 병합
병합은 rebase-merge로, 충돌이 있을 경우 merge로 진행
develop 브랜치에 병합 후 user-branch로 pull 받아 기능 테스트

✔Git Commit Message Rule

[FEAT] 문서 내 기능 추가, 변경, 수정이 발생한 경우
[DESIGN] 문서 내 코드 수정(CSS) 발생한 경우 (기능 영향 있음)
[FIX] 문서 내 코드 버그 수정 발생한 경우
[DOCS] 문서의 추가, 삭제, 변경
[STYLE] 코드 가독성을 위한 수정(주석, 들여쓰기 등) 발생한 경우 (기능 영향 없음)
[REFACTOR] 효율 증가를 위한 수정 (기능 영향 없음)
[TEST] 테스트 코드 추가 삭제 변경 - 테스트 코드 관련 모든 변경사항들
[ETC] 기타 애매한 경우

✔ERD Diagram

담당 파트

Interceptor를 이용한 인증 프로세스 구현

특정 요청을 제외한 대부분의 요청들은 로그인을 한 뒤에 이용할 수 있고, 관리자 계정과 일반 회원 계정은 서로 다른 페이지에만 접근 가능하도록 설계하였습니다. 그래서 매 요청마다 로그인이 되어있는지, 권한이 있는지를 체크할 필요가 있었습니다.
요청마다 로그인 상태 및 권한을 자동으로 검사하기 위해서 Spring Interceptor를 활용하여 인증이 필요한 요청이 들어왔을 때, 요청을 가로채서 인증 및 인가를 처리하는 프로세스를 만들었습니다.
일반 유저와 관리자 권한을 구별하여야 했기 때문에 인터셉터를 분리하여 권한마다 다른 인터셉터가 동작하도록 하였습니다.

메일 전송 기능 구현

로그인 시에 일부 로그인 형태(로그인 코드를 이용하여 로그인, 회원가입 후 로그인)에서는 로그인 또는 회원가입을 위한 코드를 이메일로 전송하여 인증을 하도록 하였습니다.
이메일 전송을 처리하기 위한 방법으로 JavaMailSender 라이브러리와 Google SMTP를 이용하여 로그인을 시도할 때 비밀번호 대신 입력할 로그인 코드를 메일로 전송하는 기능을 구현하였습니다.
이메일 전송은 다른 로직에 비해 속도가 현저히 느렸기 때문에 로그인 코드를 발급하는 코드와 같이 요청 처리를 하게 되면, 이메일 전송이 완료되기까지 응답이 지연되는 문제가 생겼습니다.
이를 해결하기 위하여 클라이언트에서 로그인 코드를 요청할 때, 이메일 전송 요청을 비동기식으로 전송하도록 구현하여 메일 전송으로 인해 3초까지 지연된 응답이 1초 내로 응답될 수 있도록 하였습니다.

이미지 저장 기능 구현

회원가입 시, 혹은 프로필 수정 시에 프로필 이미지를 설정하고 저장하는 기능을 구현하였습니다.
그러나 배포한 뒤에는 로컬에 이미지를 계속 저장하다보면 서버의 저장공간 부족해질 가능성이 있었고, 관리도 불편하였습니다. 그래서 외부 저장소에 이미지를 저장하고 웹페이지를 렌더링할 때 불러올 필요가 있었습니다.
해결 방법으로 외부 저장소인 Amazon S3에 이미지를 저장하고 해당 이미지 경로에서 이미지를 찾아서 보여줄 수 있도록 구현하였습니다.

카카오 소셜 로그인 기능 구현을 구현

카카오 소셜 로그인 기능을 구현하기 위해서는 카카오 인증 서버와 통신하여 AccessKey를 받고, 카카오 리소스 서버와 통신하여 사용자의 정보를 받아올 수 있어야 합니다.
기존 서버의 API로는 외부와 통신이 불가능하였고, 서버 외부의 API와 통신할 수 있는 방법을 찾아야했습니다.
OpenFeign은 인터페이스를 만들기만 하면 외부의 API를 쉽게 호출할 수 있다는 장점이 있었습니다.
OpenFeign을 사용하여 Kakao 인증 서버 및 리소스 서버 API를 호출하여 회원의 정보를 받아오고, 해당 정보를 바탕으로 세션 설정 및 회원가입을 진행하도록 구현할 수 있었습니다.
다만, OpenFeign을 사용하여 외부 API를 호출하면, API 스펙을 직접 구현해야 했기에 인증 서버와 리소스 서버 API 호출용 클래스와 DTO까지 총 6개의 클래스가 필요했습니다. 이로 인해, 관리해야 할 클래스가 많아서 로직 파악이 복잡해졌습니다.
문제를 해결하고자 OAuth2.0 인증을 보다 쉽게 할 수 있는 방법을 찾아보았고, OAuth Client 라이브러리를 이용하면 OAuth2.0 인증을 위한 클래스를 제공받아 서비스 클래스 하나로 인증을 할 수 있다는 사실을 알게되었습니다. OAuth Client를 이용한 인증으로 리팩토링 함으로써 인증을 위한 6개의 클래스가 1개의 클래스로 줄어들어 유지보수의 효율성을 높일 수 있었습니다.