home강의 홈으로
Section 15. 코드파일 다루기
Lesson 4. JSDoc

⭐ JSDoc

  • 자바스크립트 코드에 주석을 달기 위한 🔗 마크업 언어
  • 에디터, IDE에서는 작성된 내용에 따라 코드 힌팅 등의 기능 제공
  • 👉 마치 타입스크립트 등의 언어처럼 인자 등의 자료형 제안 - 강제되지는 않음
  • 도구를 통해 웹 문서 등으로 출력될 수 있음
  • 📔 공식 문서 사이트 보기




사용해보기

  • 실습할 폴더를 열고 임의의 .js 파일을 생성
  • /** 입력해보고 엔터 여러 번 입력해보기



기본 주석

const TITLE = 'JSDoc 사용하기'; /** 코드의 제목으로 사용될 문자열 */
  • 이후 라인에서 TITLE 상수 입력해보기

@type - 자료형 명시, @const - 상수임 명시

const PI = '3.14'; /** * 원주율 * @type {number} * @const */
  • 또는 아래와 같이
/** * 원주율 * @const {number} */

@param - 인자

const add = (x, y) => x + y; /** * * @param {number} x * @param {number} y * @returns {number} 두 수의 합 */
  • 함수 실행문 작성하며 인자 넣어볼 것


@typedef, @property - 커스텀 객체 타입 지정

/** * @typedef {Object} PersonObj 사람 객체 * @property {string} name 이름 * @property {number} age 나이 * @property {boolean} married 기혼여부 */ /** * * @param {string} name 이름 * @param {number} age 나이 * @param {boolean} married 기혼여부 * @returns {PersonObj} */ function getPersonObj (name, age, married) { return {name, age, married} } // 아래와 같이 정의 후 person1 사용해 볼 것 const person1 = getPersonObj('홍길동', 20, false);

@constructor, @class - 생성자 용도로 작성된 함수, 클래스

  • new 키워드와 함게 사용하여 객체를 생성함
  • 클래스의 생성자에는 @constructs
function Person (name, age) { this.name = name; this.age = age; } /** * 사람 객체 생성 함수 * @constructor * @param {string} name * @param {number} age */


/** * 새 클래스 * @class */ class Bird { /** * @constructs * @param {string} name */ constructor (name) { this.name = name; } }

@todo - 이후 해야 할 일 표시

/** * @todo 실행 속도 개선 필요 */ function slowFunction () { console.log('느릿느릿'); }

@see, @link - 참조, 링크

/** * @see {@link https://www.yalco.kr} 얄코사이트 참조 */ function yalcoFunc () { // ... }

@readonly - 읽기 전용

  • 강제성은 없음
/** * @readonly * @const {string} */ const READONLY = '건들지 마라';

@deprecated - 사라지게 될 기능

/** * @deprecated 버전 3부터 안 씀 */ function oldFunction () { console.warn('왜 실행했어요?'); }

🔗 문서에서 모든 기능 보기





문서 생성해보기

  • API 문서 생성기 🔗 JSDoc 사용
  • ⭐ 프로젝트 디렉토리에 _로 시작하는 폴더가 포함되지 않아야 함 - 위 생성기의 버그

1. Node.js 환경에 JSDoc 설치

npm install -g jsdoc
  • 맥에서는 앞에 sudo를 붙여 실행한 뒤 맥 로그인 암호 입력

2. 문서 생성

jsdoc ./
  • 혹은 ./ 대신, 대상 .js파일의 경로 지정
  • 자동생성된 out 폴더 안의 index.html 라이브서버로 실행해보기

🤔얄코에게 질문하기질문은 반.드.시 이리로 보내주세요! ( 강의사이트 질문기능 ✖ )

강의에서 이해가 안 되거나 실습상 문제가 있는 부분,
설명이 잘못되었거나 미흡한 부분을 메일로 알려주세요!

답변드린 뒤 필요할 경우 본 페이지에
관련 내용을 추가/수정하도록 하겠습니다.

이메일 주소
yalco@yalco.kr
메일 제목 (반드시 아래 제목을 붙여넣어주세요!)
[질문] 제대로 파는 자바스크립트 (유료 파트) 15-4

🛑질문 전 필독!!

  • 구글링을 먼저 해 주세요. 들어오는 질문의 절반 이상은 구글에 검색해 보면 1분 이내로 답을 찾을 수 있는 내용들입니다.
  • 오류 메시지가 있을 경우 이를 구글에 복붙해서 검색해보면 대부분 짧은 시간 내 해결방법을 찾을 수 있습니다.
  • 강의 페이지에 추가사항 등 놓친 부분이 없는지 확인해주세요. 자주 들어오는 질문은 페이지에 추가사항으로 업데이트됩니다.
  • "유료파트의 강의페이지는 어디 있나요?" - 각 영상의 시작부분 검은 화면마다 해당 챕터의 강의페이지 링크가 있습니다.
  • 질문을 보내주실 때는 문제가 어떻게 발생했고 어떤 상황인지 등을 구체적으로 적어주세요. 스크린샷을 첨부해주시면 더욱 좋습니다.
🌏 Why not change the world?