PromleeBlog
sitemap
aboutMe

posting thumbnail
협업을 위한 Javascript/Typescript 주석 작성하기 (JSDoc)
Writing Javascript/Typescript comments for collaboration (JSDoc)

📅

🚀

들어가기 전에 🔗

주석의 중요성 🔗

소프트웨어 개발을 할 때 코드의 가독성과 유지보수성은 매우 중요합니다. 특히, 여러 명이 함께 개발하는 프로젝트에서는 코드만으로는 의도를 파악하기 어려운 경우가 많습니다.
최근 현업에서 컨벤션을 정해야 할 역할을 맡고 있는데 이 때 어떻게 하면 서로 이해하기 쉬운 코드를 작성할 수 있을지 고민하게 되었습니다. 그러다 npm 모듈들의 구성 파일을 뜯어보다 절반 이상이 주석으로 이루어져 있는 파일을 심심치 않게 볼 수 있는데 이 주석들이 코드를 이해하는데 큰 도움이 된다는 것을 깨달았습니다. 그래서 이번 글에서는 JavaScript와 TypeScript에서 주석을 작성하는 방법과 협업을 위한 주석 작성 방법에 대해 알아보는 시간을 가져보려고 합니다.

JSDoc이란? 🔗

JSDoc은 JavaScript 코드에 주석을 작성하는 방법 중 하나로, 코드의 의미와 사용 방법을 설명하는 데 사용됩니다. JSDoc 주석을 작성하면 IDE(통합 개발 환경)에서 코드의 정보를 추출하여 보여주기 때문에 코드를 이해하는 데 도움이 됩니다. 또한 JSDoc 주석을 활용하면 API 문서를 자동으로 생성할 수 있어서 개발자들이 API를 쉽게 이해할 수 있습니다.
다음 이미지는 Next.js의 Link 컴포넌트에 마우스를 올렸을 때 IDE(VSCode)에서 보여지는 정보입니다. 이 정보는 JSDoc 주석을 통해 제공되는 것입니다. 자세히 보면 필요한 파라미터 정보, 반환값 정보 등이 제공되는 것을 확인할 수 있습니다. 심지어 줄글로 이루어진 설명도 확인할 수 있습니다.
image
이처럼 JavaScript와 TypeScript에서는 JSDoc을 활용하여 주석을 표준화할 수 있습니다. 이를 통해 협업하는 개발자들이 코드의 목적과 사용 방법을 쉽게 이해할 수 있습니다.
이 글에서는
JSDoc의 기본 문법과 활용법
을 설명하고,
협업을 위한 효과적인 주석 작성 방법
에 대해 살펴보겠습니다.

🚀

1. JSDoc 기본 문법 🔗

JSDoc은 JavaScript와 TypeScript에서 사용하는 주석 스타일로, 코드의 의미를 명확히 전달하기 위해 사용됩니다. 주석을 작성하는 기본 형식은 다음과 같습니다.
/** @type {string} */
var win;
위 코드에서 /** ... */ 형식의 주석은 JSDoc 주석을 나타냅니다. 함수의 JSDoc 주석은 다음과 같은 형식으로 작성할 수 있습니다.
/**
* 책의 정보를 나타내는 함수입니다.
* @constructor
* @param {string} title - 책의 제목
* @param {string} author - 책의 저자
*/
function Book(title: string, author: string) {
}
  1. /** ... */ 형식의 주석 블록을 사용합니다.
  2. 첫 번째 줄에는 함수의 목적을 간략하게 설명합니다.
  3. @param 태그를 사용하여 매개변수(parameter) 의 타입과 역할을 기술합니다.
  4. @returns 태그를 사용하여 반환값(return value) 의 타입과 의미를 설명합니다.
image
이러한 방식으로 주석을 작성하면, IDE(통합 개발 환경)에서 자동으로 타입 정보와 설명을 표시해 주어 개발자들이 코드를 이해하는 데 큰 도움이 됩니다.

🚀

2. JSDoc의 추가 태그 🔗

JSDoc에서는 다양한 태그를 지원합니다. 추가적으로 자주 사용할 만한 태그들을 알아보겠습니다.

2.1. @example - 사용 예시 제공 🔗

/**
 * 숫자를 세제곱합니다.
 * @param {number} x - 입력 숫자
 * @returns {number} x의 세제곱 값
 * @example
 * cube(3); // 27
 */
function cube(x: number): number {
  return x * x * x;
}

2.2. @deprecated - 더 이상 사용되지 않는 함수 표시 🔗

/**
 * 이 함수는 더 이상 사용되지 않습니다. 대신 newMethod를 사용하세요.
 * @deprecated
 */
function oldMethod() {
  console.log("이 메서드는 더 이상 사용되지 않습니다.");
}

2.3. @throws - 예외 처리 설명 🔗

/**
 * 숫자를 나눕니다.
 * @param {number} x - 나눌 숫자
 * @param {number} y - 나누는 숫자
 * @returns {number} x를 y로 나눈 값
 * @throws {DivideByZero} y가 0인 경우
 */
function divide(x: number, y: number): number {
	if (y === 0) {
		throw new Error("y는 0이 될 수 없습니다.");
	}
	return x / y;
}

2.4. @async - 비동기 함수 표시 🔗

/**
 * 비동기적으로 사용자 정보를 가져옵니다.
 * @param {string} userId - 사용자 ID
 * @returns {Promise<User>} 사용자 정보
 * @async
 */
async function fetchUser(userId: string): Promise<User> {
	const response = await fetch(`/users/${userId}`);
	return response.json();
}

2.5. @typedef - 타입 정의 🔗

/**
 * 숫자 또는 숫자가 포함된 문자열입니다.
 * @typedef {(number|string)} NumberLike
 */
 
/**
 * 매직넘버를 설정합니다.
 * @param {NumberLike} x - 매직넘버.
 */
 function setMagicNumber(x: NumberLike) {
}

🚀

결론 🔗

주석을 잘 작성하는 것은 단순한 습관이 아니라, 더 나은 개발 문화를 만들기 위한 필수적인 요소입니다.

더 생각해 보기 🔗

참고 🔗