함수를 하나 만들었습니다. 자, 요구가 무슨 함수인지 주석을 이렇게 다 알아 두는 게 좋다고 하니까 자, 주석도 이렇게 달아 봤습니다.

기분이 가 울 때 쓰는 함수. 근데 이런 식으로 추상적으로 쓰레기 같이 주석을 달게 되면 나중에 미래에 고생을 하기 때문에 자, 요 함수는 어떤 기능을 하는지 그리고 뭘 입력하고 뭘 뱉는지 설명을 해봐야 나중에 고생을 덜하게 됩니다.

그래서 주석에다가 뭐 이런 식으로 입력하는 게 좋은 관습 이긴 한데요.

근데 조금 더 숙련된 개발자처럼 주석을 달고 싶으면 주석을 여기 /* */ 안에다가 한번 적어 보십시오.

그럼 앞으로 요 함수를 갖다 쓸 때 마우스를 올리면 방금 작성한 주석이 힌트로 출연합니다.

그럼 요거 보고 이제 함수에 뭐가 들어갈 수 있는지 힌트 같은 걸 되게 쉽게 얻을 수가 있겠죠.

자, 요건은 JSDoc이라는 일종의 부가 기능인데요. 요즘 대부분의 에디터 들은 JSDoc 기능을 기본으로 제공하기 때문에 이렇게 쓸 수 있는 거고요.

제대로 쓰는 법을 알려 드리자면 자, 함수 위에다가 /* * 치고 엔터를 치면 아마 JSDoc 주석이 자동 완성이 될 텐데 여기 파람스 법이 뭐냐면 현재 함수에 들어갈 파라미터에 설명 적는 곳이 어때 춤 적어 보시면 되고요.

위천 스티렌 애교 함수가 뭘 리턴하는지 설명도 적어둘 수 있고요.

이런 식으로 주석을 달면 이세요 함수를 쓸 때 마우스를 올리면 방금 적은 주석이 간절하게 이러지 뜹니다.

심지어 여기 중괄호 10 9 10 파라미터로 권장하는 타입 같은 것도 적어 들 수 있고요.

요 파라미터에 숫자 그리고 요 파라미터에 문자의 이런 것들 넣으면 좋다고 이렇게 명시를 해 주면 자, 이런 식으로 함수를 쓸 때의 타입 힌트 같은 것도 줄 수가 있고요.

대충 이런 기능을 제공하는 게 JSDoc이다.

기의 저렇게 문자나 숫자로 타입을 명시적으로 넣게 되면 장점이 또 뭐냐 며 이렇게 점 찍을 때 자동 완성이 된다는 것.

컴퓨터한테 이해가 이제 스트링이라는 것을 미리 알려줬기 때문에 이해가 이렇게 자도 완성도 스트링에 맞춰서 이렇게 적용을 해 주고요.

자, 이거 말고도 여러 가지 문법들이 있습니다.

이런 식으로 작성하게 되면 자 해당 코드, 뭐, 크가 정보 있죠? 이걸 참고하세요.

그리고 버전은 이렇게 됩니다. 이런 식으로 부가 정보 같은 것도 넣을 수 있고요.

변수나 아니면 이제 오브젝트 프로퍼티 위에다가 이런 식으로 위드 온니를 적게 되면 읽기 전용이에요.

이런 식으로 명시도 할 수 있고요. 물론 강제성은 없고 힌트이쁜이구요.

골뱅이 투두라고 쓰면 여기다가 메모 같은 것도 해 둘 수 있습니다. 뭐, 내가 개발을 추가로 해야 될 사항 같은 걸 여기다가 적어두면 따로 매 막창 같은 거 필요 없을 수도 있고요.

자, 그리고 골뱅이 데프리케이트라고 쓰면요, 함수를 쓰지 말고 다른 것을 하라고 이렇게 경고를 줄 수도 있습니다.

그럼 앞으로 요 함수를 쓸 때 가로줄이 쳐지구의 그리고 변수 만들 때 간단하게 타입도 이런 식으로 넣을 수도 있습니다.

파이 스크립트에서 쓰는 타입 틀 거의 다 이용 가능하고요.

그럼 이제 변수를 쓸 때 이렇게 타입 힌트 같은 것도 제공할 수 있고 뭐 텍스트라는 기능이 똑같이 저어 그래서 비유하자면 모틀 딱 버전 텍스트 이펙트라고 생각하시면 되고 왜 10년 전에 다이 스크립트 없었을 때 이런 식으로 타입을 막 집어 넣었습니다.

그럼 여기서 질문 사항이 있습니다. 자, 그러면은 타입 기능 이런 것들은 그냥 타입 스크립트 쓰면 되는 것이 왜 이걸 굳이 쓰냐고요.

타입을 넣고 싶으면 txt 쓰는 게 더 나을 수도 있는데 작은데 완전히 대체제 이런 것들은 아니기 때문에 js 답도 뭐 필요하면 함께 쓰는 사람들이 많고요.

작은데 최근에 이상한 사람들이 막 생겨나기 시작을 했는데 요즘은 타입 스크립트로만 코드 안 짜면 희한하게 다 2마이런 지급을 하는 분위기인데 근데 최근에 타입 스크립트의 환율을 느끼고 요 JS 다큐만 이렇게 쓰면 사람들이 막 나오기 시작을 했어요.

예를 들어서 나름 최근에 나온 트레이 먹이라고 할 수 있는 스펙 특히 C라는 게 있는데 요거 만든 사람은 그냥 타이스 그 벌이구요.

JS 다큐랑 쌩 자바 스크립트로 개발을 했었습니다.

뭐 얘 말고 도메인 JS 그리고 디노 이런 거 만든 사람들도 타입스크립트 썼다가 작은 양 JS 다큐로 이렇게 되돌아갔습니다.

타입스크립트 썼다가 불만족한 이유가 뭐냐면 타입 스크립트는 너무 엄격하기 때문에 개발 초기 있잖아요.

그럴 때 변경 사항들이 많을 때 좀 적합하지 않았고요.

그리고 타입스크립트를 쓰면 이거를 자바스크립트로 결국 변환을 해서 써야 되는데 그 변환 과정이 귀찮기도 하고요.

그리고 변화를 거치게 되면 사이즈가 좀 커져요. 자, 그런 단점 등 때문에 그냥 JS 다큐 쓰는데 그리고 나중 가서 개발이 좀 마무리되면 자, 요거를 다시 타입스크립트로 바꾸는 작업 같은 거를 해볼 생각을 해본다고 하네요.

그래가지고 타입스크립트보다 훨씬 더 가볍게 타입 같은 거를 집어넣고 싶다, 그러면은 제 스타크는 되는 거고요.

내가 조금 더 타입을 엄격하게 체크하고 싶거나 뭐 타입을 재사용하거나 그런 식으로 타입을 다루고 싶다, 그러면 타입스크립트 쓰면 되는 거고, 물론 둘 다 쓰는 것도 괜찮고요.

그래서 오늘의 결론은 자바스크립트 한 20년 했던 틀딱 같아 보이고 싶다, 그러면 이런 거 한번 가볍게 써 보시고요.

자바스크립트 20년차 개발자처럼 주석다는 법

코딩애플

JSDoc은 함수에 대한 설명, 파라미터 타입, 리턴 값 등을 주석으로 명시하여 코드 가독성을 높이고 타입 힌트를 제공하는 자바스크립트 부가 기능이다.

타입스크립트의 대안으로 JSDoc을 사용하여 코드에 타입을 명시할 수 있으며, 타입스크립트의 엄격함 없이 가볍게 타입을 적용하고 싶을 때 유용하다.

개발 초기 단계에는 JSDoc을 사용하고, 개발이 마무리될 때 타입스크립트로 전환하는 방법도 고려할 수 있다.

✍️ 함수 주석, 왜 중요할까요?

함수를 만들 때 주석을 다는 것은 중요합니다. **추상적인 주석은 미래의 고생길을 예약하는 것과 같아요**. 함수가 어떤 기능을 하고, 무엇을 입력받고, 무엇을 반환하는지 명확히 설명해야 나중에 유지보수가 쉬워집니다.

✨ JSDoc으로 똑똑하게 주석 달기

조금 더 숙련된 개발자처럼 주석을 달고 싶다면 JSDoc을 활용해 보세요. `/* */` 안에 주석을 작성하면 **함수를 사용할 때 마우스를 올리면 힌트가 나타납니다**.

JSDoc 주석은 자동 완성을 지원하며, 파라미터 설명(`@param`)과 반환 값 설명(`@returns`)을 명확하게 적을 수 있습니다. **함수를 사용할 때 어떤 타입의 값을 넣어야 하는지 힌트를 제공할 수 있습니다**.

타입을 명시적으로 지정하면 **자동 완성 기능이 향상됩니다**. 예를 들어, 문자열 타입을 지정하면 문자열 관련 메서드들이 자동 완성 목록에 나타납니다.

`@see` 태그를 사용하여 관련 코드나 정보를 참조할 수 있습니다. `@version` 태그를 사용하여 버전 정보를 기록할 수도 있습니다. **`@readonly`를 사용하여 읽기 전용 속성을 명시할 수 있습니다**, 수정하지 말라는 힌트를 줄 수 있죠.

`@todo` 태그를 사용하여 개발해야 할 사항을 메모해 둘 수 있습니다. `@deprecated` 태그를 사용하여 함수를 쓰지 말라는 경고를 표시할 수도 있습니다. **변수 타입 힌트를 제공하여 코드의 가독성을 높일 수 있습니다**.

🤔 JSDoc vs TypeScript, 무엇을 선택할까요?

타입스크립트를 사용하는 대신 JSDoc을 사용하는 이유는 무엇일까요? **타입스크립트는 엄격하여 개발 초기 단계에 적합하지 않을 수 있습니다**. 또한, 타입스크립트는 자바스크립트로 변환하는 과정이 필요하며, 변환 후 파일 크기가 커질 수 있습니다.

최근에는 타입스크립트의 복잡성에 지쳐 JSDoc으로 돌아가는 개발자들도 있습니다. **타입스크립트보다 가볍게 타입을 지정하고 싶다면 JSDoc이 좋은 선택이 될 수 있습니다**. 물론, 둘 다 함께 사용하는 것도 가능합니다.

결론적으로, **좀 더 '틀딱' 개발자처럼 보이고 싶다면 JSDoc을 가볍게 사용해 보세요!**

JSDoc을 활용한 효과적인 함수 주석 작성법

함수의 기능, 입력값, 출력값을 명확히 설명하는 주석 작성의 중요성 강조

JSDoc을 이용한 주석 작성 방법 소개

JSDoc 자동완성 기능을 활용한 파라미터 및 리턴값 설명 추가

파라미터 타입 힌트 제공 및 자동완성 기능 설명

함수 사용 중지 경고 기능(@deprecated) 설명

변수 선언 시 타입 힌트 추가 방법 설명

JSDoc의 기능을 텍스트 이펙트에 비유하여 설명

TypeScript와 JSDoc의 비교 및 활용 방안

TypeScript와 JSDoc의 차이점과 상호 보완적인 사용 가능성 설명

최근 개발 트렌드에서의 TypeScript 사용 현황 소개

Next.js, React, Vue.js, Deno 등 주요 프레임워크 개발에서의 TypeScript 사용 경험과 그 이유 설명

TypeScript 사용의 단점(엄격함, 변환 과정, 파일 크기 증가) 설명

개발 상황에 따른 JSDoc과 TypeScript 선택 기준 제시