본문 바로가기
반응형

handsontable34

React Handsontable로 csv 편집기 만들기 (7) 프로젝트 전체 링크 이전 - (6) csv 파일 파싱하기 현재 - (7) App.js에서 파싱된 csv 파일 받기 다음 - (8) handsontable 설치하기 깃허브에서 코드 확인하기 이전 글에서 FileUpload에서 csv를 parsing하였다. csv를 parsing한 내용은 App.js에서 보여주려고 한다. parsing한 내용과 csv의 height와 width를 App.js에서 가지고 올 수 있도록 App.js를 아래와 같이 수정하자. // App.js import React, { useState } from "react"; //import * as lib from "./components/library"; import FileUpload from "./components/FileUploa.. 2021. 6. 3.
React Handsontable로 csv 편집기 만들기 (6) 프로젝트 전체 링크 이전 - (5) 선택한 경로의 파일 읽기 현재 - (6) csv 파일 파싱하기 다음 - (7) App.js에서 파싱된 csv 파일 받기 깃허브에서 코드 확인하기 아래와 같은 csv 파일이 있다. 이 파일을 메모장으로 열면 아래처럼 보인다. d,e,f,g,h가 5칸이므로 ","가 4개있고, 다른 line에서도 ,가 4개 생기게 된다. csv 파일은 보통 ","로 구분하기 때문에, parsing을 할 경우 ","로 split을 하면 된다. 하지만 우리가 parsing할 csv파일 중 "치킨, 맥주"에는 이미 ","가 있다. 이런 경우 메모장으로 열어보면 ","가 csv에 포함된 경우 ""으로 구분하고 있는 것을 알 수 있다. 실제 console.log를 확인해도 치킨, 맥주를 ""로 구분.. 2021. 6. 2.
React Handsontable로 csv 편집기 만들기 (5) 프로젝트 전체 링크 이전 - (4) Drop한 파일 읽기 현재 - (5) 선택한 경로의 파일 읽기 다음 - (6) csv 파일 파싱하기 깃허브에서 코드 확인하기 파일 선택을 누르고, 열기를 누르면 onChange가 이것을 감지할 수 있다. log가 나오는 것이 보인다. 다시 library.js에 handleUpload 함수를 만들고 event 객체에 대한 log를 찍어보자. // library.js ... export const handleUpload = (e) => { console.log(e); } // FileUpload.js ... lib.handleUpload(e)}/> 결과를 확인하면, Drag & Drop과 비슷한 객체를 확인할 수 있다. handleOnDrop에서는 e.dataTransfe.. 2021. 6. 1.
React Handsontable로 csv 편집기 만들기 (4) 프로젝트 전체 링크 이전 - (3) 선택한 경로의 파일 불러오기 현재 - (4) Drop한 파일 읽기 다음 - (5) 선택한 경로의 파일 읽기 깃허브에서 코드 확인하기 이제 drop한 file을 읽어서 console에 출력해보자. library.js에서 불필요한 로그는 지운다. 그리고 handleOnDrop에서 매개 변수 e (event 객체)가 무엇인지 출력해보자. // library.js ... export const handleOnDrop = (e, setState) => { e.preventDefault(); console.log(e); setState(false); return false; }; file을 drop하면 event 객체가 출력된다. event 객체를 펼여보면 여러 값들이 있다. 여.. 2021. 5. 31.
React Handsontable로 csv 편집기 만들기 (3) 프로젝트 전체 링크 이전 - (2) Drag & Drop 현재 - (3) 선택한 경로의 파일 불러오기 다음 - (4) Drop한 파일 읽기 깃허브에서 코드 확인하기 (2) Drag & Drop Test가 완료되었으므로 FileUpload component를 만들자. DragDropTest.js / scss를 보고 FileUpload.js / scss에 그대로 복사한다. (그리고 이름을 변경한다.) FileUpload에서는 Drag & Drop 외에도 선택한 경로의 파일을 불러올 수 있도록 을 추가하자. input type에 file을 지정하면 아래와 같은 파일 선택 버튼이 생긴다. accept 속성 지정한 속성의 파일만 불러올 수 있다. ".csv, .txt"로 지정하면 csv와 txt 파일만 불러온다... 2021. 5. 30.
React Handsontable로 csv 편집기 만들기 (2) 프로젝트 전체 링크 이전 - (1) Project Setting 현재 - (2) Drag & Drop 다음 - (3) 선택한 경로의 파일 불러오기 깃허브에서 코드 확인하기 Drag & Drop의 과정에서 sass를 이용하여 이벤트에 대한 css를 변경할 수 있다. 따라서 sass를 설치한다. yarn add node-sass css 작업이 많은 프로젝트는 아니지만 추후 조금이라도 생산성을 높이기 위해 이번 기회에 한 번 써보자. 파일을 업로드하기 전에 Drag & Drop을 구현해보자. 자바스크립트에서는 여러 Drag & Drop 이벤트를 지원한다. 1) ondrop - drop 이벤트 2) ondragover - drop이 완료된 후 3) ondragleave - drag 영역을 벗어나는 이벤트 lib.. 2021. 5. 29.
React Handsontable로 csv 편집기 만들기 (1) 프로젝트 전체 링크 참고 - Hansontable Customizing with GitHub 현재 - (1) Project Setting 다음 - (2) Drag & Drop 깃허브에서 코드 확인하기 대기업 같은 경우 보안이 까다롭기 때문에 문서를 편집하다가 NASCA에 걸릴 때가 많다. 문제는 NASCA에 걸려서는 안되는 파일을 편집 프로그램으로 저장할 경우 NASCA에 걸린다. 이런 경우 파일은 제한적이지만 EditPlus를 이용하면 NASCA 잠금을 회피할 수 있다. 하지만 csv 파일은 Excel로 보는 것이 편집하기가 편하다. 편집은 Excel이 편한데 NASCA가 문제고, EditPlus는 NASCA가 걸려있으나 편집이 힘들다. 그러므로 react / Handsontable을 이용하여 csv .. 2021. 5. 28.
반응형