모든 일에 의문을 제기하고 그 의문을 해결하기 위해 지식을 구하고 공부

★★★★컴포넌트는 대문자로 시작해야 한다.

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

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('비디오 정보를 ..