본문 바로가기
반응형

react205

리액트 - useRef로 특정 위치로 포커스 이동하기 (Use Ref Hook Focus) 리액트 전체 링크 focus test 버튼을 누르면 input으로 이동해서 포커싱이 되도록 해보자. 아래의 코드로 시작한다. import { useState, useEffect } from "react"; function App() { const [temp, setTemp] = useState([]); useEffect(() => { let t = []; for (let i = 0; i ( {item}번째 p tag ))} ); } export default App; focus test 버튼을 누르면 맨 아래의 input으로 이동하도록 해보자. us.. 2023. 6. 17.
React Material - withStyles로 TreeView css 커스터마이징 하기 (Customize TreeView css Style using withStyles) 리액트 전체 링크 참고 - mui tree view css - Mui Tree View로 파일, 폴더 뷰 만들기 TreeView의 css 스타일을 변경해보자. 현재 코드는 아래와 같다. import React from "react"; import TreeView from "@mui/lab/TreeView"; import ExpandMoreIcon from "@mui/icons-material/ExpandMore"; import ChevronRightIcon from "@mui/icons-material/ChevronRight"; import TreeItem from "@mui/lab/TreeItem"; const TreeViewExample = () => { return ( console.log(e.ta.. 2023. 6. 14.
React Material - 파일 브라우저에서 폴더 이벤트 추가하기 (Folder Click Event in File Browser) 리액트 전체 링크 참고 - Mui Tree View로 파일, 폴더 뷰 만들기 - Mui Tree View로 파일, 폴더 뷰 만들기 (with Node JS) - Mui 파일, 폴더 뷰 확장 / 선택하기 - Mui로 파일 브라우저 만들기 - 파일 브라우저에서 파일 다운로드하기 - 파일 브라우저 정렬하기 - 파일 브라우저에서 폴더 이벤트 추가하기 이전 글에서 파일을 클릭하면 파일이 다운로드 되었다. 이번에는 폴더를 클릭했을 때, 파일 브라우저를 해당 폴더 내의 파일과 폴더로 변경해보자. 즉, 파일 / 폴더 뷰와 브라우저를 연동해보자. nodeId와 경로 mapping 예를 들어 D:/github/globfiles/def1 경로를 선택했다고 하자. 그러면 expaned에는 최소 4개 = [D:, D:/gith.. 2023. 6. 12.
React Material - Mui 파일, 폴더 뷰 확장 / 선택하기 (Controlled Mui Tree View) 리액트 전체 링크 참고 - mui tree view - Mui Tree View로 파일, 폴더 뷰 만들기 - Mui Tree View로 파일, 폴더 뷰 만들기 (with Node JS) mui tree view의 Controlled tree view를 적용시켜보자. 위의 예제 코드는 다음과 같다. import * as React from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import ChevronRightIcon from '@mui/icons-material/ChevronR.. 2023. 6. 12.
React Material - 파일 브라우저 정렬하기 (Sorting File Browser Items) 리액트 전체 링크 참고 - Mui Tree View로 파일, 폴더 뷰 만들기 - Mui로 파일 브라우저 만들기 - 파일 브라우저에서 파일 다운로드하기 파일 브라우저에서는 폴더가 앞에, 파일이 뒤에 배치되지만, 현재 구현한 내용은 glob으로 주어진 순서대로 배치되고 있어서 폴더가 뒤로 배치되는 경우도 발생한다. 폴더만 따로, 파일만 따로 glob을 구현해서 따로 fileUI를 만들 수 있지만, 여기에서는 간단히 경로를 보고 파일인지 폴더인지 판단한 후, 재정렬한다. 해당 경로를 "/"로 구분한 뒤, 마지막의 이름에 "."이 있다면 파일로 판단한다. 그리고 폴더와 파일을 따로 filter로 구분한 후, sort로 정렬하고 폴더가 먼저 배치되도록 setFileUI로 합쳤다. const isFile = (pa.. 2023. 6. 12.
React Material - 파일 브라우저에서 파일 다운로드하기 (React File Download with Node JS) 리액트 전체 링크 Node JS 전체 링크 참고 - glob으로 파일, 폴더 목록 찾기 - Mui Tree View로 파일, 폴더 뷰 만들기 - Mui Tree View로 파일, 폴더 뷰 만들기 (with Node JS) - Mui로 파일 브라우저 만들기 - 파일 브라우저 만들기 (with Node JS) - 파일 브라우저에서 파일 다운로드하기 - 파일 브라우저 정렬하기 - 파일 브라우저에서 폴더 이벤트 추가하기 리액트에서 노드 서버를 통해 파일을 다운로드 해보자. 여기서는 파일 브라우저에서 파일을 클릭하면 클릭한 파일이 다운로드 되도록 한다. Node JS에서 stream으로 파일 다운로드 구현하기 먼저 node에서 mime을 설치한다. $ npm install mime Node에서 downloadFi.. 2023. 6. 2.
React Material - 경로를 가져와서 파일 브라우저 만들기 (React File Browser with Mui + Node JS) 리액트 전체 링크 Node JS 전체 링크 참고 - 파일 브라우저 만들기 (React File Browser with chonky) - glob으로 파일, 폴더 목록 찾기 - Mui Tree View로 파일, 폴더 뷰 만들기 - Mui Tree View로 파일, 폴더 뷰 만들기 (with Node JS) - Mui로 파일 브라우저 만들기 - 파일 브라우저 만들기 (with Node JS) - 파일 브라우저에서 파일 다운로드하기 파일 브라우저를 로컬에서 만들었으니, Node JS 서버와 파일 브라우저를 연동해보자. 위의 폴더/파일이 React Mui로 File Browser가 나오도록 구현하였다. Node JS 연동 먼저 FileBrowser에 localData를 지우고, 다시 Node JS와 연동한다. .. 2023. 6. 2.
React Material - Mui로 파일 브라우저 만들기 (React File Browser with Mui) 리액트 전체 링크 Node JS 전체 링크 참고 - 파일 브라우저 만들기 (React File Browser with chonky) - glob으로 파일, 폴더 목록 찾기 - Mui Tree View로 파일, 폴더 뷰 만들기 - Mui Tree View로 파일, 폴더 뷰 만들기 (with Node JS) - Mui로 파일 브라우저 만들기 - 파일 브라우저 만들기 (with Node JS) - 파일 브라우저에서 파일 다운로드하기 파일, 폴더 뷰를 만들었으니, 다음과 같이 리액트 파일 브라우저(File Browser)를 만들어보자. 그리드를 이용하여 폴더 뷰 / 브라우저 분할하기 이전 글에서 만든 TreeViewExample2를 복사해서 FileBrowser로 바꾼다. 그리고 div의 style에 displ.. 2023. 6. 2.
React Material - Node JS로 경로를 가져와서 Mui Tree View로 파일, 폴더 뷰 만들기 (Mui Directory Tree View with Node JS) 리액트 전체 링크 Node JS 전체 링크 참고 - glob으로 파일, 폴더 목록 찾기 - Mui Tree View로 파일, 폴더 뷰 만들기 - Mui Tree View로 파일, 폴더 뷰 만들기 (with Node JS) - Mui로 파일 브라우저 만들기 - 파일 브라우저 만들기 (with Node JS) - 파일 브라우저에서 파일 다운로드하기 위의 링크에서 코드를 확장하여 실제 외부의 경로에 대해 Tree View를 만들어보자. 외부 경로에 대한 폴더와 파일의 목록은 아래와 같다. Node JS 설정 glob으로 파일, 폴더 목록 찾기에 이어서 코드를 수정한다. 먼저 cors를 설치한다. $ npm install cors 그리고 server.js에 cors를 적용한다. const express = re.. 2023. 5. 9.
반응형

티스토리툴바