반응형 Node js53 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. Node JS - 윈도우에서 nvm으로 node ver 관리하기 (Window Node Version Manager) Node JS 전체 링크 윈도우에서 nvm을 이용해 여러 node ver을 관리해보자. 설치 아래 링크에서 window nvm을 설치할 수 있다. https://github.com/coreybutler/nvm-windows 해당 링크 아래의 README.md에서 Download 링크로 이동한다. nvm -v로 설치 확인하기 정상적으로 설치가 되었다면 git bash에서 nvm -v를 입력해보자. 아래와 같이 나오게 된다. $ nvm -v Running version 1.1.9. Usage: nvm arch : Show if node is running in 32 or 64 bit mode. nvm current : Display active version. nvm install [arch] : The v.. 2023. 5. 22. 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. Node JS - glob으로 파일, 폴더 목록 찾기 (Find Files and Directories with glob) Node JS 전체 링크 참고 - Express Setting - 경로를 가져와서 Mui Tree View로 파일, 폴더 뷰 만들기 glob을 이용하면 파일이나 폴더 목록을 쉽게 찾을 수 있다. 여기서는 7.2.3 ver으로 glob을 설치해보자. npm install glob@7.2.3 Express Setting을 참고해서 server.js를 다음과 같이 구축한다. const express = require("express"); const app = express(); const useGlob = require("./routes/useGlob"); app.use("/useGlob", useGlob); app.listen(3002, () => console.log("Node.js Server is ru.. 2023. 4. 28. Node JS - jest로 자바스크립트 코드 테스트 하기 (Jest, JavaScript Testing Framework) Node JS 전체 링크 참고 - Node JS + jest를 GitHub Actions로 실행하기 Jest를 이용해서 node js에 작성한 JavaScript 파일을 검증해보자. 환경설정 auto-test 폴더를 만든 후, npm init -y로 프로젝트를 만들자. $ npm init -y Wrote to D:\github\auto-test\package.json: { "name": "auto-test", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license.. 2023. 3. 22. Project SW 역량테스트 합격하기 A형 강의 오픈!! (인프런 바로가기) 파이 메뉴 만들기 (Unity)로그인 폼 만들기 (React)Hansontable로 csv 편집기 만들기 (React)파일 관리 시스템 만들기 (Node JS + React)파이 메뉴 만들기 (Pie / Radial Menu) (1) 중심 게이지 만들기(2) 버튼 만들기(3) Tooltip 만들기(4) Text 자동 크기 조절(5) 버튼 배치하기(6) 버튼에 이벤트 연결하기로그인 폼 만들기 전체 코드 - 아이디 한글 입력 불가 처리- 아이디 저장- 비밀번호 표시- Caps Lock 감지- useReducer로 Input 관리React Toast UI Editor with OAuth to Access GitHub Toast UI + GitHu.. 2022. 8. 13. Node JS 링크 A형 필수 알고리즘을 체계적으로 배우고 싶다면? (인프런 바로가기) JavaScript, React 링크 - Node JS- Socket Programming- 라이브러리Node JS Node JS 프로젝트 추가하기 (new repository) React - Node 서버 프록시 설정윈도우에서 nvm으로 node ver 관리하기 (Window Node Version Manager)PM2 ecosystem.config.js로 환경 변수 설정하기Express, Socket.IO 서버 HTTPS 설정하기 (Setting up Express / Socket.IO Server with HTTPS) Node js, React 파일 관리 시스템 만들기 jest로 자바스크립트 코드 테스트 하기 (Jest, Jav.. 2022. 8. 13. React - Node 서버 프록시 설정 Node JS 전체 링크 리액트 전체 링크 react가 Node로부터 요청을 하는 코드의 예시이다. export const MY_SERVER = `http://192.168.55.120:3002`; export const getFileFolderList = (path, fileExtension) => { fetch(`${MY_SERVER}/getFileFolderList?path=${path}&fileExtension=${fileExtension}`) .then((response) => response.json()) .then((data) => console.log(data)); } 매번 fetch 요청을 할 때마다 MY_SERVER를 입력해줘야 한다. 하지만 package.json에 아래와 같이 pro.. 2021. 10. 28. Node js, React 파일 관리 시스템 만들기 (14) 프로젝트 전체 링크 이전 - (13) shelljs를 이용하여 server의 파일 삭제하기 현재 - (14) multer를 이용하여 여러 개의 파일 업로드하기 깃허브에서 코드 확인하기 지금까지 서버에 파일을 하나씩 저장하고 삭제하였다. 이제 여러 개의 파일을 한꺼번에 업로드 하는 기능을 만들어보자. 파일을 upload 하기 위해 multer를 설치한다. npm install multer server에 fileUpload.js를 만든다. multer를 사용하기 위해 storage와 limits를 설정한다. storage에서 destination에 path를 넘겨주면 저장할 위치를 설정할 수 있다. 그리고 fileName은 이름을 설정한다. 여기서는 전달된 파일 그대로 저장한다. limits는 업로드할 파일.. 2021. 7. 20. 이전 1 2 3 4 5 6 다음 반응형
