자바스크립트 주석 사용할때 개꿀팁 - JSDoc

0. 지금까지는 주석달때 아래와 같이 썼었다

// name하고 age 넣고 실행하면 nameage 리턴하는 함수임
function hello(name, age) {
  return name + age;
}

이런 경우 메모를 해뒀으니 나중에 아 hello는 이런 함수구나 하고 알 수 있겠지만

코드의 양이 너무 많아졌으면 지금 사용하려는 함수가 뭐였더라..? 싶어 다시 주석보러 올라갔다 오기 귀찮을때

더 좋은 방법이 있다.

 

1. JSDoc 기능

주석을 쓸때 //(내용) 대신,  /**(내용)*/ 이라고 적는 것이다.

/**name하고 age 넣고 실행하면 nameage 리턴하는 함수임*/
function hello(name, age) {
  return name + age;
}

이런 식으로 사용하면 함수를 사용하기 위해 함수명을 타이핑하면

이렇게 주석에 달아뒀던 메모 내용이 나오게 된다.

 

 

기존에 달았던 //주석을 지우고, 다시  /** */ 로 묶어주는 것보단

주석 작성 이전에 함수를 작성하고, 주석 윗줄에 /**를 치고 자동완성하는게 편하다.

이 상태에서 엔터

짠

 

위와 같이 매개변수의 데이터 타입을 지정해줄 수도 있다.

디폴트인 {*}는 모든 데이터 타입을 받아올 수 있다는 뜻이다.

name: any, age: any, return 값도 any 라고 표시된다.

 

 

이를 name은 string, age는 number 타입으로 받겠다고 지정하면

함수 사용 시 전달할 인자를 어떤 타입으로 넣어야하는지 확인이 가능하다.

설명 주석과 각 파라미터, 리턴에 대한 메모도 확인 가능

아 함수의 주석 보겠다고 꼭 함수 사용문장을 쳐야만 하는건 아니고

함수명에 마우스 커서만 올려도 저 내용 나온다.

 

이 외에도

@version 으로 현재 코드의 버전을 표기해준다던가

@see 로 관련된 웹 페이지의 링크도 달아줄 수 있다.

 

@readonly 메모를 남겨서 다른 사람에게 '이 코드 내용 읽기만 하고 수정하지마'라고 할 수도 있다.

강제성은 없다. 그냥 메모다. vsc는 툴이지 os가 아니니까

 

@todo 는 앞으로 뭐 할것인지에 대한 메모

 

@deprecated 기능으로 함수가 더 이상 사용되지 않음을 표시할 수도 있다.

주석에 이 표시를 해주면 이 함수를 사용하던 곳에 가로선이 쳐지게 된다.

 

이 외에도 다양한 기능이 있으니 나중에 한번 구글링 해보도록 하자

 

 

[내용 참조]