본문 바로가기
반응형

개발/React175

리액트 - window pm2 react 구동시 syntax error 해결방법 리액트 전체 링크 pm2 설치 완료 후 react root 폴더에서 아래의 명령어를 실행하면 웹페이지를 계속해서 실행할 수 있다. $ pm2 start npm -- start 하지만 window에서 에러가 나는 경우가 발생한다. 먼저 pm2 monit으로 모니터링을 해보자. $ pm2 monit 다시 다른 터미널로 pm2 start npm -- start 를 실행하면 아래와 같은 로그를 볼 수 있다. npm > SyntaxError: Invalid or unexpected token │ npm > at Object.compileFunction (node:vm:352:18) │ npm > at wrapSafe (node:internal/modules/cjs/loader:1026:15) │ npm > at .. 2022. 2. 19.
리액트 라우터 - URL query string 받아오기 리액트 전체 링크 리액트 라우터에서 path 뒤의 query string을 받아서 동작을 바꿔야 하는 경우가 있다. 쿼리 스트링의 예시는 아래와 같다. ? 뒤의 값들이 query string이다. localhost:3000/pick?package=2022&customer=react query string은 window.location으로 획득한다. 만들어 둔 Component에 적절한 곳의 함수에 아래의 로그를 추가해보자. window.location에서 search를 보면 URL 뒤의 값을 받은 것을 알 수 있다. 이 값을 그대로 parsing해서 써도 되지만 query-string을 import 하면 더 간단히 해결할 수 있다. import queryString from 'query-string'; .. 2022. 2. 7.
리액트 같은 이름의 파일 재업로드 (같은 파일 다시 열기) 리액트 전체 링크 참고 - React Handsontable로 csv 편집기 만들기 (5) - 선택한 파일 경로 읽기 위의 글에서 파일을 업로드할 때, 기존 파일, 또는 같은 이름의 파일을 올릴 경우, onChange는 data가 변경될 경우에만 동작하므로, 아무 event도 발생하지 않는다. lib.handleUpload(e)}/> 따라서 upload를 한 후, 파일을 얻은 후에, 초기화 하는 작업이 필요하다. export const handleUpload = (e) => { let file = e.target.files[0]; let fileReader = new FileReader(); if(file === undefined) return; /* 방어 코드 추가 */ fileReader.readAs.. 2021. 12. 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.
React Handsontable로 csv 편집기 만들기 (16) 프로젝트 전체 링크 이전 - (15) callback function으로 선택된 Cell 보여주기 / 수정하기 현재 - (16) colWidths 옵션 / csv 파일 파싱 보완 다음 - (17) redux로 File Upload 상태 관리하기 깃허브 코드 확인하기 현재 myTable의 옵션 중 colWidths는 아래와 같다. colWidths: [60, 60, 60, 60, 60, 60, 60], 이렇게 해두면, width가 배열의 길이보다 많은 경우, column의 길이는 60이 안된다. 따라서 csvFile의 width만큼 배열을 만들고 옵션으로 주면 된다. let colWidths = []; for(let i = 0; i < csvFile.width; i++) colWidths.push(60);.. 2021. 6. 14.
React Handsontable로 csv 편집기 만들기 (15) 프로젝트 전체 링크 이전 - (14) handsontable methods 현재 - (15) callback function으로 선택된 Cell 보여주기 / 수정하기 다음 - (16) colWidths 옵션 / csv 파일 파싱 보완 깃허브에서 코드 확인하기 handsontable option으로 colWidths와 wordWrap = false을 추가해보자. myTable = new Handsontable(container, { data: lib.makeTable(csvFile, 2, 3), colHeaders: true, /* column header는 보이게 설정 */ rowHeaders: true, /* row header 보이게 설정 */ colWidths: [60, 60, 60, 60, 60,.. 2021. 6. 13.
React Handsontable로 csv 편집기 만들기 (14) 프로젝트 전체 링크 이전 - (13) Download CSV 현재 - (14) handsontable methods 다음 - (15) callback function으로 선택된 Cell 보여주기 / 수정하기 이전 글에서 보았던 myTable의 출력 결과에서 각 method 들의 결과를 확인해보자. clear() table을 모두 null로 만든다. myTable.clear(); let rows = myTable.countRows(); let cols = myTable.countCols(); console.log(myTable.getData(0, 0, rows - 1, cols - 1)); countEmptyCols(), countEmptyRows() 비어있는 행/열의 수를 return 한다. consol.. 2021. 6. 11.
반응형

티스토리툴바