React_라이브러리 설치 및 사용법

 React 라이브러리 

설치	npx create-react-app .
npm vs npx	npm은 node package manager
	npx는 한마디로 npm에서 업그레이드된 것. 원래는 컴퓨터에 저장(global)해서 사용했는데, 굳이 다운 받지 않고도 사용 가능. node 라이브러리를 설치 or 설치하지않고 실행만 시킬수도

 

 React Router DOM 

react-router란?	클라이언트 사이드에서 주소값의 변경에 따라 페이지 or 컴포넌트의 변화를 제공하는 라이브러리
router vs router-dom	react-router :코어까지 들어있는 라이브러리 / react-router-dom : DOM이 인식할 수 있는 것들만 있음 react-router = react-router-dom(웹에 쓰이는 컴포넌트들) + react-router-native(앱)
참고 자료	React Router DOM 홈페이지 > Example 소스코딩 활용할 것 !
설치	npm install react-router-dom --save

 

 AXios 

용도	Client의 정보를 Server로 전송
설치	npm install axios --save
예시	axios.get('11')    : '11'을 서버로 보낸다. axios.post ( '/login' , '11' ) : '11'을 '/login' 엔드포인트로 전송한다.

 

 concurrently 

용도	각기 다른 디렉토리에서 명령을 시행해야 할 때, 터미널 1개에서 명령 가능하도록 함.
설치	npm install concurrently --save
사용법	package.json  -  scripts에 "dev" : "concurrently   \" npm run backend \"   \" npm run start --prefix client \"   " ** --prefix 폴더명 : 해당 폴더 내에 있는 package.json의 scripts 명령문이 실행됨

 

 ant design 

용도	CSS FRAMEWORK  for React.js
설치	https://ant.design/docs/react/introduce
	npm install antd --save
Usage	index.js   >>  import 'antd/dist/antd.css';

 

 REDUX 

용도	상태관리 라이브러리 (React_Tip 메뉴 참고)
Setting
redux	(아래 모두 npm install redux --save 방식으로 설치하면 됨)
react-redux
redux-promis	(redux middleware)
redux-thunk	(redux middleware)

 

 react-dropzone 

용도	드래그 드롭 라이브러리
설치	npm i react-dropzone --save  (client 디렉토리에 다운)
사용법	<Dropzone onDrop multiple maxSize >                         { ({getRootProps, getInputProps}) =>(                             <div style={{width:'300px', height:'240px', border:'1px solid lightgray', display:'flex',                             alignItems:'center', justifyContent:'center'}} {...getRootProps()} >                                 <input {...getInputProps()} />                                 <Icon type="plus" style={{fontSize:'3rem'}}/>                             </div>                         )} </Dropzone>

 

 multer 

용도	클라이언트 파일을 서버에 저장시킴
설치	npm install multer --save  (Server 디렉토리에 다운)
사용법	const upload=multer( {storage : 저장경로} ).single("저장파일 para") ; upload ( req,res,err => { if(err){}  return })
diskStorage 메소드 (저장경로, 파일명 등 처리)	let storage = multer.diskStorage({     destination:(req,file,cb)=>{         debug(null, "uploads/");     },     filename:(req,file,cb)=>{         cb(null, '${Date.now()}_${file.originalname}');     },     fileFilter:(req,file,cb)=>{         const ext = path.extname(file.originalname)         if(ext !== '.mp4'){             return debug(Res.statue(400).end('only mp4 is allowed'), false);         }         cb(null,true)     } })

 

 ffmpeg 

용도
설치1	'window에서 ffmpeg 설치' (검색해서 설치) https://m.blog.naver.com/chandong83/221165275268
설치2	npm install fluent-ffmeg

 

 moment 

용도	날짜 관련 작업
설치	npm i moment --save
format 사용법	https://momentjs.com/
방법 1	import moment from 'moment' <span> { moment(post.date).format( ) } </span>
방법2	import Moment from 'react-moment' <Moment format="YYYY/MM/DD"> {video.date} </Moment>