JavaScript ) 버그 잡아내기

버그의 원인

• 프로그램에서 발생하는 버그의 원인은 크게 3 가지로 나눌 수 있습니다.

1. 논리적인 버그

• 프로그램은 문제 해결을 위한 알고리즘을 구현한 것입니다. 논리적인 버그는 프로그램을 구성하는 알고리즘 자체에 오류가 있거나 해당 알고리즘을 구현하는 방법이 잘못되었을 때에 발생합니다.
• 프로그래밍 언어의 문법을 충분히 이해하지 못한 경우도 포함됩니다.

2. 오타

• 개발자가 의도하지 않은 동작을 의미합니다.
• 작은 오타도 프로그램에 치명적인 오류를 발생시킬 수 있습니다.
• if(a==b) 를 if(a=b) 로 작성했을 경우 오류는 발생하진 않지만 전혀 다른 목적의 동작을 하게 됩니다..

3. 실행 환경의 변화

• 컴퓨터, OS, 프로그래밍 언어 자체의 사양이 바뀌어 프로그램이 동작하지 않는 경우도 있습니다.
• 이러한 상황을 버그라고 하긴 어렵지만 프로그램이 동작하지 않는 원인을 찾아 수정해야 합니다.

버그, 어떻게 잡나요?

Strict 모드 사용

Strict 모드가 뭔가요?

• 개발 과정에 있어 버그를 만들지 않는 가장 좋은 방법은 버그 자체가 발생하기 어려운 환경을 조성하는 것입니다.
• 버그가 발생하기 어려운 환경이라면 그만큼 프로그램의 필수적인 부분을 만드는데 걸리는 시간을 단축시킬 수 있고, 결과적으로 더 높은 품질의 프로그램을 만들 수 있게 됩니다.
• ES5 부터 추가된 Strict 모드는 자바스크립트 언어의 사양 중에서 버그를 일으키기 쉬운 부분을 제거합니다. 이는 버그가 발생했을 때 즉시 알 수 있도록 언어의 문법이나 사양을 더욱 엄격하게 제한합니다.
• Strict 모드로 프로그램을 실행하면 일부 기능을 사용할 수 없도록 제한되기 때문에, 일부 프로그램은 오류가 발생하여 실행되지 않을 수 있습니다.
• Strict 모드로 자바스크립트 프로그램을 실행하면 자바스크립트 엔진이 내부적으로 최적화 처리에 장애가 되는 부분을 제거하기 때문에, 몇몇 프로그램은 Strict 모드로 실행했을 때 더 빠른 속도로 실행되는 경우가 있습니다.

Strict 모드 설정

• 프로그램을 Strict 모드로 실행하려면 스크립트의 모든 문장 앞 또는 함수의 모든 문장 앞에 "use strict"; 를 입력합니다.
• 예시

function f(x){
  "use strict";
  y = x;
}
f(2);   // => Uncaught ReferenceError : y is not defined (...)

• 큰 따옴표 대신 작은 따옴표도 사용 가능합니다.
• 스크립트의 첫머리에 입력하면 해당 스크립트는 Strict 모드로 동작하게 되고, 위처럼 함수의 첫머리에 입력하면 해당 함수가 Strict 모드로 동작하게 됩니다. ( 해당 함수에 중첩된 함수도 Strict 모드로 실행됩니다.)

Strict 모드를 사용할 때 바뀌는 점

• Strict 모드에서의 주요 제약사항

1. 변수는 모두 선언해야 합니다. 선언되지 않은 변수, 함수, 함수의 인자에 값을 대입하면 ReferenceError가 발생합니다.
2. 함수를 직접 호출하는 경우, 함수 안의 this 값이 undefined 가 됩니다.
   비 Strict 모드에서는 함수 안의 this 값이 전역 객체의 참조가 됩니다.
3. with 문은 사용할 수 없습니다.
4. 함수 정의문에 같은 이름의 인수가 있으면 문법 오류가 발생합니다.
5. 객체에 같은 이름의 프로퍼티가 있으면 문법 오류가 발생합니다.
6. NaN, Infinity, undefined 를 표기하면 TypeError 가 발생합니다.
7. arguments[i] 는 호출되었을 때의 인수 값을 유지합니다.
   비 Strict 모드에서는 arguments[i] 가 인자의 별명이기 때문에 한쪽을 수정하면 다른 쪽도 바뀌게 됩니다.
8. arguments.callee 를 읽을 수 없습니다. 읽기를 시도하면 TypeError가 발생하게 됩니다.
9. eval 로 실행한 코드는 호출자의 유효 범위 안에 새로운 변수나 함수를 선언할 수 없습니다.

스타일 가이드 활용하기

• 스타일 가이드란 프로그램을 작성할 때 버그를 피하고 가독성을 높이기 위해 권장되는 코딩 규칙을 정리한 것입니다.
• 여러 사람과의 협업을 해야하는 경우라면 스타일 가이드를 참고하여 전반적인 코딩 규칙을 정해두는 것이 좋습니다.

대표적인 스타일 가이드

• Google JavaScript Style Guide

• JavaScript style guide - MDN Docs

• Airbnb JavaScript Style Guide

console 디버깅

• 프로그램의 특정 위치에서 console 객체의 메서드를 실행하면 그 시점의 프로그램 상태를 확인할 수 있습니다.
  확인 결과에 따라 프로그램이 의도한 대로 동작하는지 확인하고 문제의 원인을 추적할 수 있습니다.
• console.log 로 변수 값을 표시하기
• console.dir 로 객체의 프로퍼티 목록을 표시하기
• console.trace 로 실행 중인 함수의 호출 스택을 표시하기
• 예시

function f(){
  function g(){
    function h(){
      console.trace();
    }
    h();
  }
  g();
}
f();

• 위 코드를 실행하면 함수가 어디에서부터 호출되었는지 콘솔에서 다음과 같이 확인할 수 있습니다.
  

웹 브라우저의 개발자 도구 활용하기

• 디버거 기능을 사용하면 현재의 변수 값과 처리가 어떻게 진행되고 있는지 console 을 사용할 때보다 더 자세하게 알아볼 수 있습니다.
• 처리 흐름을 제어할 수 있을 ㅃ분만 아니라 실행 중인 코드를 수정하는 기능도 갖추고 있어 때로는 코드 수정 없이도 디버깅이 가능합니다.
• 크롬, 파이어폭스, 사파리, 오페라, 엣지 등 다양한 웹브라우저에서 개발자도구를 지원하고 있습니다.

---

참고 도서 : 모던 자바스크립트 입문