💬 Portfolio
올라에듀 학습관리 웹어플리케이션 제작기
date
Jul 31, 2022
slug
ollaedu
author
status
Public
tags
React
Redux
summary
올라에듀 공무원학원 안동캠퍼스를 다니는 공무원 기숙학생들을 위한 학습관리 웹어플리케이션
type
Post
thumbnail
category
💬 Portfolio
updatedAt
Apr 12, 2023 11:21 AM
🔗 Link
Source
Web
✍️ 요약
올라에듀 공무원학원 안동캠퍼스를 다니는 공무원 기숙학생들을 위한 학습관리 웹어플리케이션
- 사용 대상
- 올라에듀 공무원학원 안동캠퍼스를 다니고 있는 공무원 기숙학생
- 문제 의식
- 공무원 기숙학생들의 효율적인 학습관리를 위해 학습현황 및 생활 데이터를 기반으로 시각화하여 학습 효율 개선
- 제공 서비스
- 성적 확인을 통해 매주 시행하는 진도별 테스트 성적 추이와 정답률에 대한 데이터베이스 시각화 및 올라에듀 공무원학원의 일정 캘린더 제공
- 생활데이터를 기반으로 한 사용자의 동선, 수면량 등을 시각화하여 생활습관 개선
🛠 사용 기술 및 라이브러리
- React
- React Apexchart
- Context Api
- Sass, styled-component
🖥 담당한 기능 (Front-End)
- 성적 추이 대시보드 기능 개발
- 공무원 학생들의 일간, 주간, 월간 데이터를 백엔드에서 제공한 API 데이터를 활용해 시기에 맞게 데이터를 재가공하여 기능 개발
- Reac-Apexchart라이브러리 활용하여 데이터에 맞는 차트 개발
- 마이페이지 기능 개발
- 유저의 마이페이지 개발을 통해 유저의 기본정보를 수정할 수 있는 기능 추가
💡 성장한 부분
- 활용하려고 했던 API를 바로 사용하기 어려워 데이터를 재가공하는 작업이 필요했음. 이 과정에서 데이터의 구조와 활용에 대한 이해를 높일 수 있었음.
- 토글 버튼에 대한 select와 라이브러리의 스타일적 한계를 극복하기 위해 팀 전체에서 사용하는 custom select 컴포넌트를 만들고 공유함. 이 과정에서 styled-component 활용법을 학습했고, 재사용 가능한 컴포넌트에 대한 이해를 갖게 됨.
- React-Apexchart 활용을 통해 차트라이브러리에 대한 학습을 진행. 이를 통해 데이터의 시각화 측면에서 차트의 구성과 데이터를 넘겨주는 비동기작업에 대한 이해를 갖게됨