JS - JSDoc 사용하기 (자바스크립트 문서화 주석 만들기, 설명 툴팁 달기)

Overview

자바스크립트에서 사용자가 정의함 함수들에 대해 자세한 설명을 툴팁으로 표시할 수 있음
문서화 주석의 장점
- 함수의 아키텍처를 설명할 수 있음
- 함수의 사용 용도와 매개변수 정보를 쉽게 전달할 수 있음

JSDoc 이란?

자바스크립트용 API 문서 생성기
기본적으로 내장되어 있기 때문에 따로 설치할 필요가 없음
목적은 자바스크립트 응용 프로그램 또는 라이브러리의 API를 문서화하기 위함
일반적으로 문서화하는 코드 바로 앞에 배치
시작은 /** 로 시작하며 종료는 */ 로 끝냄
- 단, /* 혹은 /***, 그 이후의 별(3개 이상)은 무시되고 블록 주석으로 해석됨
작성한 코드 바로 옆에 툴팁으로 설명을 추가하여 보여주는 것

구문

/**
 * 설명
 * @param {데이터타입} 파라미터명 파라미터설명
 * @return {데이터타입} 반환값설명
 */
function test() {}

test();

문서화 주석을 추가하고 해당 함수를 호출하여 마우스를 함수명에 올려봅시다.

사용 예시

/** 난수 생성 함수
 * @param {number} type : 표시할 난수의 유형을 설정합니다.
 ** 1: 정수, 2: 실수, 3: 자연수 포함 실수, 4: 진분수, 5: 대분수
 ** 기본값 1(정수)
 * @param {number} position : 자릿수 설정 (10^n)-1
 ** 기본값 1(0~9)
 ** 이 매개변수는 정수와 분수만 해당됩니다.
 ** type에서 실수만 표시할 경우 해당 값은 무시됩니다.
 ** 예시) 1: 일의 자리, 2: 십의 자리
 * @param {number} fPosition : 소수점 표기 자릿수 설정
 ** 기본값 2(소수점 둘째 자리까지)
 ** 예시) 1: 소수점 첫째 자리, 2: 소수점 둘째 자리
 * @param {number} optPosDrop : [옵션] 특정 자릿수 버림
 ** 이 매개변수는 옵션입니다. 특정 자릿수까지의 값을 0으로 변환합니다. (버림)
 ** 예시) 1: 일의 자리 버림, 2: 십의 자리까지 버림
 * @return {string} 설정에 따른 난수 값 반환, 분수 형태 유지를 위해 문자열로 반환
 */
function getRandNumber(type, position, fPosition=2, optPosDrop=0) {
	// 코드 생략
}