- 프론트엔드 최종 마무리
- 백엔드 및 db 테이블 작성
- 9주차 목표
프론트엔드 최종 마무리
시간표 자동 매칭에 관련한 조건들을 최종적으로 확립한 후
프론트엔드 학생, 조교, 교수 계정별로 구현할 기능들을 달리 정하였습니다.
계정 역할 별 큰 틀은 아래와 같습니다.
1. 교수 : 가능 요일, 가능 시간, 수업 방식(현장/ 온라인/ 현장+온라인), 합반 수업, 진행하는 수업의 개수 및 수업 명
2. 조교: 수동 지정, 자동 지정, 수정, 배정못한 강의, 학교 지정 필수 강의, 강의실 정보
3. 학생: 시간표 개별 수정 기능
로그인 및 회원가입 또한 각 역할별로 받는 것으로 진행하였습니다.
맨 처음 로그인 및 회원가입 화면
조교 계정으로 로그인 한 경우 홈/ 학생 정보 입력/ 강의실 정보 입력/ 강제 수정 권한
학생 계정 로그인 시 홈/ 수업 삭제 및 수정
https://infognu.ansan.ac.kr/~i2251030/he/index.html
// 프론트엔드만 대략적으로 구현해놓은 파일을 파일질라에 업로드해놓았습니다
DB 테이블 및 백엔드 기본 작성
계정 테이블, 강의실 정보, 시간표 틀 등등을 위한 기본적인 리액트 형태를 작성해놓고 import를 해와 안에 자료를 넣는 방식으로 진행하고자 합니다.
DB에도 사용자, 강의실, 수업 정보 등을 저장하기 위한 테이블을 만들었습니다.
react-router-dom/ (최상위 루트 폴더 – 프론트엔드 실행 위치)
┃
┣ public/ # 리액트 정적 파일
┃ ┗ index.html # 앱의 뼈대 HTML [cite: 346, 375]
┃
┣ src/ # 프론트엔드(React) 소스 코드 [cite: 346]
┃ ┣ api/ # 백엔드 통신 설정
┃ ┃ ┗ axiosConfig.js # Axios 기본 설정 [cite: 196, 283]
┃ ┣ components/ # 공통 UI 컴포넌트
┃ ┃ ┗ ScheduleGrid.jsx # 6×10 공통 시간표 [cite: 172, 205]
┃ ┣ features/ # 기능별 페이지 컴포넌트 [cite: 206]
┃ ┃ ┣ auth/ # 로그인 및 회원가입 [cite: 206]
┃ ┃ ┃ ┣ LoginPage.jsx
┃ ┃ ┃ ┗ SignupPage.jsx
┃ ┃ ┣ professor/ # 교수용 화면 [cite: 207]
┃ ┃ ┃ ┣ ProfessorHome.jsx
┃ ┃ ┃ ┣ CourseInfo.jsx
┃ ┃ ┃ ┗ AvailableTime.jsx
┃ ┃ ┣ student/ # 학생용 화면 [cite: 208]
┃ ┃ ┗ ta/ # 조교용 화면 [cite: 209]
┃ ┣ styles/ # CSS 스타일 시트
┃ ┃ ┗ auth.css # 로그인/회원가입 디자인 [cite: 211, 548]
┃ ┣ App.js # 최상위 라우팅 설정 [cite: 158, 383]
┃ ┗ index.js # 리액트 시작점 (렌더링) [cite: 382]
┃
┣ package.json # 프론트엔드 라이브러리 관리 [cite: 332, 346]
┃
┗ server/ (백엔드 폴더 – 서버 실행 위치 [cite: 346, 569])
┣ config/ # DB 연결 설정
┃ ┗ db.js # MySQL Connection Pool [cite: 252, 525]
┣ controllers/ # 비즈니스 로직 처리 [cite: 263, 274]
┃ ┣ authController.js
┃ ┣ courseController.js
┃ ┗ availabilityController.js
┣ routes/ # API 경로 정의 [cite: 262, 273]
┃ ┣ authRoutes.js
┃ ┣ courseRoutes.js
┃ ┗ availabilityRoutes.js
┣ .env # DB 접속 보안 정보 [cite: 251, 590]
┣ server.js # 백엔드 메인 실행 파일 [cite: 254, 560]
┗ package.json # 백엔드 라이브러리 관리 [cite: 333, 334]
위는 대략적으로 정리해둘 파일 순위를 작성해두었습니다
9주차 목표
– DB 테이블 완성 및 연동
– 백엔드 교수 및 학생 계정 마무리
– 회원가입 및 로그인 이외 기능 실현 테스트