프론트엔드 정복하기

1. '좋아요' clilck 1) '좋아요' 클릭하지 않은 상황 (LikeAction = null) a) setLikeAction = liked b) setLikes = Likes + 1 c) 싫어요를 누른 상태라면 (if DislikeAction = 'disliked') 가. 싫어요 setDislikeAction = disliked 나. 싫어요 setDislikes = Dislikes + 1 2) '좋아요' 이미 클릭한 상황 (LikeAction = 'liked') a) setLikeAction = null b) setLikes = Likes - 1 2. '싫어요' click : '좋아요' 참고 >> 위 경우의 수 대로 if문을 만들고.. -server에서 참고 사항- 1- 1) : like varia..

0. Like& DisLike 버튼 만들기 : LikeDislikes 컴포넌트를 actions=[ ] 안에 '콤마'를 이용해서 넣는다. 더보기 const actions=[ , Reply to ] : Tooltip, Icon antd 이용 1. 현재 video or comment에 대한 '좋아요'('싫어요') 개수 불러오기 1) userId와 comment or video Id를 axios 하기 : let 변수에 if문으로 props에 video가 있는지 확인한 후 video Id or comment Id를 전송한다. 2) comment Id >> Single comment 에서 props.comment 불러온 정보에 _id 3) server에서 comment or videoId에 대한 like 정보를 불..

0. ReplyComment.js 컴포넌트 생성 및 템플릿 만들기 1. View { num } more comment(s) 1) num 부분을 useState로 관리 2) num 증가 함수 만들기 ( useEffect [ ] / responseTo & parentCommentId 이용 ) 더보기 const [ChildCommentNumber, setChildCommentNumber] = useState(0) useEffect(() => { let commentNumber=0; props.commentLists.map((comment, i)=>{ if(comment.responseTo === props.parentCommentId){ (parent.. 는 Comment.js의 comment._id) com..

0. Comment.js에 SingleComment Compo 생성 / SingleComment Template 생성 1. OpenReply Func : [reply to]를 열고 닫는 click toggle 기능 1) Comment(=antd type) 'actions' 속성에 'actions' array 추가 2) 'actions' array에 'key', 'onClick' 속성 추가 3) onClick Func >> OpenReply(=useState) 추가 >> setOpenReply ( ! OpenReply ) : 클릭 시, OpenReply = true, false 왔다갔다 함 4) { OpenReply && textarea form} >> OpenReply가 true일 때만 나타나도록 더보기..

0. Comment.js Template 만들기 (text editor 참고) 1. form > textarea의 onChange func : useState 사용 / textarea의 value 속성에 useState 넣기 2. form의 onSubmit func, button의 onClick func : 동일하게 'onSubmit' func 적용 : writer(useSelector 이용), postId(props 이용), content(useState 이용) 전송하기 더보기 const [commentValue, setcommentValue] = useState("") const user = useSelector(state => state.user) const videoId = props.postId..