💻 온라인 강의 사이트 개발 프로젝트
- 주제 : 온라인 강의 사이트
- 기술 스택
Frond-end : react , react-query, axios, react-hook-form , react-player , scss, chakra-UI
Back-end : django, nginx ,certbot, ubuntu, mysql, ObjectStorag
- 프로젝트 인원 : 프론트엔드 3명, 백엔드 3명
- 총 프로젝트 기간
기획: 3월 2일 ~ 3월 6일
제작: 3월 7일~ 3월 28일
- Git으로 협업해서 진행
백엔드에서 데이터를 fetch 해오는 첫 프로젝트
리액트 컴포넌트를 공유하여 효율성을 높이는 작업
🔑기능 구현
⭐ 표시는 내가 기여한 기능!
- API는 axios와 react-query를 사용하여 연결하였다.
- CSS는 SCSS와 Chakra UI를 사용하여 구현하였다.
- react-hook-form은 불필요한 useState 사용을 줄일 수 있으며 코드 가독성도 좋아지고 유효성 검사도 쉽게 수행할 수 있어서 만족스러운 라이브러리였다.
로그인, 회원가입 페이지
- jwt token을 활용한 로그인, 로그아웃⭐
- react-hook-form을 사용해서 유효성 검사 및 에러 처리
- 틀렸을 때 모달처리⭐
- 아이디 중복 확인 ⭐
메인페이지
- 카테고리, 인기 강의, 수강 후기 및 react-slick을 활용한 캐러셀 이미지⭐
마이페이지 (회원정보수정, 수강중인 강의)
- 회원정보 수정 : react-hook-form을 사용해서 유효성 검사 및 에러 처리 후 정보 수정⭐
- 수강중인 강의 : 해당 강의 클릭 시 강의 영상페이지 이동
전체강의페이지
- 강의 검색
- 카테고리
- 페이지네이션
상세강의페이지
- 강의 담기 및 모달
- 별점, 댓글, 대댓글 및 모달
- 댓글 더보기 기능 구현
강의영상페이지
- react-player를 사용하여 영상 재생
- 목차 및 진도율 체크
- 재생시간 저장 및 저장시간부터 시작, 80퍼센트 이상 시청 시 수강 체크
에러페이지
- 없는 페이지 이동 시, 로그인이 필요한 페이지 이동 시 에러페이지 구현
Header , Footer
- chakra ui template을 이용한 Header , Footer 구현⭐
🔲호스팅페이지
프로젝트로 최종적으로 만든 → 구현페이지
📝회고
🤩프로젝트에서 만족한 부분(keep)
- 백엔드에서 데이터를 fetch 해오는 첫 프로젝트여서 많은 시행착오가 있었지만 하나하나씩 구현되어지는 과정속에서 내가 성장한 결실을 볼 수 있는 부분이어서 좋았었다.
- Git,Github로 협업해서 프로젝트를 진행했는데 git,github를 사용하는데 익숙해져서 여러모로 성장할 수 있는 시간이었다고 생각한다.
🧐개선점(try)
이번 프로젝트에서 유저 로그인 방식에 jwt-token을 도입하게 되었는데
리액트와 jwt의 개념적인 부분이 부족한 상태에서 무작정 기능구현에만 급급해서 헤매는
경향이 있었다. 결국 구현이 되기는 했지만 csrf와 xss같은 웹보안 이슈에 취약하고 아무래도 서버와 맞출게 많은 작업이다보니 시간이 부족했던것도 아쉬웠다. 이후에 로그인방식에 jwt를 도입하였을때는 좀더 jwt의 부족한 코드를 보완하고 지금보다 웹 보안이슈에도 대응할수 있는 효율적인 코드를 작성해야겠다고 생각하게 되었다.
🤔프로젝트 후기(review)
백엔드에서 데이터를 fetch 해오는 첫 프로젝트이자 리액트를 이용하여 하는 첫 프로젝트여서 처음에는 리액트의 개념이 부족했기에 걱정을 많이 했었다. 하지만 좋은 팀원들을 만나서 각자 최선을 다하고 서로 협력하고 도와주며 생각했던 것 보다 괜찮은 결과물이 나온 것 같아서 뿌듯하다. 다음 프로젝트에서는 기능구현에 급급하기보단 리액트의 개념에 대해서 좀 더 이해하면서 효율적인 코드를 구현하고 싶다는 생각을 하였다.
