JLake310 / SKKUporter-front

SKKUporter frontend

📖 상세 내용

💡 강의 수강 어플 LearningX와 수강 목록 확인 chrome extension 아캠체크의 단점들을 개선한 어플리케이션이다. LearningX는 강의를 수강할 수 있고, 로그인을 한 번만 해도 되는 어플이지만 UI가 단순하지 않다는 단점이 있으며, 아캠 체크는 남은 수강 목록을 한 눈에 확인할 수 있지만 chrome extension이기 때문에 웹 환경에서만 확인이 가능하다는 단점이 있다. 이를 보완하여 수강해야하는 강의 및 과제의 목록을 어플에서도 손 쉽게 확인하도록 고안한 어플리케이션이 SKKUporter이다. 추가 기능으로는 강의별 수강자 채팅 기능, 강의 리다이렉팅 기능이 있다.

🛠 사용기술 및 라이브러리

• TypeScript, React Native
• Django, SQLite, AWS EC2

💻 담당한 기능

프론트엔드

• Design system, Information Architecture, 페이지 디자인 제작 및 기능 정의
• 라우팅 구조 설계 및 구현
• 전반적인 개발 프로세스 조율
• 남은 강의 및 과제 목록을 확인할 수 있는 페이지 구현
• 주간 달력 구현 및 주간별 남은 할 일 렌더링(npm 패키지 미사용)

📐 트러블 슈팅

• 학기 중에 수업에서 진행한 팀프로젝트인만큼, 팀원 개개인의 학업으로 인해 개발 프로세스가 더디게 진행 되는 문제 발생 → 팀장이 아님에도 디자인과 기능 정의를 도맡아 하며 개발 프로세스의 진행 또한 주도적으로 진행
• 기존에 개발되어 있는 주간 달력이 사용 용도에 맞지 않아 달력을 제대로 렌더링 할 수 없는 문제 발생 → 용도에 맞게 주간 달력을 직접 구현하여 사용, npm 패키지로 배포 예정
• Calendar 페이지에서는 할 일 종류(강의/과제)에 따라 렌더링 해야하고 Checklist 페이지에서는 과목별로 렌더링 해야하는 문제 → API 요청으로 받은 response json 구조를 이해하고, map과 조건문의 적절한 활용으로 같은 response로 다르게 렌더링하도록 구현