| 이슈 역슬래시(\) 입력할 경우 처리 문제 프런트단에서 input type=file로 mdb 파일의 경로를 가져오려고 했다. 그런데 보안 정책으로 인해 경로가 "fakepath"로 가려져서 전체 경로를 가져올 수 없었다. 따라서-사용자 입장에서는 번거롭겠지만-[그림 1]과 같이 사용자가 직접 경로를 작성하는 방식으로 구현하였다. 그런데 만약 사용자가 경로를 입력할 때 슬래시(/)가 아니라 역슬래시(\)를 입력한다면 어떻게 해야 할까? 이 부분을 처리하기 위해 고민을 많이 했다. 사용자가 역슬래시를 입력할 경우 모든 역슬래시를 슬래시로 바꿔야 하는데 replaceAll을 사용해 봤으나 잘 안됐다. 결론적으로 replace와 정규식을 이용하여 해결했는데 해당 코드는 다음과 같다. async setMdbP..

| 이슈 비어있는 req.body 카스 전자저울의 mdb 파일이 있는 경로를 영속적으로 관리하기 위해 mdb 파일이 있는 경로를 mdbpath.txt에 text 형식으로 써두고자 하였다. 그래서 프런트단에서 사용자가 입력한 경로 정보를 post 방식으로 백단으로 보내고자 하였다. 그런데 [그림 1]과 같이 CORS 문제가 발생하였다. 문제는 백단인 Node.js에서 이미 프론트단에 해당하는 "http://localhost:8080"를 CORS 허용해 주었음에도 불구하고 이 같은 문제가 발생했다는 것이다. 결론부터 말하자면 프론트단에서 post로 data를 서버로 넘길 때 data의 형태가 반드시 객체이어야 한다는 것이다. 그걸 모르고 문자열 형태로 계속 넘기면서 다른 데서 원인을 찾고 있었으니 문제가 해..

| 이슈 비어있는 req.body 카스 전자저울의 mdb 파일이 있는 경로를 영속적으로 관리하기 위해 mdb 파일이 있는 경로를 mdbpath.txt에 text 형식으로 써두고자 하였다. 그래서-Node.js에서-post 방식으로 req를 받았는데 req.body가 빈 객체로 왔다. 코드와 실행결과는 다음과 같다. app.post('/mdbpath', (req, res) => { console.log(req.body) res.send('Ok') }) PS C:\Users\J\Documents\GitHub\auuto_packing_make\server> node .\papp.js 서버가 포트 3000번으로 시작되었습니다. {} req.body가 빈 객체로 오는 문제는 body-parser 모듈로 해결이 가..

| 이슈 Sweet Alert 적용 고객사 정보 삭제 기능을 담당하는 doDelete() 메서드에 [그림 1]과 같이 Sweet Alert을 적용하였다. 실수로 삭제하는 일을 방지하기 위해서 이다. 해당 코드는 다음과 같다. doDelete() { this.$swal({ title: '정말 삭제하시겠습니까?', text: '삭제된 데이터는 복원되지 않습니다.', icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', cancelButtonText: '취소', confirmButtonText: '삭제' }).then(async (result) => { if (result.isConfir..

| 이슈 엑셀 파일의 데이터를 읽어오고자 할 때 [그림 1]과 같이 처음에는 빈 객체만 출력되었다가 한번 더 실행하면 비로소 배열 값이 출력되는 문제가 있었다. 이런 현상 때문에 엑셀 파일을 불러온 직후에는 화면에 그리드가 렌더링 되지 않고 조회 버튼을 눌러야만 렌더링 되었다. 원하는 것은 엑셀 파일을 불러오면 자동으로 화면에 그리트를 렌더링 하는 것이다. 문제의 원인은 엑셀 파일을 불러오기 위해 사용한 FileReader 클래스가 비동기 방식으로 데이터를 읽어오기 때문이었다. 그래서 엑셀 파일의 데이터를 읽어오기 위해 생성한 readFile() 메서드에 Promise를 적용하여 비동기 방식을 동기 방식으로 처리되게 하였고, 그 결과 원하는 결과를 얻을 수 있었다. 엑셀 파일을 불러오는 메서드 readF..

| 이슈 CommonJS, ES6 카스 전자저울은 마이크로소프트 액세스 mdb에 데이터를 저장한다. 따라서 xlsx 모듈로는 데이터를 읽어올 수가 없다. 구글링 해보니 Node.js에서 mdb-reader라는 모듈을 이용하면 mdb 파일의 데이터를 로딩할 수 있었다. https://www.npmjs.com/package/mdb-reader mdb-reader JavaScript library to read data from Access databases. Latest version: 2.2.4, last published: 2 days ago. Start using mdb-reader in your project by running `npm i mdb-reader`. There are 2 other pr..

| 이슈 file-saver를 이용해 고객사 정보를 영속적으로 관리하는 방법을 적용했으나 데이터의 추가, 삭제가 일어날 때마다 뜨는 탐색기를 조작해야만 된다는 번거로움 때문에 고민이 많았다. 서버 없이 웹으로만 만들어 보고 싶었는데 fs 모듈을 사용하기 위해 결국 Node.js를 사용하게 되었다. Node.js에서 SQlite를 쓰는 것도 생각해 봤었는데, 로컬에서 json 파일을 다루는 정도라면 내장 모듈인 fs로도 충분할 것 같았다. Node.js와 함께 사용한 모듈은 express, fs, cors이다. Vue.js에서는 서버 통신을 하기 위해 axios 모듈을 import 했다. Vue.js component에는 아래와 같이 methods를 추가했다. async getCustomersServer(..

| 이슈 고객사 정보를 서버 없이 로컬에서 text 파일을 이용해 영속적으로 관리하면 어떨까라는 생각을 해봤었다. 구글링 끝에 사용한 기술은 file-saver 모듈을 이용하는 것이다. 코드 작성과 테스트를 반복하면서 확장자를 txt로 하지 말고 json으로 하는 게 좋겠다고 생각했다. 작동 방식은 프로젝트가 실행되면 customers.json 파일을 로드하여 고객사 정보를 가져온다. 고객사 추가(또는 삭제) 기능을 수행하면 customers 객체에 변화가 발생한다. 변화된 customers 객체는 JSON.stringify로 변환되어 file-saver를 통해 기존의 customers.json 파일을 덮어 씌워 저장된다. 그런데 매번 고객사를 추가(또는 삭제)할 때마다 [그림 1]과 같이 탐색기가 뜬다..