Chrome으로 디버깅하기, Linter, JSDoc, BDD, Polyfill, Babel
Chrome으로 디버깅하기
디버깅(debugging)
- 스크립트 내 에러를 검출해 제거하는 일련의 과정
‘Sources’ 패널
Cmd+Opt+I로 개발자 도구 열고 Sources 패널로 이동- 파일 탐색 영역, 코드 에디터 영역, 자바스크립트 디버깅 영역으로 나뉨
콘솔
명령어를 입력하고 Enter를 누르면 입력한 명령어 실행
중단점
줄 번호를 클릭해 중단점(breakpoint) 추가 가능
debugger 명령어
debugger명령어를 스크립트 내에 적으면 중단점을 설정한 것과 같은 효과를 가짐Watch: 원하는 표현식을 입력해 평가하고 결과를 보여줌Call Stack: 코드를 해당 중단점으로 안내한 실행 경로를 역순으로 표시Scope: 현재 정의된 모든 변수 출력Local: 함수의 지역 변수Global: 함수 바깥에 정의된 전역 변수
실행 추적하기
Resume: 스크립트 실행을 다시 시작Step: 다음 명령어를 실행Step over: 다음 명령어를 실행하되 함수(직접 작성한) 안으로 들어가진 않음Step into: 비동기 동작을 담당하는 코드로 진입(Step은 비동기 동작 무시)Step out: 현재 실행중인 함수의 실행을 계속하다가 함수 본문 마지막 줄에서 실행 멈춤
console.log
원하는 것을 콘솔에 출력
코딩 스타일
Linter
- 작성한 코드가 스타일 가이드를 준수하고 있는지를 자동으로 확인 가능
- 스타일 개선과 관련된 제안도 받을 수 있음
- JSLint, JSHint, ESLint, …
주석
JSDoc
1
2
3
4
5
6
7
8
9
10
/**
* x를 n번 곱한 수를 반환
*
* @param {number} x 거듭제곱할 숫자
* @param {number} n 곱할 횟수, 반드시 자연수여야 함
* @return {number} x의 n 거듭제곱을 반환
*/
function pow(x, n) {
return x ** n;
}
테스트 자동화와 Mocha
Behavior Driven Development(BDD)
- 스펙을 먼저 작성한 후 구현을 시작
- 스펙의 용도는 세 가지로, 테스트, 문서, 예시를 한데 모아놓은 개념
- 테스트: 함수가 의도하는 동작을 제대로 수행하고 있는지 보장
- 문서: 함수가 어떤 동작을 수행하고 있는지 설명
- 예시: 실제 동작하는 예시를 이용해 함수를 어떻게 사용할 수 있는지 알려줌
폴리필(Polyfill)
자바스크립트에 새로운 제안(proposal)이 정기적으로 등록·분석됨
- 가치가 있다고 판단되는 제안은 궁극적으로 명세서에 등록됨
Babel
명세서에 등록된 지 얼마 안 된 기능을 사용해 코드를 작성하면, 특정 엔진에서 지원하지 않는 경우가 있음
바벨(Babel)
- 트랜스파일러
- 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 변경
트랜스파일러(transpiler)
- 바벨은 코드를 재작성해주는 트랜스파일러 프로그램
- 개발자의 컴퓨터에서 바벨을 실행하면 기존 코드가 구 표준을 준수하는 코드로 변경됨
- 이 코드가 웹사이트 형태로 사용자에게 전달됨
- 웹팩(webpack)과 같은 모던 프로젝트 빌드 시스템은 코드가 수정될 때마다 자동으로 트랜스파일러를 동작시켜줌
폴리필(polyfill)
- 명세서에 없던 새로운 문법이나 기존에 없었던 내장함수에 대한 정의가 추가되고 이를 사용해 코드를 작성하면
- 트랜스파일러는 이를 구 표준을 준수하는 코드로 변경해줌
- 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트를 폴리필이라 부름