Illie
vscode에서 JSDoc으로 깔끔하게 주석달기 본문
개요
주석을 다는 방법을 통해서도 코딩 실력을 알 수 있다고 한다
주석을 다는 방법 중 하나인 JSDoc으로 어떻게 달아야 하는지 알아보고자 한다
본문
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 등 정말 많은 기능이 들어있다
아래에서 참고 바란다
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 |