favicon

Jayden { do: smite }

JSDoc 파헤치기

📦 잡동사니

하나의 키워드를 잡고 좀 편하게 정리하고 싶어 만든 잡동사니<br/>

잡동사니는 조선 후기 학자 안정복이 편찬한 잡동산이(雜同散異)에서 유래된 말이다.<br/> 잡동산이는 잡기(雜記)의 형태를 빌려온 책으로 구체적인 체계가 잡혀있지 않은 형식이다.<br/> 항목이 다소 난잡하고 내용의 구분이 혼동되어있다고 한다. 🤣

🗂️ JSDoc

📖 JSDoc이란?

JSDoc은 단어 의미처럼 자바스크립트의 문서화를 위한 도구이다. JSDoc을 사용하면 코드를 쉽게 문서화할 수 있다. 이를 통해 코드를 이해하기 쉽고, 재사용하기 쉬우며 유지보수하기 더 쉬워진다.

JSDoc을 통해서 JS를 문서화할 수 있기 때문에 TS와 유사하게 타입을 지정할 수 있다. 또한, JSDoc을 통해 문서화된 코드는 IDE에서 자동완성을 지원한다.

그렇지만 아무래도 TS보단 타입을 지정하는 데 제약도 있을 뿐 아니라 애초에 JS를 문서화하기 위한 도구이지 타입을 지정하기 위한 도구는 아니기 때문에 요즘엔 자주 사용되지는 않는다.

📖 그럼에도 왜 JSDoc?

이번에 프로젝트를 유지보수하고 기능을 수정하면서 JSDoc을 사용한 코드를 보게 되었다. 내가 생각한 것보다 JSDoc 작성만으로도 DX(개발자 경험)이 좋아지는 것 같았고, 조금 서치해보니 TS와 JSDoc을 함께 사용하는 경우도 있었다. 그래서 JSDoc에 대한 호기심이 생겨서 정리해보려고 한다.

📖 JSDoc 사용법

JSDoc의 가장 기본적인 형식은 아래와 같다.(사실상 이것만 알아도 정말 많은 도움이 된다.)

/** * name과 age를 입력받아 인사말을 반환하는 함수. * @param {string} name - 이름 * @param {number} age - 나이 * @returns {string} - 인사말 */ function sayHello(name, age) { return `안녕하세요. 저는 ${name}입니다. ${age}살입니다.`; }

위와 같이 작성하고 함수명에 마우스를 올려보면 아래와 같이 표시된다.

JSDoc - sayHello

사실 혼자 공부하거나 프로젝트할 때, 알고리즘을 풀 때는 큰 의미가 있나 싶었는데, 현업에서 마주한 거대한 코드베이스를 보면서 이게 얼마나 유용한지 알게 되었다.

오랜 시간동안 여러 개발자들의 손을 거쳐 만들어진 코드를 JSDoc 몇 줄만으로 이해할 수 있다는 게 아주아주 큰 강점이라고 생각한다.

<!-- 240122(월) 여기까지 작성 --> <!-- @type 태그로 타스처럼 쓰는 방법 작성하기 --> <!-- @typedef 태그 작성하기 -->

참고

undefined

Copyright 2023. all rights reserved by Jayden