Goal of Program

홍콩중문대학교 학생들의 수강신청 시스템에 불편한점들을 조금 더 보완한 수강신청 웹사이트 만들기

홍콩중문대학교의 수강신청 시스템의 경우 Course 정보를 확인하는 창과 수강신청을 하는 창이 분리되어 shopping cart에 담을 때 해당 과목의 정보를 확인하는 것에 대해 불편함이 있어 이러한 점을 보완하려고 했다. 또한 처음 해메는 신입생들을 위해 Course Recommendation 기능도 추가하기로 하였다.

 

Main Features 

For user

1. Login/ Sign up

2. My Profile Information

3. Course Browsing (카테고리 별 검색 기능 추가)

4. Course Add/ Drop 기능

5. Course Recommendation

6. Course Review check 기능  

 

For Admin

1. User 조회 및 삭제 기능

2. Course 정보 조회 및 삭제 기능

 

Used Language

Express.js, React, Amazon AWS(Server)

 

My Part

이번 그룹프로젝트의 경우 총 5명으로 구성되었다.(CS 전공자 4명, 비전공자 1명)

프론트 2명, 백엔드 2명, DB 1명

나 같은 경우 DB쪽을 다뤄보고 싶었으나 아무도 프론트에 대한 경험이 없어 그나마 경험이 있는 내가 맡기로하였고 나와 비전공자 1명이 프론트를 다뤘다.

프론트 쪽은 우선 UI design 템플릿(Figma 사용)을 만들어 보았고 그 다음 어떤식으로 정보를 서버로 Get/Post 할지 구상하여 진행했다. 그 다음 각 Page 마다 필요한 프론트 기능(ex) Course/User searching, Add/Drop btn, etc...) 들을 만들어 보았다. 

까다로웠던 부분은 유저가 로그인 후 다른 페이지로 이동할 때 어떤식으로 정보를 유지할지 어려움이 있었는데 접속을 할때 user id가 학생 ID로 로그인하는 것으로 고려하였기에 학생 ID를 계속 주고받아 다른 페이지로 이동할 때도 정보를 유지할 수 있게 해주었다. 

 

 

My Review

이 프로젝트 같은 경우 총 3달 정도 소용하여 하는 규모있는 프로젝트 였다. 특히, 이 프로젝트의 흥미로웠던 점은 단순히 웹사이트를 만드는 것 뿐만 아니라 프로젝트에 관련된 모든 문서를 다뤄볼 수 있는 기회였다. 그래서 실제 코딩이 들어가기전 다뤄 본 문서는 High Level Design Document, DFD Specification Document, UML Specification and UI Design Document, Testing Document 이 있다. 저 위에 문서들을 작성하는데 2달 정도를 주었고 실제 코딩을 하는 시간은 고작 2주 정도였다. 그래서 처음에는 너무 타이트 한거 아닌가 생각했는데 문서를 작성해보면서 문서의 중요성을 깨달을 수 있었다.

 

각 문서의 장점들을 요약해보면 먼저 High Level Design Document 경우 우리가 어떤 웹사이트를 만들 지 전반적인 구성에 대해 구상할 수 있는 것이 좋았다. 그래서 우리가 개발하면서 우리의 주된 목표를 잃지 않게 유지할 수 있게 해 주었다. DFD Specification Document의 경우 우리가 만드는 System마다 data의 flow에 집중하여 볼 수 있고 모든 경우의 수를 따져볼 수 있어 좋았다.

 

UML Specification and UI Design document의 경우 역시 User 입장에서 우리의 웹사이트를 접근할 때 모든 경우의 수를 따져 볼 수 있었고 우리가 어떤식으로 UI를 짤지 에 대해 구상하기 좋은 기회였다.

 

이렇게 모든 경우를 따져보고 코드를 짜보니 확실히 전반적인 설계가 되어있어 코드를 짤 때도 빠른 시간안에 짤 수 있었고 문서를 작성하면서 프론트, 백엔드, 데이터베이스의 정보를 어떻게 주고받을지 짜놔서 의견 충돌들을 훨씬 줄일 수 있었다. 다음에도 이런 기회가 온다면 이런 문서의 힘을 꼭 활용해봐야겠다는 생각이 들었고 정말 의미있는 프로젝트였다.

 

 

 

Project Code

https://github.com/guswns00123/CU-Advanced-Course-Selection.git

 

GitHub - guswns00123/CU-Advanced-Course-Selection

Contribute to guswns00123/CU-Advanced-Course-Selection development by creating an account on GitHub.

github.com

 

 

+ Recent posts