7조 과제제출 (김혜인, 조효림, 한수산, 한혜림) #1
Conversation
hyerimhan
changed the title
hyerimhan
changed the title
hyerimhan
changed the title
| useEffect(() => { | ||
| if (!JSON.parse(localStorage.getItem('VideoDetail'))) { | ||
| getVideoDetail(videoId).then((data) => { | ||
| localStorage.setItem('VideoDetail', JSON.stringify(data)); | ||
| setVideoLoading(false); | ||
| }); | ||
| } else { | ||
| setVideoLoading(false); | ||
| } | ||
|
|
||
| if (!JSON.parse(localStorage.getItem('ChannelInfo'))) { | ||
| getChannelInfo(channelId).then((data) => { | ||
| localStorage.setItem('ChannelInfo', JSON.stringify(data)); | ||
| setChannelLoading(false); | ||
| }); | ||
| } else { | ||
| setChannelLoading(false); | ||
| } | ||
|
|
||
| if (!JSON.parse(localStorage.getItem('Comment'))) { | ||
| getComment(videoId).then((data) => { | ||
| localStorage.setItem('Comment', JSON.stringify(data)); | ||
| setCommentLoading(false); | ||
| }); | ||
| } else { | ||
| setCommentLoading(false); | ||
| } | ||
|
|
||
| if (!JSON.parse(localStorage.getItem('RelationVideo'))) { | ||
| getRelationVideo(videoId).then((data) => { | ||
| localStorage.setItem('RelationVideo', JSON.stringify(data)); | ||
| setRelatedLoading(false); | ||
| }); | ||
| } else { | ||
| setRelatedLoading(false); | ||
| } | ||
| }, [channelId, videoId]); |
There was a problem hiding this comment.
해당 동작으로 인해 모든 영상에 댓글과 관련 영상이 동일하게 표기되고 있습니다.
videoId와 같은 유니크한 id값을 사용해 스토리지에 분리하여 저장하면 이를 피할수 있을것으로 보입니다.
| const { state } = useLocation(); | ||
| const channelId: string = state.channelId; |
There was a problem hiding this comment.
state로 chnnelId가 전달되지 않는 경우 발생되는 에러가 핸들링되지 않습니다.
해당 에러는 /videos/watch/:videoId로 url을 직접 입력하거나
해당 페이지 내 채널명을 클릭할 경우 발생됩니다.
getVideoDetail을 통해 들어온 데이터를 살펴보면 channelId를 살펴볼 수 있습니다.
이를 통해 데이터를 가져올 수 있도록 수정하는 방법이 보다 안정적으로 페이지를 렌더링 시킬수 있을것으로 보입니다.
|
코드 전체를 살펴보았는데 크게 코멘트를 남길 영역이 없어 1. youtube api에서 제공해주는 데이터를 직관적으로 네이밍 된 변수를 사용해서 가독성 높이기 2. localStorage 대신 firebase사용해보기 3. scss로 반응형 구현할때는 너비값을 변수로 선언해서 사용하기 |
|
추가로 제대로 이해하지 못한 부분에 대한 코멘트 입니다.
해당 부분에 대한 설명을 해주시면 추가로 리뷰 진행해드리겠습니다. |
|
목표하신 기능 내에서는 코멘트 남길게 없을 정도로 정말 잘 만드신것 같습니다. 수고 많으셨습니다! |
✨ Youtube Clone Toy Project (Demo)
프로젝트 문서는 여기에서 확인하실 수 있습니다.
🙋 Member
🔧 기술 스택
Tools
📃 설치된 라이브러리
useQuery사용REACT_APP_API_KEY로 apikey 사용📌 기능 구현 목록
1. Header
2. HOME
영상 목록
2-1. VideoCard
3. VideoDetail
4. 기타
Loading...출력😱 이슈
디테일 페이지에서 영상 가져올 떄 발생하는 에러
npm run start터미널에서 발생하는 경고 메세지GENERATE_SOURCEMAP=false추가netlify 배포 에러
사용하지 않는 코드나 import 정리하기