React 와 Firebase 로 학점관리 웹사이트 개발 프로젝트

이번 게시물에선 제가 개발한 웹사이트에 대해

간략하게 소개하고 다음 게시물부턴

코드 공유 및 리뷰를 올릴 예정입니다~!

 

배포 완료 된 학점관리 사이트 주소:

https://react-grade.web.app/login

타 학교나 한국에 있는 대학교들 학교 홈페이지에선

대부분 학점조회가 되는 것으로 알고 있다.

하지만 내가 다니는 학교는 무슨 이유인지 모르겠지만

학교 사이트에서 학점조회가 되지 않는다.

덕분에 궁금할 때마다

학교 국제처에 찾아가 기기로 알아보거나

국제처 담당 교수님한테 물어봐야 한다^^

 

그래서 학점조회 사이트를 만들기로 결심했고,

이왕 만들 거 남은 과목들에 목표 점수를 넣어보면서
미래의 목표한 성적을 받았을 때 나오는

학점을 볼 수 있도록 하는 기능도 개발하기로 결심했다.

로그인 페이지

회원가입 페이지

비밀번호 찾기 페이지(가입된 이메일로 비밀번호 재설정 URL을 보내준다)

메인페이지

내가 데이터를 입력시켜 놓았기 때문에

로그인 후 메인페이지가 이렇게 채워져 있지만

가입하고 처음 메인페이지에 들어가면

관련 데이터가 표시되지 않는다.

그래서 Edit Score에서 자신의 학점을 기입해야 한다.

Edit Score Page

쓰기 이모티콘을 누른 뒤 저장 이모티콘을 누르면

데이터베이스에 정상적으로 저장이 된다.

 

처음에 이런 화면을 구현하는 것도 정말 힘들었다.

 

이후에 자세히 설명할 거지만 간단하게 설명하면

 

Firebase 데이터베이스엔

Course와 Users 크게 2종류의 데이터베이스가 있다.

Course엔 전공과목-학기-과목-(학점, 점수)의 데이터들이 있고

Users엔 (개인정보 및 자신의 전공과목-학기-과목(학점, 점수))의 데이터들이 있다.

일단 신규 가입회원은 데이터가 없기 때문에 Course에서 데이터를 불러와서 Edit Score 페이지에 띄워야 한다.

그 후 불러온 데이터에서 점수를 기입해서 데이터를 수정하고 나면 그 수정된 데이터는 Users에 저장되어야 하고

그 이후론 Users 데이터베이스가 화면에 띄어져야 한다.

 

이 기능들을 구현할 코드를 짜는 게

이 프로젝트를 진행하면서

가장 힘들었던 큰 과제였던 것 같다..

이 기능들을 구현하고 난 이후 막힌 부분은 크게 없었다.

 

Edit Score Page에서 데이터 정보가 수정이 되면

그 즉시 Users의 데이터베이스도 수정이 되기 때문에

Users의 데이터들만 불러오는 MainPage의 설계에도 큰 어려움이 없었고,

 

Users의 데이터를 불러오고 데이터베이스 연결을 끊어

데이터의 수정이 불가능하게 한 Estimated GPA 페이지도 간단하게 기능 구현했다.

이처럼 모든 데이터를 사용자 마음대로 수정할 수 있게 했으며,

수정된 즉시 수정된 데이터를 반영한 GPA가 나오도록 개발했다.

 

당연하게도 사용자 마음대로 점수를 입력한거기 때문에

데이터베이스엔 저장이 절대 안 되도록 설계했다.

 

이로 인해 사용자가 자유롭게 자신 있는 과목들은

높은 목표 점수를 기입하고

반대로 자신 없는 과목들은

낮은 목표 점수를 기입해

자신의 미래 예상(목표) GPA를 볼 수 있도록 하여

사용자의 학업 계획을 도울 수 있도록 만들었다:)

Profile Page(모든 기능 구현완료)

 

일단은 우리 학교 버전으로 만들어 배포했지만,

우리와 비슷한 상황인 다른 학교가 있다면

그 학교 버전으로 따로 출시할 예정이다.

 

이번 프로젝트를 진행하면서

혼자 기획, 개발, 배포를 다 하다 보니

힘들었던 만큼 배운 게 많았던 것 같다.

이제 해외용 에브리타임 팀 프로젝트에 집중해야겠다;)