프론트엔드 정복하기

1. onDrop func (서버로 비디오file 보내기) const onDrop = (files)=>{ let formData = new FormData; const config={ header:{'content-type' : 'multipart/form-data'} } formData.append("file", files[0]) //위 내용들이 있어야, axios.post 할 때 오류가 생기지 않는다. Axios.post('/api/video/uploadfiles', formData, config) .then(response=>{ if(response.data.success){ }else{ alert('비디오 업로드를 실패했습니다.') } }) } 2. 받은 비디오file을 서버에 '저장' serve..

1. 업로드 페이지 만들기 컴포넌트 파일 생성 > functional component(rfce) ( React import, export default ) 2. 업로드 페이지 Route 생성 App.js에서 추가 3. 업로드 페이지 Header Tab 추가4. 폼 만들기5. 파일 올리는 zone 1) npm i react-dropzone --save 2) { ({getRootProps, getInputProps}) =>( )} 6. onChange Func TitleInput, Description, PrivateSelect, CategorySelect >> onChange 함수

useState의 활용 1) 변화를 관리할 때 ex. email, password 입력창 관리 const [ state, setState ] = useState( initialState ) const onStateHandler = function(event){ setState(event.currentTarget.value) } ***initialState : 초기값 -string 값이고, 빈값일 경우 : useState( " " ) -array 이고, 빈 값일 경우 : useState( [ ] ) useEffect의 활용 어떤 상태가 변경될 때마다 rendering 시키는 것. : 끝에 [ ] 값이 변할 때마다 렌더링함 : 끝에 [ ] 값이 비어있을 경우, 페이지 첫렌더링 시 한번만 렌더링됨. 더보기 h..

1. auth function 만들기 function (SpecificComponent, option, adminRoute = null) { 더보기 -SpecificComponent : 컴포넌트명 -option : null(아무나 출입 가능), true(로그인 유저 출입), false(로그인 유저 출입 X) -adminRoute : true(admin 계정만), null(x, =null ; 기본값이 null임) function AuthenticationCheck(props){ const dispatch=useDispatch(); useEffect(() => { dispatch(auth()).then(response=>{ //로그인하지 않은 상태 if(!response.payload.isAuth){ if(..

[ Role에 따라 진입 가능한 페이지가 다름 ] -아무나 진입 가능한 페이지 : Landing Page, About Page -로그인한 회원만 진입 : Detail Page -로그인한 회원은 진입x : Register Page, Login Page -관리자만 진입 : Adimin Page **로그인 한 유저만 댓글, 글 작성 등이 가능함 [ HOC ] : Higher Order Component : 다른 compo를 받아서 새로운 compo를 리턴함. const EnhancedComponent = higherOrderComponent( WrappedComponent ) Auth (HOC) 안에 >> Landing Page, Login Page 등을 포함시킴 back end에 > auth 정보를 보내고 ..

1. 로그아웃 button 'click' event 만들기 2. onClickHandler function 선언 const onClickHandler = () => { axios.get('/api/users/logout') .then(reponse=>{ if(reponse.data.success){ props.history.push("/login") }else{ alert('로그아웃 하는 데 실패했습니다.') } }) }