프론트엔드 정복하기

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

0. onClick func 구독 button을 클릭하면 onSubscirbe func 실행 1. 구독 or not func : props 생성(userTo, userFrom) / 성공하면 useState 변형하기 더보기 **VideoDetail Page에 props 추가 = userFrom={localStage.getItem('userId') 속성 추가 const onSubscribe=()=>{ let subscribeVariable={userTo:props.userTo, userFrom:props.userFrom} // 이미 구독 중이라면 if(Subscribed){ Axios.post('/api/subscribe/unsubscribe', subscribeVariable) .then(response=..

0. Subscribe Model - userTo - useFrom 1. 비디오 writer의 구독자 수 1) React (props 활용 / 부모 component에 userTo 속성) 더보기 const [SubscribeNumber, setSubscribeNumber] = useState(0) useEffect(() => { let variable={userTo:props.userTo} Axios.post('/api/subscribe/subscribeNumber', variable) .then(response=>{ if(response.data.success){ setSubscribeNumber(response.data.subscriberNumber) }else{ alert('구독자 수 정보를 가져오..

0. VideoDetailPage에 SideVideo 컴포넌트 삽입하기 : VideoDtailPage에 SideVideo.js 파일 만들기 => import => 1. MongoDB에서 video.data 불러오기 : LandingPage에서 [ video.data 모두 불러왔던 useEffect를 활용 ]한다. ( '/getVideos' ) : useEffect 복붙한 후, setState만 변경해 준다. 2. map( ) 메서드로 Template에 videos 불러오기 : setSideVideo에 map( ) 더보기 const renderSideVideo=SideVideo.map ( (videos, index)=>{ var minutes = Math.floor(videos.duration / 60);..

0. VideoDetailPage.js 생성 / App.js에 Route 만들기 (동적 세그먼트에 콜론(:) 사용 // 추후 props, params.videoId로 사용) 1. MongoDB 가져오기 1) video ID를 server에 post하기 ( props.match.params.videoId , variable ) 더보기 const videoId=props.match.params.videoId; const variable={videoId:videoId}; useEffect(() => { Axios.post('/api/video/getVideoDetail', variable) .then(response=>{ if(response.data.success){ }else{ alert('비디오 정보를 ..