[JS] 보안 키패드 입력 error 예외처리(ft. isNaN)

회사에서 운영하고 있는 앱의 보안 키패드를 사용하는 서비스에서 잘못된 입력 값으로 인한 오류의 트러블 슈팅을 진행했습니다.

 

서버에서 input 값 검증을 통해서 업무 오류를 뱉어내 잘못된 정보가 업데이트 되지는 않았었지만, 화면 소스(front end)에서 예외처리 미흡으로 잘못된 input 값을 서버(back end) 측으로 보내고 있음을 확인했습니다.

 

😮 문제 상황

보안 키패드의 사용하는 이벤트의 value를 처리하는 부분에서 numberic의 검증이 되지 않아서 숫자형 값만 들어와야하는 부분에 실제 string이 들어오는 경우가 발생하였습니다.

 

🛠️ 조치방법

키패드 이벤트를 통해서 들어오는 value 값을 화면에서 isNaN를 사용해 한번 더 예외처리 하였습니다.

 

기존 로직의 경우, value가 string으로 들어오는데 해당 값이 '1'...'9'(1~9) 로 들어온다는 상정하고 개발되어 있었기에 숫자형의 value가 들어온다면, 이를 예외처리하기 위해서 JS Number class의 isNaN 메서드를 사용하여 예외처리 하였습니다.

 

if (Number.isNaN(v) === false) {
	// 숫자형 v 가 들어왔음으로 처리
}

 

isNaN는 숫자형 데이터(numberic)가 아닐 경우(NaN), true를 return 합니다.

여기서 숫자형은 실제 Number 타입의 데이터와 숫자형식의 char('0' ~ '9')를 모두 포함 합니다.

 

▶ isNaN 예제

let n1 = '1'
let n2 = Number(n1) // 1

let r1 = Number.isNaN(n1)
let r2 = Number.isNaN(n2)

console.log('n1', n1)
console.log('n2', n2)

console.log('r1', r1)
console.log('r2', r2)

 

▶ 결과

> "n1" "1"
> "n2" 1
> "r1" false
> "r2" false

 

 

isNaN는  static으로 해당 메서드만 바로 사용해도 되지만, 명확하기 Number.isNaN() 로 사용하는 것이 권장 됩니다.