VSCode에 JavaScript를 설치하는 방법

2024/04/02

JavaScript는 웹 페이지에 생각하고 반응할 수 있는 능력을 부여하므로 가장 중요한 프런트 엔드 언어 중 하나입니다. 프런트 엔드 개발자라면 IDE에 JavaScript를 추가하고 싶을 수도 있습니다. 이번 튜토리얼에서는 VSCode에 JavaScript를 설치하는 방법을 살펴보겠습니다 .

VSCode에 JavaScript 설치

Visual Studio Code는 완전 무료 오픈 소스 코드 편집기입니다. Microsoft에서 개발했으며 가볍고 빠르며 확장 가능한 디자인으로 인해 개발자들로부터 높은 평가를 받고 있습니다. 이 코드 편집기는 다양한 프로그래밍 언어를 지원할 수 있으며, 이 튜토리얼에서는 JavaScript에 중점을 둘 것입니다.

VSCode에 JavaScript를 설치하려면 아래 언급된 단계를 따라야 합니다.

비주얼 스튜디오 코드 설치
Node.JS 설치
JavaScript 프로그램 생성 및 실행

그들에 대해 자세히 이야기합시다.

1] Visual Studio 코드 설치

먼저 컴퓨터에 Visual Studio Code를 설치해야 합니다. 동일한 작업을 수행하려면 code.visualstudio.com 으로 이동하여 원하는 플랫폼에 맞는 앱을 설치하세요. 다운로드가 완료되면 다운로드 위치로 이동하여 컴퓨터에 설치하세요.

2] Node.JS 설치

Node.js는 Windows, Linux, Unix, macOS 등 다양한 운영 체제에서 실행될 수 있는 무료 오픈 소스 JavaScript 런타임 환경입니다. V8 JavaScript 엔진을 사용하여 웹 브라우저 외부에서 JavaScript 코드를 실행합니다. Node.js를 사용하면 JavaScript를 사용하여 명령줄 도구를 작성하고 서버 측 스크립팅을 수행할 수 있습니다.

Extension Center에서 Node.JS Extension Pack을 설치할 수 있습니다. 따라서 해당 아이콘을 클릭하여 확장 섹션으로 이동하고 “Node.JS”를 찾은 후 연결된 설치 아이콘을 클릭하세요. 이 패키지에는 JavaScript 및 Node.js 작업에 유용한 확장 모음이 포함되어 있습니다.

JavaScript 코드를 실행하려면 JavaScript 런타임인 Node.js를 설치해야 합니다. Nodejs.org 공식 웹사이트에서 다운로드할 수 있습니다 . 대부분의 사용자에게 가장 안정적이고 적합한 버전인 LTS(Long Term Support) 버전을 선택하는 것이 좋습니다.

3] JavaScript 프로그램 생성 및 실행

이제 코드를 실행할 환경을 만들었으니 코딩을 시작해 보겠습니다. 동일한 작업을 수행하려면 먼저 VSCode 파일을 만들어야 합니다. 따라서 Visual Studio Code를 열고 파일 > 새 파일로 이동합니다. 원하는 이름을 지정하되 확장자는 .js 입니다 . 따라서 이름을 “javascript.js”로 지정할 수 있습니다. 저장하려면 Ctrl + Shift + S 또는 파일 > 다른 이름으로 저장을 사용하세요. 모든 것이 제대로 작동하는지 확인하려면 다음 명령을 사용하십시오.

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

이 JavaScript 코드는 “Hello, world!”를 출력합니다. 프로그램과의 통신을 위한 텍스트 기반 인터페이스인 콘솔을 통해.

4] JavaScript 파일 실행

JavaScript를 실행하는 것은 Java 파일을 실행하는 것만큼 간단하지 않습니다. CodeRunner를 설치해야 IDE에 버튼을 추가하여 버튼을 한 번만 클릭하면 코드를 실행할 수 있습니다. 또는 터미널을 열고 ‘cd’ 또는 디렉토리 변경 명령을 사용하여 파일 경로로 이동합니다. 따라서 파일 경로(cd ~/Desktop/JS)로 cd한 다음 node filename.js를 실행하세요. 그러나 Code Runner가 자동으로 이를 수행합니다.

‘노드’가 내부 또는 외부 명령으로 인식되지 않는 문제 수정

“‘node’는 내부 또는 외부 명령으로 인식되지 않습니다.”라는 오류가 발생하는 경우 경로 변수가 시스템에 정의되지 않은 것입니다. 따라서 환경 변수에서 경로를 정의하려면 아래에 설명된 단계를 따라야 합니다.

Win + R을 누르고 “환경 변수”를 입력한 후 시스템 환경 변수 편집 섹션을 엽니다.
환경 변수를 클릭하세요.
경로를 선택한 다음 편집을 클릭합니다.
새로 만들기를 클릭하고 Nodejs가 설치된 경로를 붙여넣습니다. 내 경우에는 “C:\Program Files\nodejs”였습니다.
확인을 클릭하세요.

마지막으로 Visual Studio Code를 다시 시작한 다음 문제가 해결되었는지 확인하세요.

VS Code에 JavaScript를 추가하는 방법은 무엇입니까?

Visual Studio Code에 JavaScript를 추가하려면 먼저 VSCode를 설치한 다음 Node.JS를 설치해야 합니다. 완료되면 다음을 만듭니다. JS 파일을 작성하고 코드 작성을 시작한 다음 코드 작성을 시작하십시오. 실행하려면 터미널을 사용하여 파일 경로로 이동한 다음 node filename.js를 실행하거나 Code Runner 확장 프로그램을 다운로드하면 됩니다.

VS Code에서 JavaScript를 사용할 수 있나요?

예, VS Code에서 JavaScript를 사용할 수 있습니다. 실제로 VS Code는 JavaScript에 대한 탁월한 디버깅 지원을 제공합니다. 디버그 콘솔에서 쉽게 중단점을 설정하고, 개체를 검사하고, 호출 스택을 탐색하고, 코드를 실행할 수 있습니다. VS Code의 디버깅에 대해 자세히 알아보려면 code.visualstudio.com 으로 이동하세요 .