한치 앞을 내다보지 못한 코드의 결말
웹 화면을 구성하면서 javascript를 활용하다보면, 개발자라면 누구나 금액에 대한 자릿수를 표현해야 하는 경우가 발생한다. Django Framework의 Template 에서 제공되는 기능을 사용할 수 있으면 좋지만 Template을 사용하지 못하는 경우가 간혹있다.
예를 들어 input 되는 숫자값의 Keyup, Keydown Event를 사용하여 다른 값을 계산해내는 경우가 대표적인 예이다.
이번에 다루고자하는 코드는 좀 특별한 경우이다. Django View에서 계산해낸 값에 포함된 (,)를 제거하여 javascript 숫자형으로 바꾸고 이 값을 특정 공식으로 계산을 해야 하는 과정이 필요했다.
코드는 아래와 같다.
1) id Selector를 사용해 필드에 콤마(,)가 포함된 숫자 문자열 값을 가져온다.
2) replace 함수를 사용해 콤마(,)를 공백('')으로 치환한다.
3) 숫자형으로 바꾸어 계산이 필요하므로 String 값이 *1을 하여 숫자형으로 Type Casting 한다.
굉장히 간단한 문제였기 때문에 쉽게 해결하고 다음 이슈들을 코딩하고 있었는데, 테스트를 진행하던 어느날. 100만원 이상 즉 1,000,000 콤마(,)가 2개 이상 나오는 경우 아래와 같이 Javascript NaN을 뿜어내는 상황이 발생하였다.
테스트 그리고 코드개선
분명 내가 만든 코드는 문제가 없다고 가정했기 때문에 토대를 만들었던 전임자가 만든 코드가 문제려니 넘어갔다가, 마음이 계속 찜찜해 console.log를 찍어가며 테스트를 진행했다.
테스트 결과 여지없이 100만원, 콤마(',')가 2개 나오는 순간 값이 NaN으로 바뀌어 버리는 현상이 반복되고.. 문제가 뭘까 뭘까 계속 고민을 하고 있다가 $Selector.val() 함수로 가져오는 값과 replace 결과값을 비교하는데 replace에서 문제가 있음을 발견했다.
그러다문득 자바의 정석이라는 책에서 보았던 java의 replace, replaceAll 이란 함수가 떠올랐고 설마 하는 생각에 javascript의 함수를 확인했더니.. 역시나 replace 함수는 문자열에서 확인된 첫번째 값만 치환하고 그 결과를 반환하는 것이었다.
즉 위코드는 1000,000 이라는 해괴한 값을 반환하고 이값에 *1을 하니 당연히 NaN이 리턴될수 밖에 없었다.
이를 해결하기 위해 먼저 replaceAll()함수가 있는지 확인했으나 javascript에서는 현재는 지원되지 않는듯 하였고, 그 다음 방법으로 replace 함수 첫번째 인자에 정규표현식(Javascript Regular Expression)을 활용한 방법을 찾아 아래와 같이 코드를 수정하였다.
결과는 대만족, 코드도 쉽고 동작도 빠르다.
/,/ 뒤에 gi라는 옵션에 대해 알아보자
g - 완전일치(발생할 모든 pattern에 대한 전역 검사
i - 대/소문자 무시
gi - 대/소문자 무시하고 완전 일치
정규표현식을 사용하는 방법은 new RegExp 객체 생성자를 활용하는 방법과 내가 사용한 object initializer를 사용한 방법이 있다. 자바스크립트 정규식에 대한 자세한 자료는 아래 링크 참조
결론
나는 테스트 진행하는 경우 꼭 한가지 원칙을 지키곤 한다. 내 자신이 해당 테스트 대상에 대해 트집을 잡기위해 가능한 모든 방법을 동원하는 것이다. 사실 자신이 만든 코드를 자신이 테스트 한다는 것 만큼 불확실한 것도 없다. 만든사람은 기대하는 만큼만 테스트를 진행할 수 밖에 없다.
내가 만들었으니 초기 테스트에서 이 오류가 걸려들지 않았다고 본다. 만약 내가 만든게 아니었다면 진작에 찾아냈을 것이다.
진짜 겸손이란 꾸준하게 자신을 되돌아 보는 것이라 하였는데.. 겸손하지 못했다.
테스트는 겸손한 마음으로 하자.
