Softeer - 현대자동차그룹 SW인재확보플랫폼

안녕하세요, Softeer 개발 인턴 소현입니다. ^_^

프로젝트를 관리함에 있어서 문서화는 특히 중요한 요소 중 하나인데요.

JSDoc은 JavaScript 개발에서 코드에 주석을 추가해 문서화하는 도구로,

이를 통해 코드의 가독성을 높이고, 협업 시 팀원 간의 이해도를 높일 수 있습니다.

이번 글에서는 JSDoc의 기본 사용법과 그 활용 사례를 살펴보겠습니다.

JSDoc이란?

JSDoc은 JavaScript 코드에 주석을 달아 코드의 동작을 문서화하는 도구입니다.

주로 함수의 매개변수, 반환값, 복잡한 로직의 설명 등을 문서화하는 데 사용됩니다.

이를 통해 코드를 작성한 사람뿐만 아니라, 다른 개발자들도 코드의 목적과 사용 방법을 쉽게 이해할 수 있게 됩니다.

JSDoc의 주석은 /**로 시작해 */로 끝나는 블록 안에 작성됩니다.

주석 내부에 다양한 태그를 사용해 코드 요소들을 설명할 수 있습니다.

아래는 두 수의 합을 계산하는 함수에 JSDoc을 적용한 예시입니다.

위 예시에서 사용된 주요 태그는 다음과 같습니다:

이러한 태그를 통해, 함수가 어떤 값을 받아 어떤 동작을 수행하는지 명확히 기술할 수 있습니다. 특히, IDE가 JSDoc을 인식하면 자동 완성 기능과 더불어 매개변수에 대한 힌트를 제공합니다.

JSDoc에는 @param, @returns 외에도 다양한 태그가 존재합니다. 주요 태그들은 다음과 같습니다:

이 외에도 클래스, 인터페이스, 모듈 등을 설명할 수 있는 태그들이 있어, 코드의 복잡도에 따라 다양한 방법으로 문서화할 수 있습니다.

이전 글에서 다루었던 throttle 함수에 JSDoc을 추가해보겠습니다. 이 함수는 주어진 시간 동안 한 번만 실행되도록 제한하여, 과도한 함수 호출을 방지하는 역할을 합니다.

이 코드는 JSDoc을 통해 throttle 함수의 매개변수, 반환값, 예외 처리에 대해 명확히 설명합니다. 개발자는 이 주석을 참고하여 함수의 사용법을 쉽게 이해할 수 있으며, 코드 작성 중 실수를 줄일 수 있습니다.

매개변수와 반환값 확인: 함수를 사용할 때 각 매개변수의 타입과 반환 값을 IDE에서 직접 확인할 수 있으며, 문서화된 설명을 통해 함수의 목적과 사용법을 쉽게 이해할 수 있습니다.
문서화된 설명: 함수의 동작 원리와 사용 방법을 명확히 설명하여, 협업하는 팀원들이 코드의 의도를 빠르게 파악할 수 있습니다.
자동 완성과 타입 힌트: JSDoc을 통해 매개변수 타입과 함수 설명이 자동 완성으로 제공되어, IDE에서 함수 입력 시, 매개변수에 대한 타입 힌트를 받을 수 있습니다. 이는 코드 작성 중 실수를 줄이고, 개발 생산성을 높이는 데 도움이 됩니다.

예를 들어, throttle 함수를 작성할 때 IDE는 매개변수와 반환값에 대한 정보를 실시간으로 제공해 줍니다.

JSDoc이 적용된 코드는 많은 IDE에서 자동 완성과 함께 사용할 수 있습니다.

이렇게 JSDOC의 기능을 이용하면 개발 효율성을 크게 높일 수 있습니다.

JSDoc은 JavaScript 코드 문서화를 위한 필수 도구입니다.

이를 활용하면 함수, 클래스, 모듈의 동작을 명확하게 설명할 수 있어, 팀원 간의 이해도를 높이고 코드 유지보수를 보다 효율적으로 할 수 있는데요.

특히 프로젝트 진행 시 함수의 사용법과 동작을 명확하게 전달하는 데 큰 도움이 됩니다.

JSDoc을 활용해 코드 문서화를 관리해 보시는건 어떨까요?

JSDoc의 다양한 기능과 더 많은 예시는 JSDoc 공식문서에서 확인할 수 있습니다.