자바 스크립트에서 'console.log(변수명)' 단축키로 한번에 입력하기

자바 스크립트에서 'console.log(변수명)'을 단축키로 한 번에 입력하고 지우는 방법을 알아보자.

 

 일반적으로  자바 스크립트에서 'console.log(변수명)'을 입력하려면 'console.log(변수명);'을 하나 하나 입력해야 한다. 추적해야 하는 변수가 많을 겨우 이것들을 일일이 입력하고 추적하는 것은 쉬운 일이 아니다. 

 

 

 

 이럴때 'turbo Console Log' 익스텐션을 사용해 보자. 그러면 자바 스크립트 console.log의 신기원을 볼 수 있을 것이다. VScode 익스텐션 항목에서 'turbo Console Log'을 입력하고 검색되는 익스텐션을 설치한다.

 

 

 먼저 console.log로 값을 추적하고 싶은 모든 변수를 선택한다. 하나의 변수를 선택하고 또 다른 변수를 같이 선택할 때는 'Alt'키를 누르고 변수를 선택하면 여러 개를 동시에 선택할 수 있다. 보통 여러 개의 오브젝트를 하나씩 선택할 때는 'Ctrl'키를 누르고 선택하는 것이 일반적인데 'Ctrl'키로 이 기능이 안 먹힐 때는 'Alt'키를 누르고 사용하면 된다.

 

 

 이제 ' turbo Console Log'를 사용하는 방법을 알아보자. ' turbo Console Log'는 '메뉴바 -> 'View' -> 'Command Palette'를 찾아가면 된다. 

 

 

 

 그러면 상단에 입력창이 열린다. 여기에 'turbo console Log:'를 입력하자. 'turbo' 정도만 입력해도 그 아래에 4개의 옵션 사항이 나타난다. 여기서 'turbo Console Log'를 표시하려면 'Turbo Console Log: Display Log Message'를 선택하면 된다. 그리고 오른쪽에 나와있는 'Ctrl + Alt + L' 단축키를 잘 기억해 두자. 다음부트는 이 단축키 만으로 ' turbo Console Log'를 사용할 것이다.

 

 

 위의 과정이 끝나면 선택한 변수의 'console.log(변수명)' 값이 자동으로 표기된다. 인자값이 하나더 나타나는데 필요하면 사용하고 아니면 지워도 된다. 

 

 

 이코드를 실행해 보면 지정한 변수의 값이 제대로 나타난다.

 

 

 이제 화면에 나타난 'console.log(변수명)' 코드들을 없애는 방법이다. 없애는 방법은 위의 방법을 그대로 같이 따라오면 되고 마지막 선택지에서 'Turbo Console Log: Delete All Log Messages'를 선택하면 된다. 단축키는 'Ctrl + Alt + D' 이므로 다음부터는 이 단축키를 사용하자.

 

 

모든 'console.log(변수명)' 코드들이 순식간에 사라진다.

 

 자바 스크립트에서 'console.log(변수명)' 코드를 단축키로 한번에 입력하고 삭제하는 방법을 알아보았다. 다음부터는 'Ctrl + Alt + L' 단축키로 한번에 'console.log(변수명)'을 입력하고 삭제해 보자. 코드 디버깅 시간을 반으로 줄일 수 있을 것이다.