프론트엔드 정복하기

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..

0. Subscription 페이지 생성 / Route 만들기 / Template 만들기 : LandingPage Template 복붙하기 1. api에 userFrom(userId) 보내기 ( post방식 ) : [구독기능] 만들 때와 동일하게, userFrom:localStorage.getItem('userId') 활용 2. api에서 구독자 writer 조회 및 writer의 video 정보 client로 보내기 : push, {$in : .... } 더보기 Subscriber(=model).find({'userFrom':req.body.userFrom}) .populate('userFrom') .exec((err, subscriberInfo)=>{ if(err) return res.status(4..