[Javascript] 버그와 오류에 대처하는 방법

[모던자바스크립트]  버그와 오류에 대처하는 방법

 

11.1 버그에 대처하기

:버그(bug)는 프로그램에 사는 벌레라는 뜻으로 정확히는 프로그램의 오류나 결함을 뜻합니다.

:프로그램에 발생한 버그의 원일을 파악하여 제거하고 프로그램이 제대로 동작하도록 수정하는 작업을 디버그(debug)라고 합니다.

 

11.1.1 버그의 원인

1) 논리적 버그  : 프로그램의 바탕이 되는 알고리즘 자체에 오류가 있거나 알고리즘을 프로그램으로 구현하는 방법이 잘못되었을때 발생

2) 오타 : 개발자가 의도하지 않은 동작을 유발합니다. 

3) 실행 환경의 변화 : 컴퓨터, OS, 프로그래밍 언어 자체의 사양이 바뀌어 프로그램이 동작하지 않는 경우도 있습니다.

                                이러한 상황은 버그가 아니지만 프로그램이 동작하지 않는 원일을 찾아 수정해야 합니다.

 

11.1.2 Strict모드 사용

프로그램을 개발할 때 버그를 만들지 않는 가장 좋은 방법은 버그 자체가 발생하는 어려운 환경을 조성하는 것입니다.

ECMAScript 5부터 추가된 Strict 모드는 자바스크립트 언어의 사양 중에서 버그를 일으키기 쉬운 부분을 제거합니다.

이는 버그를 최대한 발생하지 않게 만들거나 버그가 발생했을 때 즉시 알릴 수 있도록 언어의 사양을 더욱 엄격하게 제한합니다.

 

Strict 모드 설정

 

See the Pen Strict 모드 설정 by jeongahlee (@jeongahlee) on CodePen.

ex )   Strict 모드가 스크립트 단위로 적용되는 예

<script>

   "user strict";  // 이 스크립트는 Strict 모드로 동작함

</script>

 

<script>

   x=2;   //이 스크립트는 비 Strict 모드로 동작함

</script>

 

Strict 모드를 설정하면 바뀌는 점

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

 

11.1.3 스타일 가이드 활용하기

: 스타일 가이드란 프로그램을 작성할 때 버그를 피하고 가독성을 높이기 위해 권장되는 코딩 규칙을 정리한 것입니다.

 

*어느 정도 프로그래밍에 익숙 해 졌을 때 읽어 보세요.

• Google JavaScript Style Guide(영문판)

구글이 제공하는 스타일 가이드 입니다. 

Closure Linter라고 하는 프로그램이며 리눅스, 맥, 윈도용이 마련되어있습니다.

설치법 : https://developers.google.com/closure/utilities/docs/linter_howto

 

 

• JavaScript style guide - MDN Docs(영문판)

모질라가 제공하는 스타일 가이드 입니다.

파이어폭스용으로 작성되어 있어서 ECMAScript의 범위를 넘어서는 애용이 몇 군데 있습니다.

 

• jQuert JavaScript Style Guide(영문판)

jQuert가 제공하는 스타일 가이드입니다.

 

• Airbnb JavaScript Style Guide(한국어)

Airbnb가 제공하는 스타일 가이드 입니다. GitHub에서 가장 인기있는 문서입니다.

영문판 : https://gitgub.com/airbnb/javascript(영문판)

 

 

 

11.1.4 console 디버깅

1. console.log로 변수값을 표시하기 (console.trace() 메서드를 사용하면 실행중인 함수의 호출 스택을 볼 수 있습니다.)
2. console.dir로 객체의 프로퍼티 목록을 표시하기

See the Pen console.trace() by jeongahlee (@jeongahlee) on CodePen.

 

11.1.5 웹 프라우저의 개발자 도구를 사용한 디버깅

디버거 기능을 ㅏ용하면 현재의 변수 값과 처리가 어떻게 진행 되고 있는지 console을 사용할 때보다 더욱 자세히 알아볼 수있습니다. 처리흐름을 제어할 수 있을 뿐만 아니라 샐행 중인 코드를 수정하는 기능도 갖추고 있어서 때로는 코드 수정없이도 디버깅 할 수 있습니다. 

 

 

 

 

 

 

 

 

 

 

11.2 예외 처리

: 예외란 오류입니다.

: 일반적으로 프로그램에서 오류가 발생하면 그 프로그램은 강제로 종료됩니다. 그러나 자바스크립트에서 발생한 오류는 굳이 프로그램을 종료하지 않아도 오류만 적절하게 처리하면 프로그램을 계속 실행 시킬 수 있습니다.

 

See the Pen [javascript] 예외처리 by jeongahlee (@jeongahlee) on CodePen.