Illie

vscode에서 JSDoc으로 깔끔하게 주석달기 본문

ETC

vscode에서 JSDoc으로 깔끔하게 주석달기

(*ᴗ͈ˬᴗ͈)ꕤ*.゚ 2022. 10. 1. 17:21

개요

주석을 다는 방법을 통해서도 코딩 실력을 알 수 있다고 한다

 

주석을 다는 방법 중 하나인 JSDoc으로 어떻게 달아야 하는지 알아보고자 한다

 

https://youtu.be/ORmnc-hLrYs

 

본문

0. 언제쓰는가

 

함수 하나를 만들어놓고, 그 다음 함수에 대한 설명을 넣을 떄 주로 쓴다

이걸 활용하면 다른 사람이 보아도 한 눈에 들어오고 유지보수도 좋고 장점이 아주 많다

나 역시도 이걸 쓰고 있는데, 아주 얕게나마 쓰고 있다

그래서 말인데, 이번 기회에 정리하려고 한다

 

1. 함수를 만들자

 

const a = (a, b) => {
  return a + b;
};

 

2. 위에 주석을 달자

 

/** 이렇게만 치면 JSDoc comment가 뜨게 되고,  엔터를 치게 되면 다음과 같아진다

/**
 * 
 * @param {*} a 
 * @param {*} b 
 * @returns 
 */

const a = (a, b) => {
  return a + b;
};

 

3. 간단하게 추가를 해보자

 

/**
 *
 * 두 개의 값을 더합니다
 * @param { number } a 왼쪽에 있는 값
 * @param { number } b 오른쪽에 있는 값
 * @returns
 */

const add = (a, b) => {
  return a + b;
};

 

4. 함수와 주석을 모두 만들었으니, 함수를 한 번 호출해보자

 

호출하려고 다음과 같이 쓰면, 함수에 대한 설명과, 간단한 타입이 나온다

숫자를 쓰기 시작하면 아래와 같아진다

함수를 쓸 때 다음과 같이 편해진다

 

5. 진짜 편한건 지금부터

 

아래와 같이, 버튼을 나타내는 함수가 있다고 하자

const {View, Text} = require('react-native');

const button = ({type, size}) => {
  const getButtonType = {
    signIn: '로그인',
    signUp: '회원가입',
    home: '홈',
  };
  return (
    <View size={size}>
      <Text>{getButtonType[type]}</Text>
    </View>
  );
};

 

주석을 달아주면 다음과 같다

/**
 * 버튼을 만들거얌
 * @param {object} props
 * @param {'signIn' | 'signUp' | 'home'} props.type
 * @param {'sm' | 'md' | 'lg'} props.size
 * @returns
 */

 

이제 사용해면 다음과 같이 자동으로 어떤 값을 넘길지 나오게 된다

 

6. 그 외

 

@see, @description 등 정말 많은 기능이 들어있다

아래에서 참고 바란다

 

https://jsdoc.app/index.html

 

Use JSDoc: Index

Index Getting Started Getting Started with JSDoc 3 A quick-start to documenting JavaScript with JSDoc. Using namepaths with JSDoc 3 A guide to using namepaths with JSDoc 3. Command-line arguments to JSDoc About command-line arguments to JSDoc. Configuring

jsdoc.app

 

ps. index.html이라니 너무 반갑다

'ETC' 카테고리의 다른 글

[넷플릭스 추천] 플레이리스트  (0) 2022.12.03
1003. 공부  (0) 2022.10.04
0917. 공부  (0) 2022.09.18
JS. VSCODE 에서 console.log 바로 보기  (0) 2022.09.17
0904. 공부  (0) 2022.09.04
Comments