프론트엔드 정복하기

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

1. html의 정상 작동을 도와줌 : React에서는 html이 아닌 JSX를 사용한다. 따라서 2개 이상의 컴포넌트 등을 그룹화 하기 위해서는 반드시 나 로 묶어줘야 한다. 2. key가 있을 수 있어, map 배열에 쓰인다. ex) 참고사이트 https://a-tothe-z.tistory.com/26