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

| 이슈 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]과 같이 탐색기가 뜬다..

| 구현 기능 목록 및 진행 현황 ☑ xlsx 파일을 읽어와 사용자가 입력한 로트번호를 조회 ☑ 조회한 정보 수정 기능 ☑ 고객사 정보 관리(모달): ☑ checkbox 고객사 삭제 기능 ☑ 조회 정보 페이징 ☑ Packing List 생성, 인쇄, xlsx 내보내기(모달): ☑ Packing List 생성, ☑ 인쇄, ☑ xlsx 내보내기 ☑ 스타일 작업(Bootstrap) | 이슈 npm의 print-js를 이용해 간단하게 Packing List modal을 출력하는 기능을 완성했다. 처음에는 어떤 모듈을 써야 할지 몰랐는데 조금만 검색해도 이거면 되겠구나 싶었다. https://www.npmjs.com/package/print-js print-js A tiny javascript library to..