JSDoc
자바스크립트 코드에 주석을 달기 위한 마크업 언어
에디터, IDE에서는 작성된 내용에 따라 코드 힌팅 등의 기능 제공
마치 타입스크립트 등의 언어처럼 인자 등의 자료형 제안 - 강제되지는 않음
도구를 통해 웹 문서 등으로 출력될 수 있음
@type - 자료형 명시, @const - 상수임 명시
@param - 인자
@typedef, @property - 커스텀 객체 타입 지정
@constructor, @class - 생성자 용도로 작성된 함수, 클래스
@todo - 이후 해야 할 일 표시
@see, @link - 참조, 링크
@readonly - 읽기 전용
@deprecated - 사라지게 될 기능
문서 생성해보기
프로젝트 디렉토리에 _로 시작하는 폴더가 포함되지 않아야 함 - 위 생성기의 버그
디버깅
VS Code의 디버깅 툴
-
기본 디버깅
🔴 표시된 라인들에 Breakpoint 브레이크포인트 달기
Run and Debug 탭 열고 Node.js 모드로 디버깅 실행
Continue : 다음 브레이크포인트로 건너뜀
Step Over : 다음 라인으로 넘어감
💡 VARIABLES 섹션에서 변수들의 값 확인하기
💡 중간에 x, y의 값 수동으로 변경해보기
BREAKPOINTS 섹션에서 브레이크표인트들 비활성화, 전체삭제 해보기 -
함수로 진입하기
함수를 실행하는 라인에서 Step Into를 사용하여 함수로 진입
👉 모든 라인을 확인하려면 Step Into로 모두 진행해도 무관
Step Out을 사용하여 빠져나오기
함수 내에 브레이크포인트가 걸려 있다면 Step Into하지 않아도 진입
💡 CALL STACK 섹션에서 함수 호출마다의 스택 확인하기
💡 VARIABLES 섹션에서 각 스택에 속한 변수, this 값 확인하기
- 오류와 예외처리된 사항 확인하기
Caught Exceptions 테스트
Uncaught Exceptions 체크온하고 오류 발생시킨 뒤 테스트해보기
- 특정 값 WATCH하기
x, y, dice를 WATCH섹션에 추가하고 테스트
!!(x % 2) 등의 표현식 넣어보기
Conditional Breakpoint 걸어보기
🟡 표시된 라인에 dice < 3 조건의 Expression 브레이크포인트 걸어보기
🟢 표시된 라인에 > 3 조건의 Hit Count 브레이크포인트 걸어보기
브라우저의 디버깅 툴
라이브서버로 브라우저에서 실행
개발자 도구에서 Sources 탭 열기
안내된 단축키로 index.js 검색하여 열기
브레이크포인트들 추가한 뒤 새로고침하여 디버깅 시작
VS 코드에서 사용했던 기능들 시도해보기 - 전반적으로 유사
