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 편집기를 만들어보자.

---

create-react-app으로 프로젝트를 생성한다. 프로젝트 이름은 handsontable-csv로 하였다.

yarn create react-app handsontable-csv

 

설치가 완료되었으면 npm run start로 실행을 해보자.

 

프로젝트 설치가 완료되었다.

---

App.css는 지우고, App.js는 함수형 component로 만들자.

// App.js
import React from 'react';

const App = () => {
  return (
    <div>
      <div className="App">
        hello react!
      </div>
    </div>
  );
};

export default App;

 

그리고 src폴더에 components 폴더를 만들고 library.js를 만들자.

 

library에서는 자바스크립트 코드만 모아두기 위해 사용한다.

// library.js
export function test() {
    console.log("library test!");
}

 

App.js에서 library를 import한다.

import * as lib으로 선언하였으므로, lib의 모든 export function을 lib.function()으로 가져올 수 있다.

// App.js
import React from 'react';
import * as lib from './components/library';

lib.test();

const App = () => {
  return (
    <div>
      <div className="App">
        hello react!
      </div>
    </div>
  );
};

export default App;

로그에 lib의 함수가 호출이 잘 되었으므로 lib.test()는 지운다.

 

프로젝트 Setting이 종료되었다.

---

다음 - (2) Drag & Drop