본문 바로가기
반응형

개발/React175

React Handsontable로 csv 편집기 만들기 (13) 프로젝트 전체 링크 이전 - (12) table의 dummy 행과 열을 추가하기 현재 - (13) Download CSV 다음 - (14) handsontable methods 참고 - Download CSV 구현 (콤마, 줄바꿈, 따옴표 처리) 깃허브에서 코드 확인하기 수정한 csv를 다운로드 할 수 있도록 아래의 button을 추가하자. handsontable의 exportPlugin을 이용하면 download가 가능하다. //MyTable.js ... const csvDownLoad = () => { const exportPlugin = myTable.getPlugin("exportFile"); exportPlugin.downloadFile("csv", { filename: "MyFile" }); .. 2021. 6. 9.
React Handsontable로 csv 편집기 만들기 (12) 프로젝트 전체 링크 이전 - (11) handsontable setting options 현재 - (12) table의 dummy 행과 열을 추가하기 다음 - (13) Download CSV 깃허브에서 코드 확인하기 현재 작업하고 있는 test.csv의 행과 열의 크기가 8 x 4라서 정확히 8 x 4의 table이 생성되었다. 하지만 행과 열이 추가될 수 도 있고, 조금 넉넉하게 보이고 싶을 때가 있을 수 있다. 따라서 dummy width, height를 추가해보자. → 아래 옵션을 사용하면 더 간편히 해결할 수 있다. (minSpareRows, minSpareCols) https://handsontable.com/docs/6.2.2/Options.html#minSpareRows parsing된 cs.. 2021. 6. 8.
React Handsontable로 csv 편집기 만들기 (11) 프로젝트 전체 링크 이전 - (10) handsontable basic options 현재 - (11) handsontable setting options 다음 - (12) table의 dummy 행과 열을 추가하기 DropDown Menu dropdownMenu에 true 옵션을 주면 column에 dropdown 메뉴가 생긴다. myTable = new Handsontable(container, { data: data, colHeaders: true, rowHeaders: true, width: "50%", manualColumnResize: true, manualRowResize: true, dropdownMenu: true, licenseKey: "non-commercial-and-evaluati.. 2021. 6. 7.
React Handsontable로 csv 편집기 만들기 (10) 프로젝트 전체 링크 이전 - (9) useEffect를 이용하여 handsontable 연동하기 현재 - (10) handsontable basic options 다음 - (11) handsontable setting options handsontable에는 다양한 option이 있다. HotTable에 option을 추가할 수도 있고, Handsontable을 새로 생성할 때, 옵션을 넣어줄 수 있다. myTable = new Handsontable(container, { data: data: csvFile.csv, colHeaders: true, rowHeaders: true, licenseKey: "non-commercial-and-evaluation", }); 여기에서는 Handontable을 새.. 2021. 6. 6.
React Handsontable로 csv 편집기 만들기 (9) 프로젝트 전체 링크 이전 - (8) handontable 설치하기 현재 - (9) useEffect를 이용하여 handsontable 연동하기 다음 - (10) handsontable basic options 깃허브에서 코드 확인하기 이제 csv 파일을 불러오거나 drop할 경우, handsontable에 csv 파일이 나타나도록 해보자. App.js에서 MyTable에 csvFile로 csvObject를 넘긴다. MyTable에서 data와 HotTable을 지우고 handsontable을 import 한다. MyTable에서는 csvFile을 props로 받는다. import "handsontable/dist/handsontable.full.css"; import Handsontable from "h.. 2021. 6. 5.
React Handsontable로 csv 편집기 만들기 (8) 프로젝트 전체 링크 이전 - (7) App.js에서 파싱된 csv 파일 받기 현재 - (8) handsontable 설치하기 다음 - (9) useEffect를 이용하여 handsontable 연동하기 깃허브에서 코드 확인하기 handontable 튜토리얼을 보고 따라서 설치해보자. npm install handsontable @handsontable/react 튜토리얼의 예시를 참고하여 App.js를 아래와 같이 수정하자. // App.js import React, { useState } from "react"; //import * as lib from "./components/library"; //import FileUpload from "./components/FileUpload"; import '.. 2021. 6. 4.
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.
반응형

티스토리툴바