[개인] 카스 전자 저울 연동 Packing List 자동 생성 프로그램 #13 | 연속적인 역슬래시(\)를 슬래시(/)로 변경하는 정규식

| 이슈

역슬래시(\) 입력할 경우 처리 문제

프런트단에서 input type=file로 mdb 파일의 경로를 가져오려고 했다. 그런데 보안 정책으로 인해 경로가 "fakepath"로 가려져서 전체 경로를 가져올 수 없었다. 따라서-사용자 입장에서는 번거롭겠지만-[그림 1]과 같이 사용자가 직접 경로를 작성하는 방식으로 구현하였다.

[그림 1] 모달 창을 이용해 사용자가 mdb 파일 경로를 직접 입력할 수 있다.

 

그런데 만약 사용자가 경로를 입력할 때 슬래시(/)가 아니라 역슬래시(\)를 입력한다면 어떻게 해야 할까? 이 부분을 처리하기 위해 고민을 많이 했다. 사용자가 역슬래시를 입력할 경우 모든 역슬래시를 슬래시로 바꿔야 하는데 replaceAll을 사용해 봤으나 잘 안됐다. 결론적으로 replace와 정규식을 이용하여 해결했는데 해당 코드는 다음과 같다.

async setMdbPath() {
  const mdbPath = this.mdbPathInput.replace(/(\\)+/g, '/') // \를 /로 바꾸기 위해 정규식 적용
  console.log(mdbPath)
  this.mdbPath = mdbPath
  this.mdbPathInput = mdbPath
  await this.$post('/mdbpath', { mdbPath })
  this.$swal('경로가 수정되었습니다.')
},

 

정규식 "(/(\\)+/g, '/')"는 "\"가 연속적으로 아무리 많이 입력되어도 한 개의 "/"로 변경해 준다. 예를 들어 사용자가 "c:\\\\cas\\\\IDCMAINDB.mdb"를 입력하더라도 저장될 때는 "c:/cas/IDCMAINDB.mdb"로 저장되어 자바스크립트에서 읽을 수 있는 경로가 된다.

 

| 다음 단계

테이블의 중량을-오름차순/내림차순-정렬할 수 있다면 더 쓸만할 것 같았다. 그래서 테이블에 정렬 기능을 추가하고자 한다.