본문 바로가기
반응형

react205

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.
Node js, React 파일 관리 시스템 만들기 (3) 프로젝트 전체 링크 이전 - (2) fetch로 GET 요청하고 응답 받기 현재 - (3) 파일과 폴더 목록 불러오기 다음 - (4) 원하는 확장자의 파일만 불러오기 깃허브에서 코드 확인하기 어떤 게임회사에서 각 나라별로 게임을 출시했다고 하자. 그러면 그 게임에 대한 어떤 파일을 관리할 필요가 있다. React로 csv 편집기를 만들었으므로, csv 파일을 React/Node JS로 관리해보자. 먼저 관리할 파일은 ver 별로 나뉠 수 있다. 여기에서는 아래와 같이 연도별로 나뉜다. ver 별 폴더만 필요하고 나머지 파일은 불필요하지만 관리하다보면 쓸모없는 파일이 있을 수 있다. 연도별 파일은 아래와 같다. 연도별로 게임을 출시하는 나라가 다를 수 있다. 마찬가지로 불필요한 파일이 들어있을 수 있다. .. 2021. 7. 7.
Node js, React 파일 관리 시스템 만들기 (2) 프로젝트 전체 링크 이전 - (1) Project Setting 현재 - (2) fetch로 GET 요청하고 응답 받기 다음 - (3) 파일과 폴더 목록 불러오기 깃허브에서 코드 확인하기 GET 방식으로 웹 서버에 데이터를 요청하고 응답받을 수 있다. 먼저 server/routes 폴더 아래에 nodetest.js를 추가한다. 현재 express를 이용해서 서버를 만들고 있다. express의 Router를 이용하면 code를 분리할 수 있다. React에서 요청이 오면 connect!!를 출력하고, 응답으로 result : success를 주는 코드다. //nodetest.js const express = require("express"); const router = express.Router(); r.. 2021. 7. 3.
Node js, React 파일 관리 시스템 만들기 (1) 프로젝트 전체 링크 현재 - (1) Project Setting 다음 - (2) fetch로 GET 요청하고 응답 받기 깃허브에서 코드 확인하기 React Handsontable에 서버에서 파일을 불러오는 시스템을 만들어보자. 사용하는 node, npm ver은 아래와 같다. $ node -v v12.13.0 $ npm -v 6.12.0 handsontable-csv의 상위 폴더 React와 동일한 위치에 server 폴더를 만든다. server.js가 node의 main이다. 그리고 log를 관리할 폴더와 router를 관리할 폴더를 미리 만들어둔다. server.js에서 간단히 로그를 찍어보자. //server.js console.log("hello node js"); 실행시 출력되는 것을 알 수 있.. 2021. 7. 3.
React Handsontable로 csv 편집기 만들기 (19) 프로젝트 전체 링크 이전 - (18) FileUpload에 대한 이벤트 보완 현재 - (19) 불러오기 버튼 추가하기 깃허브에서 코드 확인하기 파일이 업로드 된 후, drag & drop 영역이 사라졌기 때문에, 다시 파일을 불러오려면 새로고침을 해야한다. 따라서 불러오기 버튼을 추가하자. 불러오기 버튼은 FileUpload에 추가하도록 하자. 따라서 App.js에서 MyTable과 FileUpload 위치를 바꾼다. input의 파일 선택 버튼을 일반 버튼에 연결하려면, input 파일을 hidden으로 만들어서 event로 연결한다. 자세한 설명은 링크를 참고하자. fileUploadFlag가 true가 되면 ( ) 안의 input이 사라지기 때문에 getElementById로 찾을 수 없다. 따라서.. 2021. 6. 29.
React Handsontable로 csv 편집기 만들기 (18) 프로젝트 전체 링크 이전 - (17) redux로 File Upload 상태 관리하기 현재 - (18) File Upload에 대한 이벤트 보완 다음 - (19) 불러오기 버튼 추가하기 깃허브에서 코드 확인하기 이전 글에서 store에 FileUploadFlag를 관리할 수 있게 되었다. 이제 아래의 문제를 보완해보자. 1) file을 불러와도 drag & drop 영역이 사라지지 않는다. 2) DOWNLOAD 버튼/displayCell은 file이 업로드 된 후에 필요하다. (즉, MyTable은 file이 업로드 된 후 보인다.) → fileUpload가 성공하면 flag를 true로 변경한다. flag가 on이면 FileUpload의 drag & drop 영역은 사라지게 한다. 그리고 MyTable.. 2021. 6. 28.
React Handsontable로 csv 편집기 만들기 (17) 프로젝트 전체 링크 이전 - (16) colWidths 옵션 / csv 파일 파싱 보완 현재 - (17) redux로 File Upload 상태 관리하기 다음 - (18) File Upload에 대한 이벤트 보완 깃허브에서 코드 확인하기 현재 csv 편집기에는 아래의 문제가 있다. 1) file을 불러와도 drag & drop 영역이 사라지지 않는다. 2) DOWNLOAD 버튼/displayCell은 file이 업로드 된 후에 필요하다. (즉, MyTable은 file이 업로드 된 후 보인다.) 이 문제들을 보완하기 위해 fileUpload의 상태를 관리하는 flag가 필요하다. FileUpload에서는 업로드 영역이 사라져야하고, MyTable이 보여야하므로 상위 component인 App.js에서 f.. 2021. 6. 26.
반응형

티스토리툴바