전문가처럼 Visual Studio Code 및 프로그램에서 JavaScript를 실행하는 방법

by

자바스크립트는 수많은 개발자들이 가장 선호하는 프로그래밍 언어로 꾸준히 인정받고 있습니다.

최근 스택 오버플로우 설문조사 2023 결과에 따르면, 응답자의 63% 이상이 자바스크립트를 사용한다고 답했습니다. 이와 더불어 Visual Studio Code는 가장 널리 활용되는 통합 개발 환경(IDE)으로 자리매김했습니다. 같은 설문조사에서 Visual Studio Code는 응답자의 73% 이상으로부터 가장 선호하는 코드 편집기로 선택받았습니다.

Visual Studio Code는 다양한 언어를 지원하며, 그 중에서도 자바스크립트는 핵심적인 언어 중 하나입니다. 이 글에서는 Visual Studio Code에서 자바스크립트를 실행하는 것의 중요성, 자바스크립트 프로젝트를 생성하고 코드를 작성하는 방법, 그리고 VS Code에서 자바스크립트 코드를 실행하기 위한 단계별 안내와 함께, 효율적인 코드 실행을 위한 모범 사례를 자세히 알아보겠습니다.

VS Code에서 자바스크립트 실행의 중요성

자바스크립트는 VS Code에서 기본적으로 지원되는 몇 안 되는 언어 중 하나입니다. VS Code에서 자바스크립트 코드를 실행해야 하는 주된 이유는 다음과 같습니다.

  • 코드 실행 및 테스트 용이성: VS Code 내에서 즉시 자바스크립트 코드를 작성하고 실행할 수 있어, 별도의 환경으로 이동할 필요가 없습니다. .js 확장자를 가진 파일에 작성된 내용은 모두 자바스크립트 코드로 인식되며, 코드 작성 중 발생하는 오류를 실시간으로 강조 표시하여 효율적인 디버깅을 돕습니다.
  • 통합 터미널: 코드 편집기 내에서 직접 터미널을 사용하여 새 폴더나 파일을 생성하거나, 버전 제어 명령을 실행할 수 있습니다. 터미널을 통해 오류 메시지를 확인하는 것도 가능합니다.
  • 풍부한 확장 기능 생태계: VS Code는 광범위한 확장 기능 생태계를 제공하여, 기본 기능 외에 필요한 기능을 쉽게 추가할 수 있습니다. 이러한 확장 기능을 통해 다양한 라이브러리 및 프레임워크에 대한 지원을 확장할 수 있습니다.
  • 핫 리로딩 및 라이브 서버: VS Code에서 자바스크립트 코드 자동 저장 기능을 활성화하고, 라이브 서버를 통해 브라우저에서 코드를 실시간으로 실행할 수 있습니다. 핫 리로딩 기능은 코드 변경 사항을 자동으로 감지하여 라이브 서버 재시작 없이 즉시 반영합니다.
  • IntelliSense 및 코드 완성: 코드 편집기는 사용자가 코드를 입력하는 동안 지능적인 코드 제안 및 자동 완성 기능을 제공하여 개발 속도를 향상시키고, 논리에 더욱 집중할 수 있도록 지원합니다.
  • 플랫폼 간 호환성: VS Code는 macOS, Linux, Windows 등 다양한 운영 체제에서 사용 가능하며, 자바스크립트의 슈퍼셋인 TypeScript도 지원합니다.

VS Code에서 자바스크립트 실행

운영 체제에 상관없이 자바스크립트 코드를 실행하기 위한 환경 설정은 간단합니다. 원활한 사용을 위해 컴퓨터에는 최소 4GB의 RAM이 권장됩니다. 다음 단계를 따라 설정을 시작해 봅시다.

Node.js 설정

Node.js는 가장 널리 사용되는 자바스크립트 런타임 환경 중 하나입니다. Node.js를 사용하면 브라우저 환경 외부에서 자바스크립트를 실행할 수 있으며, Express.js와 같은 프레임워크를 통해 백엔드 개발에도 활용할 수 있습니다.

아직 컴퓨터에 Node.js가 설치되어 있지 않다면, 여기에서 무료로 다운로드할 수 있습니다. 터미널에서 다음 명령어를 사용하여 Node.js 설치 여부를 확인할 수 있습니다.

node -v

Node.js가 설치되어 있다면, 터미널에 다음과 비슷한 정보가 출력됩니다.

자바스크립트 개발을 위한 Visual Studio Code 설정

Visual Studio Code는 코드 편집기 또는 IDE로 정의할 수 있으며, 사용 목적에 따라 유연하게 활용할 수 있습니다. VS Code는 기본적으로 자바스크립트를 지원하지만, 특정 기능을 사용하기 위해서는 확장이 필요할 수 있습니다.

VS Code는 무료로 다운로드할 수 있으며, 다운로드 페이지에서 운영 체제에 맞는 버전을 선택하여 설치할 수 있습니다.

자바스크립트 프로젝트 생성

이제 자바스크립트 애플리케이션을 개발하기 위한 기본 소프트웨어(런타임 환경 및 코드 편집기)가 준비되었습니다. 자바스크립트는 웹사이트에 인터랙티브한 요소를 추가하기 위해 HTML, CSS와 함께 주로 사용되지만, 스크립팅 및 데이터 구조 처리에도 활용됩니다.

간단한 애플리케이션을 만들어 “JavaScript-VsCode-app”이라고 명명해 보겠습니다.

터미널에서 다음 명령어를 실행합니다.

mkdir JavaScript-VSCode-app
cd JavaScript-VSCode-app
touch app.js
code .

Visual Studio Code에서 자바스크립트 코드 작성

이 예시에서는 간단한 자바스크립트 코드만 작성할 것입니다. VS Code에서 프로젝트 폴더는 다음과 같이 보입니다.

파일이 하나(app.js)만 존재합니다. 이제 숫자가 짝수인지 확인하는 간단한 프로그램을 작성해 보겠습니다. app.js 파일에 다음 코드를 입력합니다:

function isEven(number) {
    return number % 2 === 0;
}

let myNumber = 8;
if (isEven(myNumber)) {
    console.log(myNumber + " is even.");
} else {
    console.log(myNumber + " is odd.");
}

Visual Studio Code에서 자바스크립트 코드 실행

이제 VS Code에서 자바스크립트 코드를 실행할 준비가 되었습니다. 코드의 기능을 먼저 이해해야 합니다. ‘isEven’ 함수는 숫자를 받아, 해당 숫자가 2로 나누어떨어지는지 여부에 따라 true 또는 false를 반환합니다.

다음 명령어를 실행하여 코드를 실행할 수 있습니다.

node app.js

루트 디렉터리 또는 VS Code 터미널에서 명령어를 실행할 수 있습니다.

위에서 제공된 코드를 실행하면 “8 is even.”이라는 결과가 출력됩니다.

만약 9가 짝수인지 확인하고 싶다면, 코드를 다음과 같이 변경할 수 있습니다.

function isEven(number) {
    return number % 2 === 0;
}

let myNumber = 9;
if (isEven(myNumber)) {
    console.log(myNumber + " is even.");
} else {
    console.log(myNumber + " is odd.");
}

변경된 코드를 실행한 결과는 다음과 같습니다.

결과에서 “9 is odd.”라고 출력된 것을 확인할 수 있습니다.

필수 확장 기능 추가

지금까지 만든 프로그램은 간단한 예제입니다. 더 복잡한 애플리케이션을 개발할 때는 코드 린팅이나 디버깅 기능이 필요할 수 있습니다. VS Code 왼쪽 사이드바에서 마지막에서 두 번째 아이콘을 클릭하여 확장 메뉴를 열 수 있습니다.

키보드 단축키(Ctrl+Shift+X)를 사용할 수도 있습니다.

이제 코드에 필요한 다양한 확장 기능을 검색할 수 있습니다. 예를 들어, ESLint를 검색할 수 있습니다.

확장 기능이 이미 활성화된 것을 확인할 수 있습니다. 다양한 확장 기능을 살펴보고, 사용법을 익혀 코딩 효율성을 높여 보세요.

Code Runner 확장 기능 사용

Visual Studio Code는 다양한 프로그래밍 언어를 지원합니다. Code Runner 확장 기능을 사용하면 다양한 언어의 코드를 VS Code 내에서 직접 실행할 수 있습니다. VS Code 왼쪽 사이드바에서 확장 탭을 클릭하고 “Code Runner”를 검색하여 설치하세요.

설치 후 확장 기능을 활성화하면 코드를 실행할 준비가 완료됩니다. 예를 들어, app.js 파일에 `console.log(“Hello, World!”);` 코드를 추가한 후, Code Runner를 사용하여 실행할 수 있습니다. F1 단축키를 누르고 “Run Code”를 입력하여 실행해 봅시다.

터미널에 다음과 같은 결과가 출력됩니다.

[Running] node "/home/tk/JavaScript-VSCode-app/app.js"
Hello, World!
[Done] exited with code=0 in 2.106 seconds

자바스크립트 코드 효율적 작성 모범 사례

지금까지 설정한 환경은 간단한 자바스크립트 프로그램을 개발하는 데 적합합니다. VS Code에서 자바스크립트를 원활하게 실행하려면 다음 모범 사례를 기억해 두는 것이 좋습니다.

  • 코드 린터 활용: 자바스크립트 파일 크기가 커질수록 가독성 문제가 발생할 수 있습니다. Prettier ESLint와 같은 확장 기능을 사용하면 코드 오류를 미리 발견하고 가독성을 향상시킬 수 있습니다.
  • 파일 분리: 프런트엔드 프로젝트에서는 HTML, CSS, 자바스크립트 코드를 작성해야 할 수 있습니다. 모든 코드를 하나의 파일에 작성하는 대신, HTML, CSS, 자바스크립트 코드를 각각 다른 파일에 분리하여 관리하는 것이 좋습니다.
  • 확장 기능 활용: VS Code 마켓플레이스에는 수많은 확장 기능이 제공됩니다. 마켓플레이스를 탐색하여 높은 평가와 상세한 문서를 가진 확장 기능을 선택하여 사용해 보세요.

버전 관리 통합을 위한 Visual Studio Code Git 설정

지금까지 VS Code 환경 설정과 자바스크립트 실행 단계를 살펴보았습니다. 코드 변경 사항을 추적하거나 GitHub와 같은 원격 저장소에 푸시하려면 Git과 같은 버전 관리 시스템을 사용하는 것이 좋습니다. 다음 단계를 따라 Git을 설정해 봅시다.

  • Git 설치: Git은 개발 분야에서 가장 널리 사용되는 버전 관리 시스템입니다. Git 다운로드 페이지에서 운영 체제에 맞는 버전을 다운로드하여 설치합니다. 설치 후, 다음 명령어를 사용하여 Git 버전을 확인할 수 있습니다.
git -v

Git이 올바르게 설치되었다면, 터미널에 다음과 비슷한 정보가 출력됩니다.

  • Git 저장소 초기화: 모든 변경 사항을 추적하고 Git에 커밋(스테이징)하려면, 프로젝트 폴더의 루트에서 다음 명령어를 실행합니다.
git init

  • Git ID 설정: Git에 사용자 이름과 이메일을 설정하여 자신을 식별해야 합니다. 다음 명령어를 실행하여 Git ID를 설정하세요.

git config –global user.name “본인 이름”

git config –global user.email “[email protected]“

“본인 이름”과 “[email protected]“을 본인의 정보로 변경하세요.

  • 변경 사항 스테이징 및 커밋: Git 설정이 완료되었으면 변경 사항을 스테이징하고 커밋할 수 있습니다. 추적되지 않은 모든 파일을 확인하려면 다음 명령어를 실행하세요.
git status

추적되지 않은 파일과 커밋되지 않은 파일을 확인할 수 있습니다.

변경 사항을 스테이징하려면 다음 명령어를 실행하세요.

git add .

다시 `git status`를 실행하면 다음과 비슷한 내용을 확인할 수 있습니다.

이제 파일을 커밋할 수 있습니다. 다음 명령어를 실행하세요.

git commit -m "커밋 메시지"

“커밋 메시지”를 작업 내용을 설명하는 문구로 변경하세요.

이제 GitHub와 같은 원격 저장소 플랫폼을 연결하여 소스 코드를 관리할 수 있습니다.

결론

이 글을 통해 VS Code에서 자바스크립트 개발 환경을 설정하고 코드를 실행하는 방법을 이해하셨기를 바랍니다. VS Code에서 자바스크립트 라이브러리 및 프레임워크를 사용하려면 추가 확장 기능이 필요할 수 있습니다. 항상 Visual Studio Code를 최신 버전으로 업데이트하여 최신 기능을 활용하고 편리하게 코딩하세요.

자바스크립트 학습과 지식 향상에 도움이 될 수 있는 다양한 자료들을 찾아보세요.