리액트 jsdoc 도입

타입스크립트를 도입하기 이전 jsdoc은 라이브러리 설치를 하지 않고도 바로 사용이 가능하여서 사용하게 되었다.

Jsdoc

타입스크립트처럼 타입을 정해놓을수 있고 간략한 정의를 내릴수 있다.
함수 같은 경우 많은 함수를 사용하게 되면 헷갈리게 되니 간략하게 정리해두고 파라미터와 리턴 값의 타입을 정해둘수 있다.

나도 리액트를 사용하면서 사용하게 되었는데

간단하게 프로젝트 내에서 jsconfig.json 파일만 생성해놓으면 바로 사용이 가능했다.

 jsconfig.json
{
  "compilerOptions": {
    "jsx": "react",
    "module": "commonjs",
    "target": "es2020",
    "checkJs": true,
    "esModuleInterop": true
  },
  "exclude": ["node_modules"]
}

사용법은 아래와 같다. 내가 사용한 일부를 가져왔다.

/**
   * 스케쥴 관리 함수
   * @param {number} timeIdx
   * @returns {void} setState로 스케줄 state 변경
   */

함수 위에서 /** 만 쳐도 바로 자동완성 기능이 있다. 자동완성을 하면 자동으로 함수의 파라미터가 등록이 된다.
맨위에는 함수의 정의 그리고 param는 파라미터 값 return은 리턴 값이다.
좋은점이 함수에 마우스를 위치시키면 타입들 정의한것과 함수정리한것이 나타나서 나중에 작업할때 좋다.

일단 직면한 문제로서는 두가지가 있었다. 사소한 오류여서 기본적인 작동은 다된다.
그냥 ide 내에서 빨간 줄이 그어진 오류 였다.

첫번째 문제

아래와 같이 import를 했는데 react 부분에서 빨간 줄이 그어져 있었다.
import { React,useState, useEffect } from 'react';
마우스를 대보니
'React'은(는) 'require' 호출을 사용하거나 'esModuleInterop' 플래그를 설정하고 기본 가져오기를 사용해서만 가져올 수 있습니다.
라는 오류가 떠있었다.

오류를 읽어보다가 react 부분에만 빨간 줄이 그어져있어서 아래와 같이 수정했더니 해결되었다.

import React from 'react';
import { useState, useEffect } from 'react';

두번째 문제

css로 스타일드 컴포넌트를 사용했는데 props 를 전달할때의 오류였다.
문제를 확인해보니
‘이 호출과 일치하는 오버로드가 없습니다. ‘ 라는 오류가 떠있었다.
아직 해소는 못했지만 차차 해소해보려고 한다.