반응형 react202 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. 이전 1 ··· 20 21 22 23 다음 반응형
