최종 발표 자료

목차

1기 목차

1. 프로젝트 주제 및 선정 배경
2. 사용자 스토리보드
3. 서비스 브랜딩
4. 서비스 기대효과
5. 프로젝트 협업 과정
6. 프로젝트 협업 툴
7. 프로젝트 협업 일정
8. 프론트엔드 기술 스택 
8-1. UI/UX 구현 세부 특징
8-2. 페이지 구성도
8-3. 프엔 멤버
9. 백엔드 기술 스택
9-1. 백엔드 시스템 구성도
9-2. 백엔드 파이프라인 
9-3. 백엔드 암호화 기술 설명 
9-4. 세부 특징 
9-4-1. 쿼리 디에스엘, 소프트 딜리트 
10. 프로젝트 시연 후 종료

공통

1. 팀소개
• 안녕하세요 ^^ 머쓱한 녀석들입니다 머쓱 ;
• 간단한 팀원 소개
• 역할

2. 기획 & 프로젝트 소개
• 프로젝트 동기 및 기획의도
• 프로젝트 차별성
• 기획안 토대로
• 프로젝트 소개

3. 협업
• 스프린트 계획
• 1주차
• 2주차
• 3주차

4. 협업 방식, 툴
• JIRA 활용, Slack, Discord, 노션, API 문서 (Swagger)
• 코어타임 2시 ~ 7시





• 시작 스크럼 및 마무리 스크럼으로
• 스크럼 시간마다 진행사항, 이슈들을 공유하고 보완
• 노션의 화이트 보드 활용



• 비동기적으로 이슈 해결
• Jira를 통한 티켓 적용





• 앞선 스프린트 계획에 맞춰 이슈 발행 및 개발 진행
• 통합된 환경에서의 개발 진행
• API문서로 Swagger를 채택하여 백엔드와 프론트 빠르게 확인가능

5. 전체 인프라
• 사진 대처 ( 프 + 백 통합 )
• 전체적으로 어떻게 돌아가는 지 설명

• 스토리별 기능 달성률

• 시연영상 7~8분 잡는 것 같습니다
• 프론트엔드가 맡을 예정

• 자체 평가 의견 및 계획

팀 소개

프로젝트 주제 및 선정 배경

• 우리의 이야기를 하나의 서비스에서 기록할 수 있고 공유할 수 있다면 어떨까?

• 기존 연인들끼리 사용할 수 있는 어플은 사진 공유 및 서로가 쓴 글들의 공유가 가능하지만, 해당 기능들은 기존의 앱들로 대체가 가능한 경우들이 많다. 또한, 장소 별로 모아보기가 어려워 결국에는 다시 찾아보지 않고 남는 경우들이 많다.

• 안전하다 - 사용자가 쓴 글은 연인 끼리만 공유된다

• 깨끗하다 - 이별 했다면, 커플을 깨기만 하면 된다. 그러면 모든 데이터를 싹 날려버린다. 추억과 함께

• 편하다 - 장소 기반 서비스로, 지도를 통해 포스트를 쉽게 모아볼 수 있으며 추억을 회상하기 쉽다.

프로젝트 협업 과정

• 애자일 기반 프로젝트 관리

• 중간 회고와 최종 회고 총 2번의 회고를 진행

• 백엔드, 프론트엔드간 일정을 공유하고, 한 눈에 진행도를 확인할 수 있도록 Jira를 커뮤니케이션 툴로 사용

• tools: notion, slack, jira, discord

스프린트 ( 지라 스프린트 사진 넣고 설명 )

• 1주차 - 프로젝트 기획 및 자료조사, 기술 스택 선정

• 2주차 - 프로젝트 베이직에 들어갈 기본 기능 구현

• 3주차 - 프로젝트 고도화 및 추가 기능 구현
• 실제 서비스를 테스트하면서 발견한 버그들을 수정
• UI 고도화
• 실시간 알림 기능 구현

👀 프론트앤드 파트

• 기술스택
[ 언어 ]
• Typescript
 
[ 라이브러리 및 프레임워크 ]
• React 주 라이브러리
• Next.js 프레임워크
• Recoil 상태 관리 라이브러리
• Emotion 스타일 컴포넌트 라이브러리
• Storybook 컴포넌트 테스트 및 관리
 
[ 협업 툴 ]
• Jira 백엔드와 함께 에픽 단위로 프로젝트를 관리
• Figma 아이디어 확장 및 프론트엔드 와이어프레임 관리
• Notion 기획 및 프로젝트 자료 문서화 및 관리
• Slack 이슈 사항 공유 및 소통
 
[ Lint & Prettier Rules ]
Lint

{
  "env": {
    "browser": true,
    "node": true,
    "es6": true
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "tsconfigRootDir": "./",
    "project": ["./tsconfig.json"]
  },
  "plugins": [
    "prettier", "@typescript-eslint"
  ],
  "extends": [
		"airbnb",
		"airbnb-typescript",
		"next/core-web-vitals",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "react/jsx-props-no-spreading": "off",
    "react/require-default-props": "off"
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "overrides": [
    {
      "files": [
        "*.config.js"
      ],
      "rules": {
        "@typescript-eslint/no-var-requires": "off"
      }
    }
  ]
}

Prettier

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "endOfLine": "lf"
}

 
[ 배포 ]
• vercel

• 컨벤션 & 브랜치 전략 (발표 내용이나 README에는 굳이 들어갈 필요는 없어보임)
• rebase 후 merge를 통한 충돌 방지

• 트러블 슈팅 기록

• 페이지별 UX,UI (gif)

👀 백엔드 파트

• 팀원 설명

• 환
• 프로젝트 전체 관리
• 인증,인가 기능 구현
• 회원 API 구현
• 알림 API & 기능 구현
• 로그백 및 Cloudwatch를 통한 모니터링 구축
• 인프라 구축 (HTTPS, Docker)

• 윌
• 포스트 및 태그 도인 API 개발

• 마토
• 커플 도메인 API 개발
• 포스트 검색 API 개발

• 에디
• 이미지 업로드
• CI/CD 구축

협업 방식

• 개발 진행 방식





• 개발 컨벤션
• 각 필요한 설정을 미리 전파하여 불필요한 코드 리뷰 시간을 줄일 수 있었음.
• 그 외에도 각 테스트 전략, 패키지 구조 등을 사전에 미리 팀 컨벤션으로 정해놓음으로써 통일성이 있는 코드를 구현할 수 있었음.

• 브랜치 및 PR 전략



• 브랜치 전략 : git flow 전략을 따르되, release 브랜치의 경우 현재 상황에서 없다고 판단하여 제외하고 main, develop, feature, hotfix 브랜치만 사용
• PR 코드 리뷰







• 코드 리뷰를 통해 사전에 발생할 수 있는 문제 방지, 함께 고민하고 생각하며 개발 진행

기술 스택

• Java 11

• Gradle

• Spring Boot

• Spring JPA

• Query DSL
• 복잡한 쿼리 및 동적 쿼리를 위해 사용

• flyway를 통한 DB 형상 관리

• github action, docker 을 통한 CI/CD 처리

ERD

• 기획서를 기반으로 테이블 도출

• 알림의 경우 서버 분리시 DB도 분리될 수 있다고 생각하여 외래키 설정 X

• Redis에는 jwt token 저장

인프라 및 CI/CD

• 개발 서버와 운영 서버 분리하여 사용

• nginx를 통한 reverse proxy 및 ssl 적용

• 총 3개의 was 사용

• infrastructure

• CI/CD





• github actions와 docker를 통한 CI/CD 구축
• PR 생성시 jacoco와 sonarcloud를 통한 정적 분석 실시
• github actions에서 빌드 및 테스트 진행 후 docker file을 통한 이미지 빌드 및 허브 푸쉬
• 이후 ssh를 통해 스크립트 실행으로 배포 실시
• 서버가 분리됨에 따라 PR 라벨을 통한 파이프라인 분리하였습니다.,

중점 내용

서버 분리 ( 이미지 , core , 알림 )

• 왜? 이미지나 알림의 경우 리소스가 크기 때문에 하나의 서버에서 진행하면 부하가 심하다고 판단
• 세 가지의 모듈로 분리 - core, image, notification
• 분리하면서 인증 처리는 core에게 책임 , 나머지 서버들은 API 콜을 통한 인증,인가 처리
• 게시물 생성, 수정에 따른 알림 처리는 redis pub sub 방식을 사용하여 후에 분산 서버로 확장시에도 용이하게 설계
• 또한, 빌드시간과 테스트 시간 개선 경험

Facade 패턴 (공통)

• 하나의 서비스에서 여러 도메인과 레포지토리를 사용하다보니 너무 많은 책임을 가지고 있었으며 명확하게 구분이 안되는 문제점 발생

• 퍼사드 패턴의 적용으로 하나의 서비스 객체에서 하나의 도메인만 맡도록 분리

• 하나의 책임만을 가질 수 있어 명확하게 구분을 할 수 있었으며 재사용성 및 테스트 코드 작성에도 용이하였음

JWT토큰 + Redis ( 인증, 인가 )

• jwt토큰을 활용하여 서버의 부하를 줄이고 분산 서버로 확장했을 때도 정합성에 문제가 없도록 활용

• accessToken, Refresh Token을 활용해 토큰 탈취, 만료 시 재발급 문제 해결

• 저장의 경우 만료시간라는 휘발성을 고려하여 Redis에 저장하도록 구현

• 좀 더 보안 강화를 위해 로그아웃시 해당 토큰을 블랙리스트로 등록하는 기능 도입

AOP,어노테이션 기반 인증,인가 처리

• 시큐리티 사용 X

• 인터셉터와 어규먼트 리졸버 적극 활용

• 어노테이션과 AOP를 통한 인가 처리
• 개발 편리함
• @LoginRequired 인증 필요
• @OnlySolo, @OnlyCouple 인가 필요

태그 조회

• 사진 변경되야함@@@@@@

• 게시물 태그 검색이나 게시물 작성 시 전체 태그를 반환해줘야 했습니다.

• 하지만 태그의 경우 자주 바뀌긴 하지만 점차 사용하던 태그를 사용할 것이기 때문에 새로 생성된 태그가 없음에도 같은 태그를 계속 데이터베이스에 접근하여 조회하는 것은 비효율적이라고 생각하여 캐시를 도입하였습니다.

• 캐시 저장소에 데이터가 있으면, 캐시에서 가져오고, 없으면 메인 DB에서 값을 가져오는 대표적인 캐시 전략인 Look Aside Cache 사용하였고 태그 응답시 캐싱처리를 하고 태그 생성시에는 캐시를 삭제하도록 하였습니다.

• 이를 통해 캐시를 사용하기 전보다 응답속도를 개선시킬 수 있었습니다.

이미지

• S3 폴더 구조는 {개발환경}/{멤버ID}/{yyyy-MM-dd} 형태로 가져감
• 파일명은 UUID로 중복될 수 없도록 설정

• S3에 이미지를 업로드 해 URL을 내려주는 방식을 사용

• 여러개의 이미지가 업로드 될 경우 동기적으로 처리하는 것보단 비동기로 처리후 취합하는 것이 더 효율적이라고 생각
• 비동기 처리에 parallelStream, CompletableFuture 중 고민을 한 결과 I/O 작업에 더욱 유연하고 커스텀하게 스레드 수를 설정할 수 있는 CompletableFuture 를 사용
• 커스텀 스레드 사진

• 성능 개선 사진

로그 관리

• 서버를 분리하면서 분산된 로그들을 확인하기 어려운 문제점

• 클라우드와치를 이용한 모니터링 실시

• CPU 및 메모리 사용량도 확인할 수 있는 부가적인 이득

개선점 및 후기

• 로드밸런싱 및 무중단 배포

• cloudfront을 활용한 이미지 응답 개선

• 채팅 기능 구현

• 테스트 코드 리팩토링

• 커플 초대 코드 삭제 시점 (필요)

• 커플 변경시 알림 서비스 (필요)

프론트엔드 README

## 서비스 소개

> 우리 갔던 곳, 우리맵

WooriMap은 연인들간 추억을 공유하고 모아볼 수 있는 지도 기반 SNS 플랫폼입니다.  

## 주요 기능

- 사용자와 또 다른 사용자는 서로 커플을 맺을 수 있습니다.
- 커플을 맺은 사용자는 글을 쓰고 수정할 수 있으며, 우리가 갔던 곳의 위치를 표시할 수 있습니다.
- 표시한 위치들을 모아 한 눈에 볼 수 있습니다! 우리 갔던 곳을 모아서 추억 지도를 만들어보세요.
- 이별하셨나요? 걱정할 것이 없습니다. 버튼 하나만 누르면, 커플을 끊음과 함께 추억들 역시 날려버립니다.

## 기술 스택

### 개발

![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)
![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
![Next JS](https://img.shields.io/badge/Next-black?style=for-the-badge&logo=next.js&logoColor=white)

### 코드 관리

![ESLint](https://img.shields.io/badge/ESLint-4B3263?style=for-the-badge&logo=eslint&logoColor=white)
![prettier](https://img.shields.io/badge/prettier-ff69b4.svg?style=for-the-badge)

### 스타일

![Figma](https://img.shields.io/badge/figma-%23F24E1E.svg?style=for-the-badge&logo=figma&logoColor=white)
![Emotion](https://img.shields.io/badge/Emotion-af8eb5.svg?&style=for-the-badge&logo=Emotion&logoColor=white)
![Storybook](https://img.shields.io/badge/-Storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white)

### 커뮤니케이션

![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)
![Notion](https://img.shields.io/badge/Notion-%23000000.svg?style=for-the-badge&logo=notion&logoColor=white)
![Discord](https://img.shields.io/badge/Discord-%237289DA.svg?style=for-the-badge&logo=discord&logoColor=white)
![Slack](https://img.shields.io/badge/Slack-4A154B?style=for-the-badge&logo=slack&logoColor=white)

## 팀원 소개

<div align="center">

| [벤](https://github.com/mrbartrns) | [위고](https://github.com/Yummy-sk) | [오월](https://github.com/MayOwall) | [맷](https://github.com/sangjin149 | [엘리오](https://github.com/woojerry) |
| :-------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------: |
| <img src="https://avatars.githubusercontent.com/u/56826914?v=4" width=150 /> | <img src="https://avatars.githubusercontent.com/u/60822846?v=4" width=150 /> | <img src="https://avatars.githubusercontent.com/u/97934878?v=4" width=150 /> | <img src="https://avatars.githubusercontent.com/u/53640976?v=4" width=150 /> | <img src="https://avatars.githubusercontent.com/u/50645183?v=4" width=150 /> |
---

  </div>

🔥 회고

프론트앤드

백엔드