﻿ 정적 분석 으로 자바 스크립트 코드 의 오류 와 코드 스 멜 ( Code Smell ) 찾 기 ② - 정적 분석 도구 로 수집 한 코드 결함 사례 와 정적 분석 도구 선택 Tip 
 2018 - 09 - 05 김강호 프로 
 지난 아티 클 에서 정적 분석 의 작동 방식 과 Rollbar 에서 발표 한 실제 오류 사례 중 일부 를 살펴보 았 고 , 이제 깃 허브 에 있 는 수천 개 의 공용 자바 스크립트 및 타입 스크립트 프로젝트 를 분석 하 여 정적 분석 도구 로 수집 한 코드 결함 사례 와 정적 분석 도구 를 선택 할 때 고려 해야 할 사항 들 을 살펴보 겠 습니다 . 
 먼저 상위 10 가지 코드 결함 은 다음 과 같 습니다 . 
 [ 그림 1 ] 상위 10 가지 코드 결함 [ 그림 2 ] 유형 별 코드 결함 
 상위 코드 결함 중 대부분 은 미 사용 변수 , 초기 화 되 지 않 은 로컬 변수 및 널 포인터 와 연관 이 있 습니다 . 
 각 경우 에 대해 자세히 살펴보 도록 하 겠 습니다 . 
 미 사용 변수 ( Unused Variables ) 
 미 사용 변수 란 선언 / 정의 만 하 고 사용 되 지 않 거나 사용 전 에 재정 의 ( 할당 ) 되 는 변수 를 말 합니다 . 개발자 는 간과 하 는 경우 가 많 지만 이 미 사용 변수 는 추후 코드 베이스 의 유지 관리 를 어렵 게 만드 는 요인 이 됩니다 . 외관상 사소 해 보이 는 문제 이 지만 원 하 지 않 는 결과 로 이어질 수 있 는데 , 아래 [ 그림 3 ] 을 보 면 3 행 에서 ' target ' 변수 에 할당 된 값 이 4 행 에서 의 재 할당 으로 무시 되 어 url 에 ' userName ' 매개 변수 가 추가 되 지 않 은 채 로 치환 됩니다 . 
 [ 그림 3 ] 미 사용 변수 의 예 
 중복 변수 와 함수 ( Duplicated Variables or Functions ) 
 변수 나 함수 를 중복 정의 하 는 경우 인데 , 이것 은 개발자 가 자바 스크립트 언어 나 새 기능 에 대해 잘 모르 고 있 다는 징후 일 수 도 있 습니다 . 자바 스크립트 는 중복 정의 에 대해 에러 를 내 지 않 고 마지막 에 정의 된 것 만 유효 하 며 함수 오버로딩 을 지원 하 지 않 는데 , 특히 오버로딩 ( overloading ) 을 지원 하 는 기존 언어 에 익숙 한 개발자 의 경우 에 혼동 하 는 경우 가 많 습니다 . 
 이 결함 으로 인해 실행 오류 가 발생 하 지 는 않 지만 중복 된 코드 는 제거 하 는 것 이 좋 은 코딩 습관 입니다 . 중복 변수 와 함수 로 인해 어떤 것 이 실제로 사용 되 는지 혼동 을 가져와 유지 보수성 ( maintainability ) 을 저하 시키 고 기술 부채 가 증가 하 기 때문 입니다 . 
 초기 화 되 지 않 은 변수 ( Uninitialized Variables ) 
 초기 화 되 지 않 은 변수 를 사용 하 는 경우 로서 ' var ' 변수 의 스코프 ( scope ) 와 함수 호이 스팅 ( hoisting ) 에 대한 이해 부족 때문 에 종종 발생 합니다 . 
 아래 [ 그림 4 ] 에서 ' html 5 ' 변수 는 2 행과 5 행 에서 선언 되 고 있 습니다 . ' var ' 로 선언 된 변수 는 함수 범위 를 갖 기 때문 에 두 변수 는 다르 게 취급 되 는 데 5 행의 변수 만 초기 화 되 고 2 행의 변수 는 초기 화 되 지 않 았 습니다 . 따라서 2 행의 변수 를 반환 하 게 되 면 호출자 ( caller ) 는 기대 한 값 을 받 지 못해 예기 치 않 은 동작 이 발생 할 수 있 습니다 . 
 [ 그림 4 ] 초기 화 되 지 않 은 변수 의 예 
 부주 의 한 널 체크 ( Incautious NULL Checking ) 
 변수 나 인자 의 널 을 체크 하 는 상황 에서 TypeError 발생 가능 성 이 높 습니다 . 특히 예외 적 인 유스 케이스 ( 코드 의 else 분기 문 ) 에서 더 그런데 이 는 개발자 가 일반 적 으로 주된 유스 케이스 ( 코드 의 if 분기 문 ) 또는 정상 적 인 인자 값 만 테스트 하 기 때문 입니다 . 이 와 같이 널 체크 를 제대로 하 지 않 으면 다양 한 유스 케이스 를 갖 는 사용자 경험 을 방해 하 게 됩니다 . 
 아래 [ 그림 5 ] 을 보 면 변수 ' match ' 가 9 행의 else 분기 문 에서 널 값 을 갖 게 되 고 12 행 에서 역참 조 되 어 TypeError 가 발생 합니다 . 결과 적 으로 사용 자 의 특정 유스 케이스 ( 에디터 에서 마크 를 하나 도 추가 하 지 않 은 상황 ) 에서 에러 가 발생 하 는 좋 지 않 은 영향 을 미칩니다 . 
 [ 그림 5 ] 부주 의 한 널 체크 의 예 
 지금 까지 코드 결함 사례 를 살펴봤 는데 , 특기 할 점 은 위 의 예시 와 통계 가 저 장소 ( repository ) 에 최종 커 밋 된 코드 로부터 나왔 다는 것 입니다 . 즉 , 개발자 자신 혹은 동료 의 코드 리뷰 를 거쳤 다는 것 이 고 사람 에 의한 코드 리뷰 로 는 코드 결함 예방 이 불 완전 함 을 의미 합니다 . 정적 분석 도구 는 감정 이나 주변 여건 에 영향 을 받 는 개발자 와 달리 일관 적 이 고 자동 화 된 방식 으로 문제 를 발견 하 고 수십만 라인 이상 의 코드 도 빠르 게 분석 하 여 이 과정 을 보완 할 수 있 습니다 . 
 또 , 데이터 흐름 분석 을 지원 하 는 도구 는 결함 원인 을 정확 하 게 파악 해 주 기 때문 에 개발자 는 빠르 고 쉽 게 결함 을 수정 할 수 있 습니다 . 
 위 [ 그림 5 ] 의 예제 에 대해 정적 분석 도구 는 다음 과 같이 널 포인터 문제 ( 널 객체 가 이 지점 에서 참조 됩니다 ) 와 그 원인 ( 9 행 에 있 는 할당 문 때문 입니다 ) 을 출력 해 줄 수 있 습니다 : 
 추가 적 으로 결함 수정 시간 에 대한 정적 분석 도구 의 통계 를 확인 해 보 겠 습니다 . 
 결함 수정 시간 은 결함 이 처음 발견 된 시점 부터 해결 ( 코드 수정 , 제거 , 선별 ) 될 때 까지 의 시간 을 평균 한 것 입니다 . 
 [ 그림 6 ] 평균 결함 수정 시간 
 개발자 들 이 느리 게 수정 하 는 결함 을 보 면 미 사용 PropTypes , 재 선언 된 ' var ' 변수 , if / else 분기 문 에서 의 동일 한 구현 과 같 은 결함 이 있 고 이런 종류 의 결함 은 상대 적 으로 개발자 가 중요 한 문제 로 간주 하 지 않 는다고 생각 할 수 있 습니다 . 하지만 개발자 의도 와 다르 게 발생 하 는 명백 한 실행 오류 나 실수 는 중요 한 문제 로 간주 되 고 , 널 포인터 , 부주 의 한 널 체크 , 잘 못 된 Strict 모드 , React 에서 의 잘못 된 이벤트 처리 ( React 는 DOM 과 다른 자체 이벤트 시스템 을 가집니다 ) , 조건문 에서 의 할당 연산자 ( 비교 연산자 를 잘못 쓴 경우 ) 같 은 결함 은 개발자 가 빠르 게 수정 하 는 것 으로 파악 됩니다 . 
 이 결과 를 보 면 정적 분석 도구 는 실행 오류 및 코드 품질 에 영향 을 미치 는 유의미 한 결함 을 발견 할 때 만 개발자 가 저항 없이 사용 한다는 사실 을 알 수 있 습니다 . 전체 자바 스크립트 프로그램 의 데이터 흐름 을 이해 하 는 정적 분석 도구 만 이 이런 결함 을 찾아냄 으로써 개발 팀 의 생산 성 을 향상 시키 고 비용 대비 만족 스러운 효과 를 낼 수 있 겠 습니다 . 
 정적 분석 도구 선택 Tip 
 지금 까지 정적 분석 도구 가 자바 스크립트 의 코드 결함 을 얼마나 효과 적 이 고 효율 적 으로 탐지 할 수 있 는지 살펴보 았 습니다 . 전체 자바 스크립트 프로그램 을 이해 할 수 있 도록 설계 된 정적 분석 도구 가 할 수 있 는 일 은 다음 과 같 습니다 . 
 단순 코드 분석 도구 가 찾 을 수 없 는 코드 결함 의 탐지 
 개발 초기 단계 에서부터 실행 오류 및 코드 품질 저하 를 예방 
 자바 스크립트 개발자 / 테스터 의 잘못 된 코딩 관행 을 바로잡 아 프로그래밍 스킬 향상 을 도움 
 개발자 가 놓칠 수 있 는 코드 결함 을 탐지 합니다 . 본 아티 클 의 예 는 최종 코드 리뷰 를 마친 코드 로부터 발췌 한 것 입니다 . 코드 리뷰 ( peer review ) 는 매우 유용 하나 사람 이 대량 의 전체 프로그램 을 쉽 게 이해 할 수 는 없 기 때문 에 기계 적 인 일관 성 과 빠른 속도 를 지닌 자동 분석 도구 로 보완 되 어야 함 
 다음 체크 리스트 에서 자바 스크립트 정적 분석 도구 의 채택 및 도입 에 대한 권장 사항 을 제시 하 였 습니다 . 
 데이터 흐름 분석 정적 분석 도구 는 자바 스크립트 모듈 내 함수 사이 나 모듈 사이 의 데이터 흐름 을 인식 해야 합니다 . 자바 스크립트 코드 베이스 가 커지 고 모듈 이 세분 화 되 면서 이런 분석 기능 이 더욱 중요 해 지 고 있 습니다 . 
 낮 은 오 탐지 율 정적 분석 도구 가 발견 한 결함 이 오 탐 ( 결함 이 아닌 코드 를 결함 으로 감지 , false alarm ) 으로 판명 될 경우 해당 도구 에 대한 개발자 의 신뢰 가 저하 됩니다 . 따라서 정적 분석 도구 는 실제 발생 가능 한 결함 을 예방 하 면서 도 오 탐지 율 을 낮 게 유지 해야 합니다 . 
 최신 기술 지원 자바 스크립트 생태 계 는 매우 빠르 게 변하 고 있 으며 적극 적 으로 최신 기술 을 수용 하 는 경향 을 보입니다 . 정적 분석 도구 는 최신 자바 스크립트 사양 과 타입 스크립트 , Flow , JSX , React , Vue . js 같이 근래 많이 사용 되 는 기술 을 지원 해야 다양 한 개발 프로젝트 에서 활용 할 수 있 습니다 . 
 개발 워크 플로우 와 통합 정적 분석 도구 는 개발자 의 잘못 을 찾아내 어 비난 하 기 위한 도구 로 자칫 인식 될 수 있 습니다 . 또 , 개발 이 많이 진척 된 단계 에서 처음 적용 하 면 수정 해야 할 결함 이 많이 나오 고 기능 회귀 ( regression ) 에 대한 부담 이 커집니다 . 따라서 에디터 플러그인 이나 명령 행 도구 ( command - line tools ) 같이 개발자 가 일상 적 인 개발 에 쉽 게 적용 하 여 도움 을 받 는 도구 로 활용 할 수 있 는 방법 이 제공 되 어야 합니다 . 
 결론 적 으로 , 자바 스크립트 를 위한 정적 분석 도구 를 개발 / 테스트 프로세스 나 제품 검수 기준 에 도입 함 으로써 웹 애플리케이션 에 대한 신뢰 성 보장 을 기대 할 수 있 습니다 . 자바 스크립트 사용 의 확대 와 함께 웹 개발 및 프로젝트 관리 팀 의 생산 성 향상 과 품질 비용 절감 에 대한 요구 가 커지 면서 정적 분석 도구 의 필요 성 도 더욱 커질 것 입니다 . 
 정적 분석 도구 를 활용 해 더 즐거운 자바 스크립트 개발 을 시작 하 시 길 바랍니다 ! 
 정적 분석 으로 자바 스크립트 코드 의 오류 와 코드 스 멜 찾 기 
 정적 분석 도구 와 자바 스크립트 코드 결함 
 정적 분석 도구 로 수집 한 코드 결함 사례 와 정적 분석 도구 선택 Tip 
 # 정적 분석 
 # 코드 품질 관리 
 # 정적 분석 도구 
 # DeepScan 
 김강호 프로 IT 테크놀로지 전문가 
 김강호 프로 는 타이젠 웹 SDK 의 개발 리더 를 역임 했 고 현재 자바 스크립트 정적 분석 솔루션 인 DeepScanTM 의 제품 관리자 를 맡 고 있 습니다 . DeepScan 서비스 ( https : / / deepscan . io ) 를 통해 개발자 와 관계 를 맺 고 싶 어 합니다 .