AGIJAGI(육아 전문 플랫폼 서비스) FRONT

BTC 3기 개발자과정 - 1조(ONE-TEAM)

개발자

김란희 안지수 김장훈

프로젝트 기간

2023.10.19 ~ 2023.11.20

담당 멘토님

강현욱 멘토님

BACK Git

https://github.com/doradorani/agijagi_back.git

• 실행
• 개요
  • 주제
  • 선정배경
  • 프로젝트 폴더 설명
• 아키텍처
  • ERD
  • Infra Architecture
  • API 명세서
• JWT
  • JWT
  • Flow Chart
• 환경 및 버전
  • Environment
  • Dependency
  • Java
• 팀원 역할
• 시연 영상
• PPT
  
  

1. 실행

---

• 라이브러리 및 모듈 설치하기

npm install

• Node.js 서버 실행하기

npm start

2. 개요

---

주제

• 예쁜 우리 아이 자랑하고 싶으신가요? 육아를 하는데 정보를 얻고 싶으신가요?
• 'AGIJAGI' 에서 찾으실 수 있습니다.
• 예쁜 우리 아이의 모습을 매일 기록하실 수 있도록 육아 일기 서비스와 육아 수첩 서비스를 제공합니다.
• 우리 아이의 모습을 자랑하고 싶고 정보를 얻을 수 있도록 육아 커뮤니티를 제공합니다.
• 육아 관련 제품을 저렴하게 구매하실 수 있도록 펀딩 서비스를 제공합니다.
  
  

선정배경

• 부산에 있는 많은 취준생들 사이에서 부산은 노인과 바다라는 불명예스러운 별명을 가지고 있음.

• 이 별명은 높은 청년이탈율과 저출산율에 근거한 별명이라고 판단했고 그 중에서도 낮은 출산율에 대한 문제를 심각하게 인지할 필요가 있다고 생각함.

• 부산 합계 출산율
  

• 전국 합계 출산율 통계 그래프

• 많은 이유가 있겠지만 그 중에서도 결혼, 출산, 육아에 관한 부정적인 이미지를 개선하는 것이 가장 시급한 문제라고 판단하고 좋은 이미지를 많이 노출시켜 관련 주제의 이미지 개선을 할 수 있는 육아 플랫폼 서비스를 주제로 선정
  
  

프로젝트 폴더 설명

• public : 필요한 테스트 이미지 및 환경 변수 파일
• src - css : 적용한 css 폴더
• src - js - api : api를 호출할 때 필요한 config redux 폴더
• src - jsx : 각 페이지의 jsx 폴더
  
  

3. 아키텍처

---

ERD

Infra Architecture

API 명세서

API 명세서(Swagger): https://drive.google.com/file/d/1UzdPXteyF15Cmijuztx27BxKCEROs80U/view?usp=sharing

4. JWT

---

JWT

• 구조
  • 헤더(HS256) + 페이로드(Json - Key/Value) + 서명(BASE64) => 대칭키 (※ RSA를 활용하여 비대칭키로 보안 강화 가능)
• 사용
  • 사용자 토큰 인증(401)과 권한(403)을 확인
• 추가 적용 사항
  • 카카오 소셜 로그인을 통한 OAuth2.0 기반의 보안 기능 강화 로그인 방식
  • AccessToken - 5분, RefreshToken - 1시간, Axios Interceptor timeout - 10초
  • Redux와 Redux-persist를 활용한 클라이언트 토큰 관리 방식 사용
  • 다중 로그인 방지를 위한 이메일과 토큰의 Key/Value 형식 검증(추후 IP 검증 기능을 추가하여 RefreshToken 탈취에 대한 보안 강화 예정)
  • Axios Interceptor를 활용한 프론트와 서버간의 통신 최소화 및 서버 부하 분산화

Flow Chart

5. 환경 및 버전

---

Environment

• Spring boot 2.7.17

Dependency

• Spring dependency-management 1.0.15

Java

• Java 17

6. 팀원 역할

---

이름	담당 직무
안지수	팀장 / 육아 커뮤니티, 공지사항 기능 및 뷰 설계
김란희	팀원 / 육아 일기, 수첩 기능 및 ERD, 인프라 구축
김장훈	팀원 / JWT 토큰, 멤버링, 육아 펀딩 기능 구현

7. 시연 영상

---

시연 영상 : https://youtu.be/QvTuvidmGKc

8. PPT

---

발표 PPT : https://drive.google.com/file/d/1HQ-H5Ofdiwl3LZHiFV_91s3zyKthICUC/view?usp=sharing