💻온라인 강의 사이트 개발 프로젝트
- 주제 : 온라인 강의 사이트
- 기술 스택
Frond-end : react , react-query, axios, react-hook-form , react-player , scss, chakra-UI
Back-end : django, nginx ,certbot, ubuntu, mysql, ObjectStorage
- 프로젝트 인원 : 프론트엔드 3명, 백엔드 3명
- 총 프로젝트 기간
기획: 3월 2일 ~ 3월 6일
제작: 3월 7일~ 3월 28일
- Git으로 협업해서 진행
백엔드에서 데이터를 fetch 해오는 첫 프로젝트
리액트 컴포넌트를 공유하여 효율성을 높이는 작업
🎮주요 구현 사항
⭐ 표시는 내가 기여한 기능!
- API는 axios와 react-query를 사용하여 연결하였다.
- CSS는 SCSS와 Chakra UI를 사용하여 구현하였다. 디자인은 팀원들 중 css는 가장 잘 다룰 수 있어서 전반적인 레이아웃을 맡아서 진행했다.
- react-hook-form은 불필요한 useState 사용을 줄일 수 있으며 코드 가독성도 좋아지고 유효성 검사도 쉽게 수행할 수 있어서 만족스러운 라이브러리였다.
- 이번 프로젝트에서 상세강의 페이지와 강의영상 페이지를 주로 맡아서 작업하였다.
로그인, 회원가입 페이지
- jwt token을 활용한 로그인, 로그아웃
- react-hook-form을 사용해서 유효성 검사 및 에러 처리⭐
- 틀렸을 때 모달처리
- 아이디 중복 확인
메인페이지
- 카테고리, 인기 강의, 수강 후기 및 react-slick을 활용한 캐러셀 이미지
마이페이지 (회원정보수정, 수강중인 강의)
- 회원정보 수정 : react-hook-form을 사용해서 유효성 검사 및 에러 처리 후 정보 수정
- 수강중인 강의 : 해당 강의 클릭 시 강의 영상페이지 이동⭐
전체강의페이지
- 강의 검색
- 카테고리⭐
- 페이지네이션
상세강의페이지
- 강의 담기 및 모달⭐
- 별점, 댓글, 대댓글 및 모달⭐
- 댓글 더보기 기능 구현⭐
강의영상페이지
- react-player를 사용하여 영상 재생⭐
- 목차 및 진도율 체크⭐
- 재생시간 저장 및 저장시간부터 시작, 80퍼센트 이상 시청 시 수강 체크⭐
에러페이지
- 없는 페이지 이동 시, 로그인이 필요한 페이지 이동 시 에러페이지 구현
📷결과화면
🔲호스팅페이지
프로젝트로 최종적으로 만든 → 구현 페이지
📝회고
🤩프로젝트에서 만족한 부분(keep)
- 백엔드에서 데이터를 fetch 해오는 첫 프로젝트여서 만들 때마다 처음 만드는 거여서 감이 잘 안잡혔지만 생각한대로 만들었을 때 문제없이 만들어지는 부분이 내가 성장한 결실을 볼 수 있는 부분이어서 좋았었다.
- Git으로 협업해서 프로젝트를 진행했는데 git을 사용하는데 익숙해져서 여러모로 성장할 수 있는 시간이었다고 생각한다.
- 별점 기능은 클릭된 별의 상태의 value값을 react-hook-form을 사용하여 데이터 객체에 담아서 보내지게끔 만들려고했다.
<Controller
name="rating"
control={control}
rules={{ required: true }}
render={({ field }) => (
<StarScore
{...field}
onRatingChange={value => {
setValue('rating', value);
}}
/>
)}
/>const StarScore = forwardRef(({ value, onChange }, ref) => {그래서 위 코드처럼 react-hook-form 의 controller를 사용하고 StarScore 컴포넌트에서는 forwardRef를 사용하여 상위 컴포넌트에 값을 넘겨주어서 별점 기능을 구현하였다.
😥잘 되지 않았거나 문제가 있던 내용(problem)
React-Player로 영상을 재생하고 영상이 80퍼센트가 되었을 때 isPlayer : true를 서버로 보내서 저장을 하기위해 작업을 하던 중 문제가 발생했었다.
const handleProgress = state => {
setPlayedSeconds(state.playedSeconds);
const duration = playerRef.current?.getDuration();
if (duration && state.playedSeconds >= duration * 0.8 && !isCompleted) {
setIsCompleted(true);
setPlayed80(true);
watchedlectures80Mutation.mutate({
lectureId,
num,
is_completed: true,
lastPlayed: playedSeconds,
});
return;
}
};위 코드는 React-Player에서 영상 재생시간을 받아오기 위해 작성했는데
api로 연결하고 보니 80%가 넘어가면 영상이 재생되는 동안 계속 서버로 보내지는 문제가 발생했다.
그래서 방법을 찾던 중 useCallback을 사용하는 방법으로 해결할 수 있었다.
const sendDataToServer = useCallback(() => {
// Your logic to send data to the server
}, [/*dependencies*/]);
useEffect(() => {
sendDataToServer();
}, [sendDataToServer]);위의 예시 코드는 구성요소가 마운트될 때 useEffect 후크를 사용하여 sendDataToServer 함수를 호출하고, 함수가 한 번만 호출되도록 빈 종속성 배열([])을 useEffect 후크에 전달한다.
하지만 다시 실행해야 하는 종속성이 있는 경우 예기치 않은 동작이 발생할 수 있으므로 빈 종속성 배열을 사용할 때는 주의해야하고 useCallback 및 useEffect 후크의 종속성 배열에 필요한 모든 종속성을 포함해야 한다고 한다.
const watchedlectures80Mutation = useCallback(
useMutation(watchedlectures80, {
onSuccess: () => {
queryClient.invalidateQueries(queryKey);
},
}),
[]
);
useEffect(() => {
if (isCompleted) {
watchedlectures80Mutation.mutate({
lectureId,
num,
is_completed: true,
lastPlayed: playedSeconds,
});
}
}, [isCompleted, watchedlectures80Mutation, lectureId, num]);그래서 위의 코드로 데이터를 보내는 호출은 80퍼센트가 됐을 때 한번만 보내지게 만들었다.
🧐개선점(try)
이번 프로젝트는 react로 구현하는 첫 프로젝트여서 데이터가 많아지면서 렌더링이 느려질 때를 대비하지 않은 채 기능구현을 해서 로딩중일 때 화면이 어색하게 나오는 부분이 꽤 있었다. 다음 프로젝트에서는 로딩중 상태일 때 화면구현과 컴포넌트를 더 세부적으로 나눠서 코드의 가독성을 높여볼 생각이다.
🤔프로젝트 후기(review)
백엔드에서 데이터를 fetch 해오는 첫 프로젝트이자 리액트로 하는 첫 프로젝트여서 처음엔 막막했지만 팀원들과 협력하여 생각보다 괜찮은 결과물이 나온 것 같아서 뿌듯하다.
다음 프로젝트에서는 만들고 기능구현에 급급하기보단 리액트의 본질이나 개념에 대해서 더 이해하면서 만들어보고싶다는 생각을 했다.
