[JavaScript 스터디] 3. 효율적인 개발 & 디버깅

코드를 효율적으로 작성하기

복사 붙여넣기나 수동 작업을 많이 하지 않고 코드를 작성할 수 있는, 사용할 수 있는 많은 도구를 이용하는 것.

IDE Look & Feel을 구성하고, 자주 사용하는 단축키를 숙지하며, IDE에 내장된 자동 완성과 힌트, 확장 프로그램을 세팅함으로써 자신에게 최적의 PC 환경을 구축할 수 있다.

 

문제 해결하기

많은 강의를 들었거나 오랜 기간 개발자로서 근무했어도 문제를 해결하려는데 기억이 나지 않는 상황이나 어려움에 직면하기 마련이다.

개발자는 모든 명령어를 외우는 것이 목표가 될 수 없고, 어차피 다 외울 수도 없다.

일반적인 언어의 원리와 코드 작성에 관해 어떻게 생각해야 하는지 학습해야 한다.

구글링은 필수이며, MDN에 좋은 문서가 많으므로 적극 활용한다.

 

코드 디버깅하기

코드를 작성하면 항상 오류를 마주하게 된다.

오류 메시지에는 두 가지 종류가 있다.

1. 앱이 충돌했거나 작동하지 않음
2. 논리 오류가 발생함 - 앱 충돌을 발생시키지 않고 오류 메시지도 표시되지 않으나 앱이 비정상적으로 작동됨

보통 에러 메시지를 유심히 관찰하면 운 좋게 해결되는 경우도 있으나, 그렇지 않을 때가 많다.

 

console.log() 사용하기

개발자 도구 콘솔에 정보를 출력하는 빌트인 명령어이다.

페이지의 사용자들이 개발자 도구를 열었을 때 노출될 수 있음을 유의하자.

콘솔에만 반응하고 페이지 자체에는 표시되지 않으며, 원하는 로그나 모든 변수에 대한 로깅이 가능하다.

1. 코드의 특정 사항이나 값을 살펴볼 수 있음
2. 다중 console.log() 구문을 사용해 프로그램 실행 중 어떤 변경 사항이 발생하는지 파악 가능 - 애플리케이션의 흐름을 볼 수 있는 출력

다만 더욱 복잡한 오류에는 이런 방식도 성가시다고 느낄 수 있다.

 

브라우저(Chrome) 빌트인 디버깅 도구 사용하기

https://ko.javascript.info/debugging-chrome

Chrome으로 디버깅하기

 

크롬 개발자 툴 공식 문서

https://developer.chrome.com/docs/devtools/

Chrome DevTools - Chrome Developers

 

IDE로 디버깅하기

vscode에서 다음과 같이 코드 라인 옆 빨간 점을 클릭하여 중단점 생성이 가능하다.

VSCode 공식 문서

https://code.visualstudio.com/docs

Documentation for Visual Studio Code

 

VSCode 키 바인딩

https://code.visualstudio.com/docs/getstarted/keybindings

Visual Studio Code Key Bindings

 

이렇게 디버깅하는 기능들을 능숙하게 다루는 것이 js 언어를 숙달하는 것 만큼이나 개발자들에게는 중요하다.

---

참고할 사이트

ECMAScript 표준

https://www.ecma-international.org/publications-and-standards/standards/ecma-262/

ECMA-262 - Ecma International

ECMAScript(JavaScript "토대" 언어)는 현재 개발 중이며 현재 진행 상황과 표준에 대해서는 문서화되어 있습니다.
이 문서는 결코 개발자가 알아 두거나 사용해야 할 내용이 전혀 아닙니다. 그보다는 브라우저 공급업체에게 중요한 문서죠.
그래도 후방에서 어떤 작업이 이루어지고 있는지에 대해 흥미가 있으시다면, 이 문서가 도움이 될 겁니다.