Donga1125 / Celebee

Celebee🐝 프로젝트에서 작업한 내용을 정리했습니다.

Celebee: 하루단위 모임을 함께할 사람을 모집하는 서비스

담당하여 작업한 부분만 간추린 저장소입니다. 전체 코드가 궁금하시면 아래 링크를 참고해주세요!
프로젝트 메인 저장소 주소: https://github.com/codestates-seb/seb45_main_004

프로젝트 소개

이번주 토요일 판교 맛집 투어를 함께할 사람 모여라! 하루 단위의 간단한 모임을 함께할 인연을 모집하는 서비스를 제공합니다.
현재 프로젝트 진행 기간 동안 해결하지 못했거나, 작업 시간이 부족했던 항목들을 프로젝트 데모데이 이후에 작업했으며 현재도 꾸준하게 리팩토링 작업 중에 있습니다.
또한 프로젝트에서 팀원들이 구현한 내용을 학습하기 위해 다시 구현 작업 중에 있습니다.

• 프로젝트 기간 : 2023년 8월 24일(금) ~ 2023년 9월 22일(수)
  

• 개발 인원 : 백엔드 3명, 프론트엔드 3명 (총 6명)

• 배포 주소: https://celebee.kro.kr

     테스트 아이디: [e-mail] 비밀번호: 1234567Days
    ⛔️⛔️ 현재 AWS ELB를 제거하면서 생긴 CORS 오류 해결 중으로 사이트 접속이 원활하지 않을 수 있습니다. (2024.04.30 ~) ⛔️⛔️
  

• 프로젝트 구조:

• ERD:
  

• API 명세서: Postman API Documentation

• 프로젝트 노션 링크 : Team Notion Link

프로젝트에서 사용한 기술

Back-end

Front-end

협업툴

서비스 설명

메인페이지	글 상세 페이지
글 작성 페이지	마이페이지

각 페이지 별 기획 내용

메인페이지

• 최신순 > 마감 전 > 마감 완료 순서로 우선순위를 설정하여 메인화면 모임 정렬
• 'ALL' 카테고리를 기본으로 하며, 카테고리 변경 시 해당하는 모임 출력
• 무한 스코롤으로 구현하여 많은 모임을 노출시킴
• 모임 이미지에 전환 애니메이션을 적용해 생동감있는 메인 화면을 구성함
• 모임 글 제목과 좋아요 수 노출

글 상세 페이지

• 모임에 대한 [날짜, 장소, 금액, 주최자 정보, 참여 인원, 상세 내용] 을 확인할 수 있음
• 'Join' 버튼을 클릭하여 모임에 참여할 수 있음
• 원활한 모임 진행을 위해 모임 삭제, 수정, 참여 취소 기능은 지원하지 않는 것으로 기획함
• 유저 프로필 이미지를 클릭하면 해당 유저의 마이페이지로 화면 전환됨

글 작성 페이지

• 모임 진행 전 인원을 확정하고자 원하는 모임 날짜 2일 전에 자동 마감되도록 기획
• [제목, 모임 날짜, 인원, 상세 설명, 카테고리, 모임 장소, 이미지] 를 작성자가 결정할 수 있음
• 위 내용을 모두 작성해야 모임 글 생성이 가능함
• 선택한 카테고리에 따라 선택할 수 있는 이미지가 변경됨

마이페이지

• [프로필 이미지 변경, 소개 글 변경, 좋아한 모임 확인, 참여한 모임 확인] 기능을 할 수 있음
• 모임 이미지 클릭 시 해당 모임의 상세 페이지로 화면 전환됨
• 타인의 마이페이지를 확인할 수 있으며, 해당 유저가 좋아한 모임과 참여한 모임을 확인할 수 있음
• 유저 팔로우 기능은 추후 업데이트 예정임

구현 설명

프로젝트에서 업무

프로젝트에서 다음과 같은 기능을 구현했습니다.

1. 모임 참여 기능 구현
2. 조건에 따른 모임 마감 처리
3. SSE 방식으로 알림 기능 비동기 구현
4. 프로젝트 환경 구축
   a. AWS를 이용해 서버 환경 구축
   b. Github Action을 이용하여 수동 배포 시 가졌던 문제 해결
   c. 운영 서버 안정화
   

구현 설명

• 사용 기술

구분	내용
Backend	Java 11 ,Spring Boot 2.7.14 , SpringDataJPA , Spring Cloud, Gradle
DB	H2 , MySQL, AWS RDS
Depoly	AWS EC2, AWS S3, Github Action, Docker
API	Postman

1. 모임 참여 기능 구현

Spring Data JPA 가 기본적으로 제공해 주는 쿼리 메서드를 사용해 모임 참여, 모임에 참여한 인원 조회, 내가 참여한 모임 조회를 위한 REST API를 구현했습니다. 모임 참여 요청을 받으면 참여 중복 여부와 모임 인원수를 확인한 뒤 검사를 통과하면 모임 참여 기록을 저장하고 모임 참여 여부인 BoardStatus와 모임 인원수를 업데이트합니다. 모임 상세 페이지에서 참여 인원에 대한 데이터, 마이페이지에서 내가 참여한 모든 모임에 대한 데이터가 필요할 때 클라이언트에서 GET 요청을 받으면 Headers로 전달받은 Authorization 값에서 memberId를 추출하여 해당 ID 값이 저장된 모임 정보를 클라이언트로 전달합니다.

//ApplicantService
//모임 참여
    public Applicant joinBoard(long boardId, boolean isJoin){
        //해당 모임에 참여했는지 확인
        Long memberId = extractMemberId();
        isJoinAlready(boardId, memberId);
        //모임 참여 로직
        Applicant applicant = new Applicant();
        Board board = boardRepository.getById(boardId); //보드 정보 가져오기
        applicant.setBoard(board);
        applicant.setBoardImageUrl(board.getImageUrl());
        Member member = memberRepository.getById(memberId); //멤버 정보 가져오기
        applicant.setMember(member);
        applicant.setMemberImageUrl(member.getImageUrl());
        applicant.setMemberNickname(member.getNickname());
        //현재 모임 참여 인원 수 업데이트
        if(board.getCurrentNum() < board.getTotalNum()){
            board.setCurrentNum(board.getCurrentNum()+1);
            if (board.getCurrentNum() == board.getTotalNum()){
                board.setStatus(Board.BoardStatus.BOARD_COMPLETE);
                String rootImagePath = board.getImageUrl();
                String cutPath = rootImagePath.substring(0, rootImagePath.length()-4);
                System.out.println(cutPath);
                board.setImageUrl(cutPath+"-closed.png"); //마감 이미지로 변경
                boardRepository.save(board);
                //모집 마감 알림 발송
                notifyCompleted(board);
            }
        }else {//인원수 다 찼으면 추가 안함
            throw new BusinessLogicException(ExceptionCode.NOT_ALLOW_PARTICIPATE);
        }
        //참여 정보 저장
        Applicant savedApplicant = applicantRepository.save(applicant);
        //모임 참여 처리
        applicant.setJoin(true);
        //알림 발송
        notifyApplicant(board);
        notifyParticipants(board);
        
        return savedApplicant;
    }
    
    
    //모임 참여 중인 모든 인원에게 알림 전송
    private void notifyParticipants(Board board){
        alarmService.sendParticipantsNotification(board);
    }
    //모임 참여 완료 알림 전송 (모임 참여 신청자에게 전송)
    private void notifyApplicant (Member member, Board board){
        alarmService.sendApplicantNotification(member,board);
    }
    //모임 모집 마감 알림 전송
    private void notifyCompleted(Board board){
        alarmService.sendCompletedNotification(board);
    }

2. 조건에 따른 모임 마감 처리

Spring boot에서 제공하는 Scheduler 기능을 사용하여 모임 마감 기능을 구현했습니다. 일정한 주기로 마감 조건을 충족하는지 확인하고 마감 처리를 진행해야 했기 때문에 Scheduler 기능을 사용했습니다. 모임 마감 처리 조건은 다음과 같습니다. - 모임 2일 전 - 모집 인원이 충족되었을 때 매일 00시에 확인하여 글 작성 시 설정한 Date의 2일 전이라면 BoardStatus를 변경합니다. 모집 인원이 충족되었는지는 모임 참여 처리 과정에서 확인합니다. 모임 참여를 하며 현재 인원에서 +1 를 해주며, 현재 인원(current num)과 모집 인원(total num)값이 같아지면 BoardStatus를 변경합니다. BoardStatus를 *BOARD_RECRUITING → BOARD_COMPLETE* 로 상태 변경하여 모임 마감 처리 후 BoardStatus를 클라이언트로 전달합니다. 또한 BoardStatus 변경 후에 모임 이미지를 마감 이미지로 변경합니다.

//BoardService
   //날짜지난 모임 마감처리
    @Scheduled(cron = "0 0 0 * * *") //매일 00시에 수행
    public void checkDate(){
        LocalDate today = LocalDate.now();
        List<Board> closedList = findEventsScheduledForDate(today.plus(2, ChronoUnit.DAYS));
        for (Board board : closedList){
            board.setStatus(Board.BoardStatus.BOARD_COMPLETE);
            String rootImagePath = board.getImageUrl();
            String cutPath = rootImagePath.substring(0, rootImagePath.length()-4);
            System.out.println(cutPath);
            board.setImageUrl(cutPath+"-closed.png");
            boardRepository.save(board);
            //알림 발송
            notifyDeadline(board);
        }
    }
    
    //해당 날짜에 예정된 모임 검색(이메일 발송 관련 메서드)
    public List<Board> findEventsScheduledForDate(LocalDate eventDate ) {
        //BoardStatus가 모집중 상태인 모임만 반환
        return boardRepository.findByDateAndStatus(eventDate, Board.BoardStatus.BOARD_RECRUITING);
    }

3. SSE 방식으로 알림 기능 비동기 구현

사용자가 알림을 삭제하지 않았다면 알림 GET 요청 시 지난 알림들을 모두 보내주고, 특정 이벤트 발생 시 사용자에게 알림을 보내야 했습니다. 따라서 실시간으로 서버에서 클라이언트로 데이터를 보내줄 수 있는 장점을 가진 SSE(Server-Sent-Events) 방식으로 구현했습니다. 알림 발송 조건은 다음과 같습니다. - 모임 글 작성이 완료되었을 때 - 새로운 사용자가 모임에 참여했을 때 - 기존에 모임에 참여한 모든 인원에게 알림 발송 - 모임이 마감되었을 때 사용자가 로그인하면 클라이언트에서 알림 구독 요청을 보냅니다. 구독 요청 전 발생하여 누락된 알림이 있는지 확인하고, 누락된 알림을 포함해 구독이 되어있는 동안 조건을 충족하면 알림을 보내줍니다.

//alaramService
    //클라가 구독을 위해 호출하는 메서드
    public SseEmitter subscribe(Long memberId, String lastEventId) {
        String id = makeTimeIncludedId(memberId);
        SseEmitter emitter = emitterRepository.save(id, new SseEmitter(DEFAULT_TIMEOUT));
        //emitter 가 완료될 때 emitter를 삭제 (모든 데이터가 성공적으로 전송된 상태)
        emitter.onCompletion(() -> emitterRepository.deleteById(id));
        //emitter 가 타임아웃되었으면 emitter 삭제 (지정된 시간동안 어떤 이벤트도 전송 x)
        emitter.onTimeout(() -> emitterRepository.deleteById(id));
       //503 에러 방지하고자 더미 이벤트 전달
        sendToClient(emitter, id, "EventStream Created. [memberId=" + memberId + "]");
        //클라가 미수신한 event가 존재할 경우 전송 (유실 방지)
        if (hasLostData(lastEventId)){
            sendLostdata(lastEventId, memberId, emitter);
        }
        return emitter;
    }
    /**
     * 알림 생성, 전송 메서드
     * 사용자의 모든 알람을 읽음처리
     */
    @Async
    @Transactional
    public void sendAlarm(Member member, Board board, Alarm.AlarmStatus alarmStatus, String content){
        Alarm alarm = Alarm.create(member, board, alarmStatus,content);
        alarmRepository.save(alarm);
        Map<String, SseEmitter> sseEmitters = emitterRepository.findAllEmittersStartWithByMemberId(member.getId());
        String eventId = makeTimeIncludedId(member.getId());
        System.out.println(eventId);
        sseEmitters.forEach((key, emitter) -> {
            //데이터 캐시 저장 (유실 데이터 처리를 위해)
            emitterRepository.saveEventCache(key,alarm);
            //데이터 전송
            sendToClient(emitter,eventId, content);
        });
    }

4. 프로젝트 환경 구축

1. AWS를 이용해 서버 환경 구축

   AWS는 많은 점유율을 차지하고 있기 때문에 관련 자료들이 많고, 클라우드 서버를 처음 구축하는 과정에서 참고할 수 있는 자료가 많은 것을 큰 장점으로 생각하여 AWS를 사용했습니다. AWS EC2 와 RDS를 이용해 서버 환경을 구축하였으며, S3 버킷을 2개 구성하여 프론트 배포와 파일 서버로 사용하였습니다.

   또한, 동적 콘텐츠 로딩 시간 단축과 트래픽 급증을 대응하기 위해 AWS CloudFront를 적용하여 페이지 로드 시간 515ms → 84ms 단축했습니다.

   내 도메인 한국에서 도메인 주소를 등록하고 AWS route53을 이용해 CloudFront의 주소를 변경하여 프로젝트에 DNS를 적용했습니다.

2. Github Action을 이용하여 수동 배포 시 가졌던 문제 해결

   이전 Stackoverflow 클론 코딩 프로젝트를 하며 수동으로 jar 파일을 빌드하여 AWS EC2로 옮긴 후 서버를 배포했는데, 빌드 및 배포 과정에서 개발자의 실수로 발생하는 문제로 배포까지 많은 시간이 소요되는 문제가 있었습니다. 배포까지 시간을 단축하기 위해 Github Action을 이용해 CI/CD를 적용했습니다.

   백엔드의 경우 도커 이미지로 jar 파일을 빌드하여 Ec2 에서 도커 컨테이너를 실행하는 과정으로 서버를 배포했고, 프론트엔드의 경우 main 브렌치를 기준으로 빌드한 뒤, S3 버킷으로 배포했습니다.

   그 결과로 최근 10개 서버 배포를 기준으로 CI/CD 과정에 평균 1분 32초 소요되도록 단축했습니다.

3. 운영 서버 안정화

   필수 기능 개발을 백엔드가 먼저 완료하여 추후 개발 예정으로 정한 항목을 먼저 작업하게 되었습니다. 이때 서버 신규 기능 추가로 운영에 의도하지 않은 문제가 생기는 것을 방지하기 위해 운영과 개발 서버를 분리 작업했습니다. 개발 서버 또한 AWS 를 이용해 운영 서버와 동일한 스펙으로 구성했으며, 신규 기능을 개발 서버에 먼저 배포하여 기능을 확인한 뒤 문제가 없으면 main 브렌치로 merge하여 운영 서버에 배포했습니다. 이에 따라 사이드 이펙트에 대한 부담을 덜고 알림 기능을 작업할 수 있었습니다. 현업에서 여러 대의 서버를 분리해 운영하는 과정과 서버 한대가 가지는 부담을 줄일 수 있는 긍정적인 이유를 직접 느낄 수 있는 경험이었습니다.

규칙

✅ git commit 규칙

Type	내용
feat	새로운 기능 추가
fix	버그 수정
docs	문서 수정
style	코드 포맷팅, 세미콜론 누락 (코드변경 x)
refactor	코드 리팩토링

사용 예시 [직무] Type : 변경 내용 ex) header 컴포넌트 작업 완료 ➡️ [FE]feat : header component 작업 완료

✅ 배포 규칙

• 매 스프린트 마감일 16시에 빌드 및 배포를 진행하며, 배포 완료 후 2시간동안 테스트를 진행한다. (default)
• 서버 배포 - 백엔드 기능 구현이 완료되면 3인이 기능 테스트 진행 후 배포 진행한다.
• 클라이언트 배포 - 매 스프린트 마감 후 취합하여 진행한다.
• 배포 날짜 또는 시간에 대해 변경이 필요할 시 소통 코어 타임에 공유한다.
• 배포 버전은 현재 스프린트를 기준으로 정한다. ex_스프린트1 작업물 배포 시 V1.0.0 ~

✅ 운영/개발 서버 분리

• 리팩토링한 내용(feat_FE/BE) -> dev 브렌치로 업로드 -> 개발 서버에 배포하여 확인
• 서비스중인 곳에서 버그 수정 필요 시 -> main 브렌치에서 바로 fix or hotfix로 push.
• 개발 서버에서 테스트 완료하여 서비스 할 사항 -> main 브랜치로 merge -> 운영서버에 배포하여 확인

버전 업데이트 로그

V1.0.0 메인페이지, 유저 정보 조회, 모임 글 상세 조회 기능 개발
V2.0.0 메인 페이지 추가 구성, 카테고리 별 검색 기능, 모임 생성, 참여 기능 개발
V3.0.0 알림, 팔로잉, 페이지 효과, 카카오 로그인 기능 개발

V4.0.1 알림 기능 로직 분리 및 비동기 처리
V4.0.2 docker-compose 사용을 위한 workflow 수정, 환경변수 파일 추가

앞으로의 개발 계획

모임 이미지 출력 이상 이슈 처리

알림 서버 분리

회원가입 시 이메일 인증 기능 추가

가독성 향상, OOP 원칙 지킬 수 있도록 코드 수정

@setter 등 적절한 기능 사용하고 있는지 확인 및 수정