SEAS [2024]

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

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

📜 Index

• MEMBER
• SPECIFICATION
• PROJECT OUTLINE
• ARCHITECT
• ERD
• SITE INTRODUCTION
• DISTRIBUTED ROLES
• FUNCTION
• TECHNOLOGY

🤝 Member

LeeJE20	sjhjack	JinHyeonBae	MuRing	badacura	yeongjunsgit

📝 Specification

• 기능명세서

🚧 Project Outline

• Project Name: SEAS

• Project Date: 2024.01 - 2024.02 (6주)

• Language & Library

• 프로젝트 이름: SEAS

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

• 개발 언어 및 라이브러리

  • Backend
    • 
    • 
    • 
    • 
    • 
  • Infra
    • 
    • 
    • 
    • 
    • 
    • 
    • 
  • Frontend
    • 
    • 
    • 
    • 
    • 

• Team: 아이9허리야 (6인)

🌐 System Architecture

💾 ERD

📢 Site Introduction

CS 공부 서비스

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

Site Layout

• 메인 페이지

  

• 메뉴 선택 페이지

  

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

  

• 카드 페이지

  

• 퀴즈 페이지

  

• 랭크 페이지

  

• 마이 페이지

  

🙋‍♂️ Distributed Roles

BACKEND

LeeJE20 (팀장)

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

sjhjack

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

JinHyeonBae

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

FRONTEND

MuRing

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

badacura

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

yeongjunsgit

• 프론트엔드 멤버
• 플래시카드 페이지 제작
• 플래시카드 애니메이션 제작
• 플래시카드 페이지 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 환경 구축