/SEAS

Primary LanguageJava

SEAS [2024]

포트폴리오, 코딩 테스트 공부 등 바쁜 신입 개발자들을 위한 간편한 CS 용어 공부 웹사이트 입니다!

플래시카드를 통한 간단한 공부와 더불어 퀴즈를 통해 실력을 점검하고 레벨의 상승과 랭킹을 통해 스스로의 실력을 남들과 비교해볼 수 있습니다.

📜 Index

🔗 Deploy URL

https://i10a609.p.ssafy.io

📚 Repository

https://lab.ssafy.com/s10-webmobile2-sub2/S10P12A609.git


🤝 Member
이정은 송정훈 배진현 엄세현 권기용 김영준

📝 Specification


🚧 Project Outline

  • Project Name: SEAS

  • Project Date: 2024.01 - 2024.02 (6주)

  • Language & Library

  • 프로젝트 이름: SEAS

  • 프로젝트 기간: 2024.01 - 2024.02 (6주)

  • 개발 언어 및 라이브러리

    • Backend
      • Spring Security FLYWAY QUERYDSL MAPSTRUCT JJWT
    • Infra
    • Frontend

  • Team: 아이9허리야 (이정은, 엄세현, 송정훈, 권기용, 배진현, 김영준)

🌐 System Architecture

architecture

💾 ERD

image


📢 Site Introduction

CS 공부 서비스

  • CS 카드를 통해 간단하게 CS 용어를 공부할 수 있다.
  • 퀴즈를 통해 공부한 CS 내용을 복습하며 학습할 수 있다.
  • 퀴즈를 푼 점수를 토대로 한 랭킹 시스템으로 스스로를 평가할 수 있다.
  • 사용자가 푼 퀴즈를 통계로 누적하여 보여줘 공부 내역을 확인할 수 있다.

Site Layout

  • 메인 페이지

    메인페이지만

  • 메뉴 선택 페이지

    선택_페이지만

  • 로그인 / 회원가입 페이지

    auth관련

  • 카드 페이지

    카드

  • 퀴즈 페이지

    퀴즈1

  • 랭크 페이지

    랭킹페이지

  • 마이 페이지

    마이페이지


🙋‍♂️ Distributed Roles

BACKEND

이정은 (팀장)

  • 벡엔드 리더
  • 프로젝트 세팅
  • 로깅
  • Exception Handling
  • MyPage 구현
  • Swagger 세팅
  • Flashcard 구현
  • 카테고리 구현
  • 카테고리 캐싱

송정훈

  • 백엔드 팀원
  • ERD 설계
  • Spring Security 적용
  • JWT 적용
  • QueryDSL 설정
  • 회원 서비스 구현
  • 랭킹 서비스 구현

배진현

  • 백엔드 팀원
  • 인프라 자동 빌드, 배포 환경 구성
  • 이미지 저장을 위한 S3, CloudFront 환경 구성
  • 퀴즈 서비스 구현

FRONTEND

엄세현

  • 프론트엔드 리더
  • 페이지 디자인
  • 초기 개발 환경 구축
  • 메인페이지 제작
  • 메뉴 페이지 제작
  • 로그인, 회원가입 페이지 제작
  • 퀴즈 페이지 제작
  • 랭킹 페이지 제작
  • 퀴즈 Axios 구축
  • 랭크 Axios 구축
  • Axios 전역화
  • 비 로그인 라우팅 기능

권기용

  • 프론트엔드 멤버
  • 마이페이지 디자인 및 각종 차트 제작
  • 즐겨찾기 플래시카드 팝업 페이지 제작
  • 오답노트 팝업 페이지 제작
  • 유저 정보, 차트 및 즐겨찾기/오답노트 Axios 구축

김영준

  • 프론트엔드 멤버
  • 플래시카드 페이지 제작
  • 플래시카드 애니메이션 제작
  • 플래시카드 페이지 Axios 연결
  • auth(회원) 관련 Axios 작성
  • JWT를 위한 refresh Token 요청을 위해 전역 Axios에 인터셉터 추가
  • 포팅 frontend 부분 작성


⚙️ Function

회원

💡 회원은 Spring Security & JWT를 사용하여 로그인 구현

  • 회원가입
  • 로그인 (access 토큰 및 refresh 토큰 발급)
  • 로그인 연장 (access 토큰 재발급)
  • 로그아웃
  • 회원 탈퇴
  • 닉네임 중복 검사
  • 아이디 중복 검사

카테고리

💡 자료구조, 데이터베이스, 알고리즘, 하드웨어, 네트워크, 컴퓨터 구조로 총 6개의 카테고리로 구성

  • 카테고리 목록 조회

카드

💡 SM-2 알고리즘을 활용한 플래시카드 학습 효과 증대

  • 카테고리 별 플래시카드 목록 조회
  • 플래시카드 가중치 업데이트
  • 플래시카드 좋아요 등록
  • 플래시카드 좋아요 해제

퀴즈

💡 SM-2 알고리즘과 WRS 알고리즘을 조합한 사용자 맞춤형 퀴즈 제공

  • 카테고리 별 퀴즈 문제 출제
  • 퀴즈 결과 조회
  • 퀴즈 별 힌트 조회
  • 퀴즈 정답 제출
  • 현재 티어 조회
  • 티어 업데이트 확인

랭킹

💡 전체 사용자의 랭킹 정보 조회 및 검색

  • 랭킹 리스트 조회
  • 사용자 랭킹 검색

마이페이지

💡 사용자의 통계 정보 시각화

  • 유저 기본 정보 조회 (닉네임, 현상금, 티어, 풀이한 문제 수, 정답률)
  • 유저 뱃지 조회
  • 카테고리별 풀이 비율 조회
  • 퀴즈 풀이 스트릭 조회
  • 카테고리 별 성적 추이 그래프 조회
  • 퀴즈 오답노트 목록 조회
  • 오답노트에 등록된 퀴즈 내용 단일 조회
  • 좋아요 한 플래시카드 목록 조회
  • 플래시카드 내용 단일 조회

Technology

SM2 알고리즘

  • 학습자와 정보 유형에 따른 학습 간격 조정 알고리즘

  • 사용자가 잘 모르는 내용에 대한 퀴즈 및 플래시 카드를 더 자주 노출시키기 위해 활용

  • input

    • 사용자의 응답에 대한 점수 q
    • 반복 회차 n
    • 쉬운 정도 EF; Easiness Factor
      • 모른다~잘안다 : 1.3 ~ 2.5
    • 학습 간격 I
      • 최대 1년

  • output

    • n, I, EF 업데이트

  • 변수 설명

    • q: 사용자의 응답에 대한 품질 (Quality)
      quality 의미
      0 퀴즈를 틀림
      1 플래시 카드를 공부함
      2 퀴즈 맞힘 (힌트 사용)
      3 퀴즈 맞힘 (미사용)
    • I : 학습 간격 (Interval)
      • I(1) = 1
      • I(2) = 6
      • n>2이면 I(n) = I(n-1)*EF
    • EF: 쉬운 정도 (Easiness Factor)
      • mq: quality 최댓값 max quality
      • EF' = EF+(0.1-(mq-q)*(0.08+(mq-q)*0.02))

WRS (Weighted Random Shuffling) 알고리즘

  • 가중치에 따른 요소 선택 알고리즘
  • 가중치에 따라 요소가 선택될 확률이 높음
  • SM-2 알고리즘으로 만든 가중치에 따라 잘 모르는 요소에 대한 노출 빈도 높임

Redis

  • 카테고리 목록
  • refresh Token
  • 퀴즈 풀이 시 중간 데이터 저장 (I, EF 등)

Infra

  • jenkins & gitlab 사용해서 자동 빌드, 자동 배포 환경 구현
  • docker를 사용한 어플리케이션 환경 구성
  • nginx를 사용한 경로 요청에 따른 요청 분산 처리
  • 이미지 캐싱을 위한 S3, CloudFront 환경 구축