💡 우리 프로젝트는요!

수강신청 사이트입니다. 로그인, 회원가입 기능, 강의목록 표시 및 검색, 관심과목 등록 및 삭제, 수강신청 및 신청목록 삭제, 시간표 그리기 등 기능이 있습니다.

🗓프로젝트 기간

총 기간 : 2023.03.27 (월) 15:00 ~ 2023.03.30 (목) 21:00

기획 및 설계 : 2023.03.27 (월) 15:00 ~ 2023.03.28 (화) 새벽
제작 : 2023.03.28 (화) 새벽 ~ 2023.03.30 (목) 21:00
발표 : 2023.03.30 (목) 21:00 ~ 21:10

👪팀원

모두가 얼떨결에 Full-stack 개발

• 강재형 - 시간표 로직 구현, JWT토큰, API명세, DB설계
• 김석호 - 회원가입, 로그인, JWT토큰
• 김효환 - 강의목록, 검색기능, 사이드바, JWT토큰
• 신민철 - 관심강의, JWT토큰
• 왕정민 - 신청내역, JWT토큰
  
  
  

🛠기술스택 & 툴

[ SKILL ]

[ TOOL ]

✏초안 API명세

📑API 명세

📈데이터 명세

*수업시간 변수 : [{'day' : '요일',
                             'start_time' : '1400',
                             'end_time' : '1530'}]

draw_info : [{'class_name' : '과목이름',
                      'class_color' : '과목색깔',

                      'class_pos' : [111,112,113,114]

                       }]

db.user_list = {'user_name' : '이름',
                         'user_id' : '아이디',
                         'user_pw' : '비밀번호'}

db.user_info = {'user_id' = '아이디', 

                          'wishlist' : ['과목코드들'],

                           'enrollment' : ['과목코드들']}

data['result']['enrollment'] = ['STAT420', 'STAT520', 'COSE423]

db.class_list = {'class_name' : '수업 이름',

                          'instructor' : '강사 이름',
                          'class_time : *수업시간변수,
                          'class_code' : '과목코드',

                          'class_max' : '최대수강인원'

                          'class_now' : '현재신청인원'}

📌API 구현 기능

• 회원가입 기능
• 로그인 기능
• 로그인 인증 기능
• 강의목록 호출 기능
• 강의목록 검색 기능
• 관심강의 담기 기능
• 관심강의 호출 기능
• 관심강의 삭제 기능
• 수강신청 기능
• 신청내역 호출 기능
• 신청내역 삭제 기능
• 시간표 그리기 기능
  
  

💡트러블슈팅

강재형

• ormData의 body에 리스트를 태울 수 없는 문제 발생
  → 반복문으로 해결
• myclasspage에서 표 작게나오는 문제
  → 시간표 table을 담고있는 태그의 css가 누락되어있었음
• 시간표 한번 더 누르면 hide
  → table의 기본 display를 hide 후, 버튼을 누르면 table의 display옵션을 변경, button 자체의 onclick event와 innerHTML도 수정하여 버튼의 기능, 모양을 바꿔줌
• 그려진 시간표에서 한 강의 안의 boarder를 지워주어 에타처럼 만들고, 강의명 써주기 (구조변경필요)
  → table태그는 좌에서 우로 그려지기 때문에 이렇게 적용하려면 많이 복잡했다. 애초에 기능 구현 전에 설계를 잘 해서 각 구역을 div로 잡았으면 좋았을텐데...... 추후 비슷한걸 진행하게 되면 요일순서대로 그려지게 하고, 각 요일을 div의 class나 id로 잡아서 하면 좋을거같다.
• API 명세 개선 필요
  → GET, POST 요청들이 어떤 object를 주고받는지, 각 필드명과 데이터 타입은 무엇인지 명시하여 개선함

<후기>
첫 프로젝트이자 github을 사용한 첫 협업 경험이었는데, 여러명이 각자 기능을 구현하고 이를 합칠 때 발생할 수 있는 문제를 많이 경험할 수 있어 좋았다. 프로젝트 주제 자체가 희망과목 담기, 수강신청, 시간표 그리기 등의 기능으로 각각의 기능 간에 데이터를 주고받을 일이 많아 이러한 경험을 하게된 것 같다. 재밌는 경험이었다.

김석호

• 로그인 페이지 로그인버튼 /회원가입 버튼 만들기
  → html의 태그 기능을 이해하고 onchlick버튼 기능을 사용하여 해결할 수 있었다.
• 회원가입 완료 시 로그인페이지로 이동
  → window.location.reload() 를 참고해서 접근
  → window.location.herf(’/이동할 페이지’) 해당 코드를 통해 해결할 수 있었다.
  → 회원가입시 로그인페이지로 이동하는 개념과 if / else 조건문을 참고하여 해결 할 수 있었다.
• 로그인 성공시 알림창 후 다음페이지로 이동/실패시 안내창과 함께 로그인페이지 머무르기
  → 회원가입시 로그인페이지로 이동하는 개념과 if / else 조건문을 참고하여 해결 할 수 있었다.
• 로그인 시 토큰 발생 후 쿠키로 저장
  → 능력 부족으로 인해 구현 못함 공부를 더 해야할 필요가 있다.

김효환

• user_id와 class_list db들간의 연결 → $push 로 해결
  → $push로 해결
• class_list 속성 추가
• 사이드바추가 (현재 classes 에만 들어가있음) static에 css,js sidebar 인포트 필요
• 사이드바에 시계 추가완료 사이드바 인포트 하면서 clock js,css 도 인포트 필요
• 로그인 회원가입 css추가
• 회원가입 폼 조건에 따른 에러문구 추가

신민철

• classlist에서 자료가 호출되지 않음
  → user_id를 선언하여 id 기준으로 자료를 호출하여 해결
  → list자료를 호출하여 for문을 사용하여 해결
• 수강신청 버튼이 작동하지 않음
  → temp_html에 ${class_code}로 해결
  → ’${class_code}’의 ‘’로 문자를 string로 해결
• 관심강의 삭제버튼이 작동하지 않음
  → temp_html에 ${class_code}로 해결
  → ’${class_code}’의 ‘’로 문자를 string로 해결
• 체크박스를 체크해서 신청 및 삭제
  → 추후 수정 예정
• 신청리스트 중복체크
  → 추후 수정 예정

<후기>
첫 팀프로젝트였고 github, sourcetree를 처음 사용하여 우리들의 자료를 하나로 모와서 하나의 프로젝트를 완성했다는 것이 너무 뿌듯하고 흥미로웠다.
시간이 부족하여 하지 못한 기능들으 개인적으로 다시 해보고 싶고, 서로가 소통을 하면서 하나의 프로젝트를 진행하는것이 재미있었다.

왕정민

• enrollment 리스트에서 과목코드를 추출하여 해당 과목의 상세정보를 class_list 컬렉션에서 가져오기
  → enrollment가 리스트여서 받아와서 한꺼풀 벗기고 for문을 돌려 해결!
• myclasspage에서 표 작게 나오는 부분 해결하기
  → 시간표 테이블을 담고있는 div의 css가 누락됨. 누락된 부분 수정으로 해결함
• 체크박스를 이용하여 여러 개를 한꺼번에 삭제하는 기능 만들기
  → 버튼의 name 속성을 같은 이름으로 해야 함
  → 체크 된 체크박스의 id를 가져와서 each() 메서드를 이용해 리스트에 push()하여 넘김
  → 체크 된 체크박스의 수를 카운트하여 체크하지 않은 상황에 대한 예외 처리를 함
  → <app.py>에서 받은 내용이 리스트가 아니여서 쉽표(,)로 split 하고, 다시 리스트로 만듬
  → user id로 가져온 원래 리스트와 체크 된 리스트 연산(리스트 빼기 연산 가능!)으로 새 리스트를 생성하여 DB를 수정함
  → 참고할 것은 mongoDB update를 할 때 항목에 리스트로 들어있으면 리스트가 그 안으로 들어가는게 아닐까? 생각했는데 아님 ㅋ_ㅋ
  → ['a', 'b', 'c', ...] 가 ['a', 'b', 'c', [new arr], ...] 이렇게 될까 했는데 그렇지 않고, 잘 수정됨
  → 오라클과 달리 mongoDB는 리스트가 데이터로 삽입될 수 있음. 그렇기 때문에 enrollment의 가장 작은 단위가 리스트임.
  → 리스트 안의 내용까지 접근 못하는 것과 마찬가지로 리스트가 그 안으로 삽입되는 것이 아니라 리스트 자체가 잘 수정되었음
• 표 css
  → 부트스트랩을 이용해 테이블을 심플하게 디자인 함
• Auth 함수 return 값을 못 받아오는 문제
  → Auth 함수 내의 ajax 옵션에 async가 없었는데 넣어주고 false로 값을 줬더니 잘 받아옴
  → 참고 : https://recollectionis.tistory.com/167
• 사이드바 토글
  → 추후 수정 예정

✨결과물

<회원가입>

<로그인>

<강의목록 조회>

<강의 검색>

<관심과목 조회>

<신청과목 조회>

🖥 URL

배포 URL

http://sugangpage.eba-iyefhen2.ap-northeast-2.elasticbeanstalk.com/

Notion URL

https://www.notion.so/11-225872a369314db6b2e46ea3b2a6cbfc