개요

자바스크립트 개발시 유용하게 사용할 수 있는 웹스톰과 인텔리제이의 세 가지(Parameter info, Quick Definition, Quick Documentation) 기능을 소개할까 합니다.
 

Parameter Info

자바스크립트는 타입 선언이 없기 때문에 협업시 불편한 점이 많습니다. 대표적인 예로 함수나 객체를 협업 개발자에게 배포하는 경우가 있습니다. 협업 개발자는 함수를 사용하기 위한 시그니처, 인자의 타입 정보를 알 수 없습니다. 코드를 열어 읽어봐야 파악할 수 있습니다.
아래는 3개의 매개변수를 가진 filter 함수입니다.
스크린샷 2014-08-13 오후 9.50.42

여기에 협업 개발자을 위해 JSDoc3 어노테이션을 작성합니다.
스크린샷 2014-08-13 오후 9.51.29
이제 함수를 배포했고, 협업 개발자가 사용한다고 해보겠습니다. 시그니처 정보를 알 수 없어 답답합니다.
스크린샷 2014-08-13 오후 9.52.13
이때 Parameter Info 기능을 사용하면 시그니처 정보와, 인자의 타입 정보를 툴팁으로 알 수 있습니다. 코드를 읽어 볼 필요없이 빠르게 파악 가능합니다.
맥은 단축키 command + P, 윈도우는 단축키 Ctrl + P 입니다.
스크린샷 2014-08-13 오후 9.52.49
 

Quick Definition

함수가 생각한대로 동작하지 않는다던가, 어떻게 처리되는지 알고 싶은 경우 등에는 코드를 읽어야합니다.이때 Quick Definition을 사용하면 빠르게 코드를 볼 수 있습니다.
맥은 단축키 commend + Y, 윈도우는 단축키 Ctrl + Shift + I 입니다.
스크린샷 2014-08-13 오후 9.56.45
 

Quick Documentation

함수와 인자의 상세 정보를 알고 싶다던지, 예제 코드를 보고 싶을때는 Quick Documentation를 사용합니다. 웹스톰(인텔리제이)는 JSDoc3 어노테이션을 빠르게 문서화하여 보여줍니다.
맥은 단축키 F1, 윈도우는 단축키 Ctrl + Q 입니다.
스크린샷 2014-08-13 오후 9.57.37
 
여기까지 자바스크립트를 개발할 때 유용한 기능 세가지를 소개했습니다.이 기능은 JSDoc3 어노테이션을 충실히 작성했을때 유용하단 점을 기억해주세요.

카테고리: Research

UYEONG

사케와 힙합을 즐길 줄 아는 프론트엔드 개발자입니다.

0개의 댓글

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다