목차
1. 프로젝트 개요
| 항목 |
내용 |
| 프로젝트명 |
방송통신고등학교 인성·진로 온라인검사 시스템 |
| 유형 |
교육기관용 심리검사 웹 애플리케이션 |
| 역할 |
기획, 디자인, 프론트엔드 개발 |
| 기간 |
2022.04 ~ 2022.05 |
| 팀 구성 |
FE: 1, BE: 1 |
프로젝트 소개
방송통신고등학교 학생들을 위한 인성·진로 온라인검사 시스템입니다. 학생들이 개인정보를 입력하고, 심리검사를 진행하며, 검사 결과(진로 유형, 진로발달 프로파일 등)를 시각화된 형태로 확인할 수 있는 웹 애플리케이션입니다.
2. 기술 스택
Core-FE
| 기술 |
버전 |
선택 이유 |
| React |
18.0.0 |
컴포넌트 기반 UI 개발, 생태계 활용 |
| JavaScript (ES6+) |
- |
빠른 개발 속도, 팀 친숙도 |
| React Router |
6.3.0 |
SPA 라우팅, 동적 네비게이션 |
상태 관리
| 기술 |
용도 |
| Redux |
전역 상태 관리 (검사 정보, 사용자 정보) |
| Redux-Saga |
비동기 API 호출 및 사이드 이펙트 관리 |
| Immer |
불변성 유지하며 상태 업데이트 |
UI/스타일링
| 기술 |
용도 |
| MUI (Material-UI) 5 |
UI 컴포넌트 라이브러리 |
| React Bootstrap |
반응형 레이아웃, 폼 컴포넌트 |
| CSS Modules (SCSS) |
컴포넌트별 스타일 격리 |
| styled-components |
동적 스타일링 |
데이터 시각화
| 기술 |
용도 |
| Chart.js + react-chartjs-2 |
바 차트, 진로발달 프로파일 |
| Recharts |
레이더(다각형) 차트, 유형별 점수 시각화 |
| chartjs-plugin-datalabels |
차트 내 데이터 라벨 표시 |
기타 주요 라이브러리
| 기술 |
용도 |
| Axios |
HTTP 클라이언트 |
| Yup |
폼 유효성 검증 |
| Lodash |
유틸리티 함수 |
| react-slick |
결과 페이지 슬라이드쇼 |
3. 폴더 구조