[ JavaScript ] Visual Code에서 바로 실행해 보자.

네, Visual Studio Code(이하 VS Code)에서는 JavaScript를 실행할 수 있는 여러 확장팩을 사용할 수 있습니다. 이 확장팩들은 코드 편집기 내에서 직접 JavaScript 코드를 실행하고 결과를 확인할 수 있게 해줍니다. 몇 가지 인기 있는 확장팩을 소개하겠습니다.

1. Code Runner

Code Runner는 VS Code에서 여러 프로그래밍 언어(그 중 JavaScript도 포함)를 실행할 수 있는 매우 인기 있는 확장팩입니다. 간단한 설정만으로 바로 사용할 수 있습니다.

설치 및 사용법:

1. 설치:
   • VS Code의 왼쪽 사이드바에서 확장 아이콘(박스 모양)을 클릭합니다.
   • 검색 창에 "Code Runner"를 입력하고, "Code Runner" 확장팩을 설치합니다.
   • Code Runner - VS Code Marketplace
2. 사용법:
   • JavaScript 파일을 열고, 실행하고 싶은 코드를 작성합니다.
   • 코드 편집기에서 Ctrl + Alt + N (macOS에서는 Control + Option + N) 단축키를 눌러 코드를 실행합니다.
   • 또는, 우클릭 메뉴에서 "Run Code"를 선택할 수도 있습니다.
   • 결과는 VS Code의 통합 터미널에 출력됩니다.

예제:

// example.js

console.log("Hello, World!");

위의 코드를 작성하고, Ctrl + Alt + N을 눌러 실행하면, 통합 터미널에 "Hello, World!"가 출력됩니다.

2. Quokka.js

Quokka.js는 JavaScript와 TypeScript를 실시간으로 실행하고, 결과를 편집기 내에 바로 표시해주는 확장팩입니다. 이는 빠른 테스트와 디버깅에 매우 유용합니다.

설치 및 사용법:

1. 설치:
   • VS Code 확장 메뉴에서 "Quokka.js"를 검색하여 설치합니다.
   • Quokka.js - VS Code Marketplace
2. 사용법:
   • 파일이나 스크립트가 열려 있는 상태에서 Ctrl + Shift + P를 눌러 명령 팔레트를 열고, "Quokka.js: New JavaScript File"을 선택합니다.
   • Quokka.js가 활성화된 편집기에서 코드를 작성하면, 결과가 즉시 편집기 내에 주석 형태로 나타납니다.

예제:

// Quokka.js 실행 중

const greeting = "Hello, World!";
console.log(greeting);

코드를 작성하면, console.log 결과가 코드 옆에 바로 표시됩니다.

3. Node.js Extension Pack

Node.js Extension Pack은 Node.js 개발을 위한 여러 가지 도구와 확장팩을 포함한 패키지입니다. 이 패키지를 설치하면 JavaScript뿐만 아니라 Node.js 관련 작업도 쉽게 수행할 수 있습니다.

설치 및 사용법:

1. 설치:
   • VS Code 확장 메뉴에서 "Node.js Extension Pack"을 검색하여 설치합니다.
   • Node.js Extension Pack - VS Code Marketplace
2. 사용법:
   • 이 패키지에는 JavaScript 실행을 도와주는 도구들과 Node.js 디버깅, 코드 포맷터, NPM 스크립트 지원 등의 여러 기능이 포함되어 있습니다.
   • 코드 편집기에서 Node.js 관련 작업을 할 때 유용하게 사용할 수 있습니다.

요약

VS Code에서 JavaScript를 실행하고 디버깅할 수 있는 확장팩은 여러 가지가 있으며, 사용 용도에 따라 적합한 확장팩을 선택할 수 있습니다:

1. Code Runner: 간단한 JavaScript 실행에 적합한 확장팩.
2. Quokka.js: 실시간 코드 실행과 즉각적인 결과 피드백을 제공하는 확장팩.
3. Node.js Extension Pack: Node.js 개발을 위한 다양한 도구를 포함한 패키지.

이들 중에서 원하는 기능에 맞는 확장팩을 설치하고 사용하여, VS Code에서 JavaScript 개발을 더욱 효율적으로 진행할 수 있습니다.