본문 바로가기
반응형

리액트197

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.
Node js, React 파일 관리 시스템 만들기 (13) 프로젝트 전체 링크 이전 - (12) axios post로 파일 저장하기 현재 - (13) shelljs를 이용하여 server의 파일 삭제하기 다음 - (14) multer를 이용하여 여러 개의 파일 업로드하기 깃허브에서 코드 확인하기 이제 DELETE 버튼을 누르면 server의 파일이 삭제되도록 해보자. 파일의 삭제는 Git Bash에서 rm 명령을 이용하여 삭제할 수 있으므로, node js에서 rm 명령을 내려서 파일을 지우자. 외부 명령어를 실행해주는 모듈인 shelljs를 설치한다. npm install shelljs server에 fileDelete.js를 만든다. shell.exec을 이용하여 명령을 내리면 되고, fetch를 이용해 지워야할 file의 full path를 전달한다. ex.. 2021. 7. 19.
Node js, React 파일 관리 시스템 만들기 (12) 프로젝트 전체 링크 이전 - (11) AutoSizeInput에 파일 이름 연동하기 현재 - (12) axios post로 파일 저장하기 다음 - (13) shelljs를 이용하여 server의 파일 삭제하기 깃허브에서 코드 확인하기 먼저 America_2020_01.csv를 적당히 복사해서 파일 크기를 늘려보자. 2500line 정도면 500KB 정도 된다. 이 파일을 test.csv 라는 이름으로 2020/America에 저장해보자. server에 fileSave.js를 아래와 같이 만든다. fileName은 절대 경로로 보낸다. 그리고 fileName에 저장할 content를 fileName에 저장한다. //fileSave.js const express = require("express"); con.. 2021. 7. 18.
Node js, React 파일 관리 시스템 만들기 (11) 프로젝트 전체 링크 이전 - (10) csv 파일 handsontable로 연동하기 현재 - (11) AutoSizeInput에 파일 이름 연동하기 다음 - (12) axios post로 파일 저장하기 깃허브에서 코드 확인하기 이제 편집한 csv를 server에 저장해보자. server에 저장하기 전에 파일 이름을 불러오고, 파일 이름도 수정할 수 있는 input을 먼저 구현해보자. 저장할 file의 이름이 있어야, 해당되는 파일이 서버에 없는 경우 그대로 저장하고, 서버에 있다면, 덮어 씌울 건지 확인할 수 있다. input은 파일 이름에 따라 size가 알맞게 수정되도록 하자. AutoSizeInput.js를 만들고 아래의 코드를 복사하자. //AutoSizeInput.js import React, .. 2021. 7. 17.
Node js, React 파일 관리 시스템 만들기 (9) 프로젝트 전체 링크 이전 - (8) 각 version별 country 폴더 불러오기 현재 - (9) csv 파일 목록 불러오기 다음 - (10) csv 파일 handsontable로 연동하기 깃허브에서 코드 확인하기 이제 연도별 version 정보와 country를 선택할 수 있으므로, App.js에 불러올 수 있는 파일 목록을 으로 불러오자. 2020년 America를 선택하면 아래의 3개의 csv 파일이 보여야 한다. getFileFolderList, getFolderList를 참고하여 getFileList를 만든다. 여기서도 setState를 넘겨서 file 목록을 저장한다. //nodelibrary.js ... export const getFileList = (path, fileExtension,.. 2021. 7. 16.
Node js, React 파일 관리 시스템 만들기 (7) 프로젝트 전체 링크 이전 - (6) option을 toggle button으로 변경하기 현재 - (7) Local Storage로 현재 version 기억하기 다음 - (8) 각 version별 country 폴더 불러오기 깃허브에서 코드 확인하기 현재 version을 선택하고, refresh하면 아래와 같이 선택이 해제된다. 따라서, Local Storage를 이용하여 현재 선택한 version을 refresh를 하여도 유지되도록 하자. localStorage에 set을 하려면 setItem 메서드를 이용해 값을 저장하면 된다. localStorage.setItem(KEY, value); 값을 불러오고 싶다면 getItem에 key를 넣으면, 해당하는 key에 대한 값을 얻는다. 값이 없다면 null을.. 2021. 7. 15.
Node js, React 파일 관리 시스템 만들기 (6) 프로젝트 전체 링크 이전 - (5) 최상위 폴더 목록으로 option 만들기 현재 - (6) option을 toggle button으로 변경하기 다음 - (7) Local Storage로 현재 version 기억하기 깃허브에서 코드 확인하기 아래의 option도 나쁘지는 않지만, "선택하세요"를 누르기 전까지 어떤 option들이 있는지 알 수 없다. 그리고 option을 매번 바꿀 때마다 다시 선택하세요를 눌러야한다. 따라서 아래의 toggle 버튼으로 이루어진 component를 만들어보자. MyToggles.js를 만든다. init 까지는 MyOptions와 동일하다. //MyToggles.js import React, { useState, useEffect } from "react"; import.. 2021. 7. 14.
Node js, React 파일 관리 시스템 만들기 (5) 프로젝트 전체 링크 이전 - (4) 원하는 확장자의 파일만 불러오기 현재 - (5) 최상위 폴더 목록으로 option 만들기 다음 - (6) option을 toggle button으로 변경하기 깃허브에서 코드 확인하기 가장 상위 폴더인 2020 ~ 2022 폴더를 불러와서 아래의 option에 넣어보자. MyOptions.js를 만들고 form안에 option을 만들어둔다. //MyOptions.js import React from "react"; const MyOptions = () => { return ( Version : 선택하세요. 2020 2021 2022 ); }; export default MyOptions; App.js에 MyOptions를 추가한다. //App.js import MyOpt.. 2021. 7. 14.
Node js, React 파일 관리 시스템 만들기 (4) 프로젝트 전체 링크 이전 - (3) 파일과 폴더 목록 불러오기 현재 - (4) 원하는 확장자의 파일만 불러오기 다음 - (5) 최상위 폴더 목록으로 option 만들기 깃허브에서 코드 확인하기 이제 이전 글에서 만든 폴더를 적당한 위치로 옮겨둔다. 그리고 해당 폴더의 절대 경로를 const로 선언하고, export 한다. //nodelibrary.js const MY_SERVER = `http://192.168.55.120:3002`; export const PATH = `C:\\YOUR_WINDOW_PATH\\TESTFILES`; nodeTest를 아래와 같이 변경한다. const nodeTest = () => { mnode.getFileFolderList(mnode.PATH); return; } 그러.. 2021. 7. 8.
반응형

티스토리툴바