dev dev

이전에 Dropzone lib 설정한 부분에 onDrop func 이어서 구현하기 // VideoUploadPage.js {({ getRootProps, getINputProps }) => ( )} // onDrop func // axios로 서버로 전송 const onDrop = (files) => { let formData = new FormData(); const config = { header: { "content-type": "multipart/form-data" }, }; formData.append("files", files); console.log("files", files); Axios.post("/api/video/uploadfiles", formData, config).then((re..

target 과 currentTarget 차이 target : 이벤트가 발생한 요소 반환 currentTarget : 이벤트를 등록해 놓은 요소 반환 (이벤트 리스너를 가진 요소) target 예시 const mydiv = (e) => { console.log("target", e.target); }; // ① 배경이 파란색 부분(div tag) 클릭 시 // ② 배경이 빨간색 부분(span tag) 클릭 시 대한민국 currentTarget 예시 const mydiv = (e) => { console.log("currentTarget", e.currentTarget); }; // ① 배경이 파란색 부분(div tag) 클릭 시 // ② 배경이 빨간색 부분(span tag) 클릭 시 대한민국 붉은색 부분..

react-dropzone 파일에 대한 HTML5 호환 드래그 앤 드롭 영역을 만드는 간단한 React hook npm install react-dropzone --save 사용 예시 // the wrapper component for the hook import React from 'react'; import Dropzone from 'react-dropzone'; console.log(acceptedFiles)}> {({getRootProps, getInputProps}) => ( Drag 'n' drop some files here, or click to select files )} [onDrop] acceptedFiles 업로드된 파일에 대한 정보가 담긴다. axios(또는 fetch)를 이용해 ..

HOC? Higher Order Component 다른 컴포넌트를 받아 새로운 컴포넌트 리턴한다. const EnhancedComponent = higherOrderComponent(WrappedComponent); => 서버에 auth 요청 후 유저의 상태 확인 후 로그인 유저인지, 비로그인 유저인지, 어드민 유저인지..등 판별 => 접근 자격이 된다면 해당 페이지로 이동하고 아니라면 다른 페이지로 보내버린다. auth logic // auth.js import React, { useEffect } from "react"; import { useDispatch, useSelector } from "react-redux"; import { auth } from "../_actions/user_action..

redux data flow : https://yessong.tistory.com/94?category=1255298 redux data flow Component > Dispatch(action) > Action > Reducer > Store > Component // Component > dispatch(action) // loginPage.js import React, { useState } from "react"; import { useDispatch } from "react-redux"; import { loginUser } from "../../../_actions/user_actions"; function LoginPage(props) { const[Email, setEmail] = use..

redux 설치 npm install redux react-redux redux-promise redux-thunk --save 설치 대상 redux react-redux redux-promise redux middleware redux-thunk redux middleware redux-promise / redux-thunk 사용하는 이유 이전 글에서는 객체로 이루어진 액션을 전달받아 스토어를 업데이트한다고 했다. 하지만 스토어에서는 객체형식의 액션을 받는 것이 아닌 promise형식, function형태로 받을 수 있다. promise, function형식으로 올 경우 redux store는 받지 못하므로 redux-promise / redux-thunk를 이용한다. redux-promise disp..

Redux? 상태 관리 라이브러리 Redux => state를 관리하는 툴 Props properties 컴포넌트 간 주고 받을 때 props이용 컴포넌트에 전달 소통방식 부모 컴포넌트에서 자식 컴포넌트로 보냄 불변성 (immutable) 변경하려면 부모에서 먼저 변경 후 보내줘야 한다. State 컴포넌트 안에서 데이터 교환 및 전달을 하려면 state 이용 state = { message: ' ', attachFile: undefined, openMenu: false, }; 변형 (mutable) 컴포넌트 안에서 관리된다. (변수 처럼) 변경이 되면 리렌더링되는 성격 특징 스토어라는 개체 내부에 상태를 담게 된다. 스토어에서 모든 상태가 일어난다. Redux data Flow? (strict unid..

Concurrently? Run multiple commands concurrently. Like npm run watch-js & npm run watch-less but better 특징 여러 개의 commands를 동시에 작동시킬 수 있게 해주는 툴 크로스 플랫폼 (windows 포함) 결과는 접두사를 사용해 쉽게 따라갈 수 있다. 설치 npm install concurrently --save 용법 별도의 명령을 따옴표로 묶어야 한다. concurrently "command1 arg" "commend2 arg" package.json "start" : "concurrently \"command1 arg\" \"command2 arg\"" 예시 --prefix client client director..