Debugging in the browser
- 디버깅(debugging)은 스크립트 내 에러를 검출하고 제거하는 일련의 과정
- 모던 브라우저에는 대부분 개발자 도구 안에 디버깅 툴 사용
The "Sources" panel
- [F12] : Chrome 개발자 도구
- Sources > panel
- 파일 탐색 영역 : 페이지를 구성하는 모든 리소스(HTML, JavaScript, CSS, 이미지 파일 등)를 트리 형태로 보여줌
- 코드 에디터 영역 : 선택한 파일의 소스 코드를 보여줌, 편집 가능
- 자바 스크립트 디버깅 영역 : 디버깅 관련 기능 제공
Console
- [Esc] : 개발자 도구 콘솔 창
- 콘솔 창에 구문(statements)을 입력하고 실행하면 결과 출력
Breakpoints
- 중단점(breakpoint)은 자바 스크립트의 실행이 중단되는 코드 지점
- 실행 중지된 시점에 변수가 담고 있는 값을 확인 가능(디버깅)
- 코드 영역에서 중단하려는 코드 좌측의 줄 번호 클릭
- 마우스 오른쪽 클릭하여 조건부 중단점(conditional breakpoint) 설정 가능
The command "debugger"
- 스크립트 내 "debugger" 명령어 입력 시 중단점과 같은 기능
Pause and look around
- 디버깅 영역의 하위 패널
- Watch : 표현식을 평가하고 결과 출력
- Call Stack : 코드를 실행하는 경로 표시
- Scope : 현재 정의된 모든 변수
- Local : 함수의 지역 변수
- Global : 전역 변수
Tracing the execution
- 디버깅 영역 상단 버튼
- Resume : 스크립트 재실행 [F8]
- Step : 다음 명령어 실행 [F9]
- Step over : 다음 명령어 실행, 들어가진 않음 [F10]
- Step into : 비동기 동작을 감지하여 코드로 진입 [F11]
- Step out : 실행이 끝날 때까지 계속 진행 [Shift + F11]
- 모든 중단점 활성화/비활성화
- 예외 발생 시 코드 자동 중지 활성화/비활성화
Logging
- console.log : 콘솔 출력
- 적절히 활용하여 디버거 없이도 함수 내부 동작을 파악
Coding Style
Syntax
Curly Braces
- 중괄호는 상응하는 키워드와 같은 줄에 작성, 앞에 공백 한 칸
- 한 줄인 구문은 중괄호 생략 가능, 간단하고 짧은 경우
- 길어지는 경우 새로운 줄에 분리하여 가독성을 높여야 함
Line Length
- 가로로 길어지는 경우 여러 줄로 나눠 작성하는 것을 권장
- 여러 줄의 문자열은 백틱(`)으로 묶을 수 있음
- 일반적으로 최대 가로 길이 80자나 120자로 제한
Indents
- 가로 들여쓰기 : 스페이스 두 개 또는 네 개(tab)
- 세로 들여쓰기 : 논리 블록 사이에 코드 분리
- 변수 선언, 반복문, 리턴문 사이에 빈 줄을 넣어 코드 분리
- 세로 들여쓰기 없이 아홉 줄 이상 연속해서 쓰지 않도록 주의
Semicolons
- 모든 구문의 끝에 세미콜론 넣는 것을 권장
- 필요 없는 경우에는 자바 스크립트 엔진에 의해 자동으로 생략됨
Nesting Levels
- 중첩 레벨이 높아지지 않도록 주의
- 경우에 따라 return문을 조합하여 가독성을 높일 수 있음
Function Placement
- 코드 구조
- 헬퍼 함수(function)들을 모아 선언한 뒤 실행 코드
- [권장] 실행 코드 먼저, 함수들은 그 다음에 선언
- 실행 코드 위에서 필요한 함수를 같이 혼합하여 선언
Style Guides
- '어떻게 작성할지'에 대한 전반적인 코드 규칙을 담은 문서
- 주로 기존의 스타일 가이드를 선택하여 참조하는 편
- 대표적인 스타일 가이드
- Google
- Airbnb
- Idiomatic.JS
- Standard.JS
- etc.
Automated Linters
- // 한 줄 주석
- /.../ 여러 줄 주석
- 코드가 어떻게, 왜 동작하는지 등에 대한 설명
- 코드에서 무슨 일이 일어나는지에 대한 설명(explanatory)은 불필요
- Recipe: factor out functions
- 함수 내 코드 일부를 새로운 함수로 분리해야할 때도 있음
- self-descriptive code
- Recipe: create functions
- 코드가 길고 늘어지는 경우, 일부 기능을 함수로 만들어 분리하면 더 나은 코드 구조가 될 수 있음
- Describe the architecture
- 고차원 수준의 컴포넌트 개요, 컴포넌트 간 상호작용, 상황에 따른 흐름 제어 등에 대한 설명, 일종의 '조감도' 역할
- Document function parameters and usage
- 함수 사용 예시, 파라미터, 반환 값 정보 등
- JSDoc, WebStorm
- Why is the task solved this way?
- 해결 방법을 담고 있는 주석은 이전 실수를 방지할 수 있게 함
- Any subtle features of the code and where they are used?
- 세밀한 기능을 수행하는 코드가 있는지, 어디에 쓰이는 지에 대한 설명
Ninja code
- 코드 짧게 쓰기
- 글자 하나만 사용하기
- 약어 사용하기
- 포괄적인 명사 사용하기
- 철자가 유사한 단어 사용하기
- 동의어 사용하기
- 이름 재사용하기
- 언더스코어 사용하기
- 과장 형용사 사용하기
- 외부 변수 덮어쓰기
- 부작용이 있는 코드 작성하기
- 함수에 다양한 기능 넣기
Automated testing with Mocha
Behavior Driven Development
- BDD (Behavior Driven Development)
- 테스트(test), 문서(documentation), 예시(example)
- 명세서(specification) 또는 스펙(spec)을 통해 코드와 기능에 대한 자세한 설명과 테스트를 수행
- describe, it, assert.*, etc.
- 명세서 초안 및 기본적인 테스트 작성 > 코드 작성 > 명세서 테스트 수행 > 에러 코드 수정 및 개선 > 테스트 통과 (기능이 완성될 때까지 반복) > 개발 완료
Polyfills and transpilers
- 자바 스크립트에 대한 새로운 제안이 정기적으로 등록 및 분석되고, 가치가 있다고 판단되면 최종적으로 명세서에 등록됨
- 바벨(Babel) : 트랜스파일러(transpiler), 하위 코드 호환
"Code quality", by Ilya Kantor, 2007-2022, https://javascript.info/code-quality