VSCode에서 자바스크립트(Javascript) 실행하는 방법(VSCode와 Node.js로 시작하기)

 

 

들어가면서..

Javascript는 웹 개발에서 꼭 필요한 언어 중 하나입니다. 우리가 매일 사용하는 웹사이트들이 자바스크립트를 통해 동작을 한다고 해도 과언이 아닙니다. 웹 페이지에서 단순히 글자와 이미지가 표시되는 것만으로는 부족할 때, 자바스크립트가 등장해 사이트를 더 생동감 있게 만들어주었습니다. 버튼을 클릭했을 때 새로운 내용이 나타나거나, 실시간으로 데이터를 업데이트하는 기능들, 웹에서 보는 애니메이션 같은 것도 모두 자바스크립트로 구현해낼 수 있습니다. 

 

자바스크립트는 원래 웹 브라우저 안에서만 쓰였던 언어였지만 이제는 Node.js 덕분에 서버에서도 사용할 수 있습니다. 이 말은, 자바스크립트를 잘 배워두면 웹 사이트의 앞단과 뒷단, 즉 프로트엔드와 백엔드를 모두 다룰 수 있는 "풀스택" 개발자로 성장할 수 있습니다.

 

최근에는 자바스크립트 기반의 React, Vue.js, Angular 같은 프레임워크가 많이 사용되면서 자바스크립트의 중요성은 더 커지고 있습니다. 자바스크립트만 잘 알아도 다양한 웹 애플리케이션을 만들 수 있기 때문에, 배워두면 두고두고 쓸모 있는 언어입니다. 

 

자, 그러면 VSCode에서 자바스크립트를 실행하는 방법에 대해 설명하겠습니다. 

 

1. VSCode 설치하기

먼저 해야 할 일은 VSCode, 즉 Visual Studio Code를 다운로드해야 합니다. 아래에 있는 VSCode 공식 웹사이트에 들어가서 자신의 운영체제에 맞는 버전을 선택해 설치하면 됩니다. VSCode는 자바스크립트를 포함한 여러 프로그래밍 언어를 지원하는 텍스트 에디터로, 많은 개발자들이 사용하는 툴입니다. 설치가 끝나면 기본적인 준비가 된 거예요.

 

Visual Studio Code - Code Editing. Redefined

 

2. Node.js 설치하기

자바스크립트를 실행하기 위해선 Node.js도 필요합니다. 자바스크립트는 본래 웹 브라우저 안에서만 동작하도록 설계된 언어인데, 브라우저 밖에서도 사용하려면 Node.js가 필요하기 때문입니다. Node.js는 자바스크립트 코드를 서버 환경에서도 실행할 수 있게 해주는 도구입니다. 설치는 Node.js 공식 사이트에서 간단하게 할 수 있습니다. 다운로드 링크로 들어가서 자신의 운영체제에 맞는 파일을 선택하고 설치해주면 됩니다.

 

Node.js — Run JavaScript Everywhere

 

3. VSCode에서 Code Runner 설치하기

마지막으로, VSCode에서 자바스크립트를 더 쉽게 실행할 수 있도록 도와주는 Code Runner라는 확장 프로그램을 설치하는 걸 추천합니다. 이 프로그램은 자바스크립트뿐만 아니라 다른 여러 언어의 코드를 빠르게 실행할 수 있는 기능을 제공하기 때문에 코드 실행시 편립랍니다. 설치는 VSCode 왼쪽에 있는 확장 탭을 열고 'Code Runner'를 검색한 후 설치하면 됩니다.

 

4. 간단한 예제

Hello World! 출력하기

가장 기본적인 예제로 자바스크립트에서 가장 먼저 배우는 코드인 Hello World!를 출력하는 방법입니다. 아래 코드를 VSCode에서 실행하면, 콘솔 창에 "Hello World!"가 출력됩니다. console.log()는 자바스크립트에서 콘솔에 메시지를 출력하는 가장 기본적인 함수입니다.

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

 

간단한 덧셈 연산

다음으로는 간단한 덧셈 연산을 해보겠습니다. 두 숫자를 더하는 자바스크립트 코드를 작성하고 실행해보겠습니다. 이 코드를 실행하면, 두 숫자의 합인 30이 출력됩니다. 자바스크립트에서 let은 변수를 선언할 때 사용되고, + 연산자를 사용해 덧셈을 할 수 있습니다.

let a = 10;
let b = 20;
let sum = a + b;
console.log("The sum of a and b is: " + sum);
>> 30

 

함수로 계산하기

이번에는 조금 더 복잡한 예제로, 함수를 이용해 계산을 하는 방법을 보여주겠습니다. 자바스크립트에서는 함수를 만들어서 여러 번 반복되는 작업을 효율적으로 처리할 수 있습니다. 아래 코드는 5와 3을 곱해서 그 결과인 15를 출력하는 함수입니다. 함수를 사용하면 코드가 더 간결하고 재사용 할 수 있습니다.

function multiply(a, b) {
    return a * b;
}

let result = multiply(5, 3);
console.log("The result of multiplication is: " + result);
>> 15

 

조건문 사용하기

조건문을 사용해 특정 조건에 따라 다른 결과를 출력하는 예제도 보여드리겠습니다. 이 코드는 age 변수에 저장된 값에 따라 성인인지 미성년자인지를 콘솔에 출력하는 조건문입니다. age 변수에 18이 저장되어 있기 때문에 콘솔 창에 You are an adult.를 출력합니다. 조건문인 if와 else는 자바스크립트에서 조건을 처리할 때 자주 사용되는 문법입니다. 

let age = 18;

if (age >= 18) {
    console.log("You are an adult.");
} else {
    console.log("You are a minor.");
}
>> You are an adult.

 

마무리

마무리하자면, VSCode와 Node.js, 그리고 Code Runner 확장을 설치하면 자바스크립트를 브라우저가 아닌 환경에서도 손쉽게 실행할 수 있는 개발 환경이 완성됩니다. 이제 간단한 예제들을 직접 실행해보며 자바스크립트를 연습할 수 있을 겁니다. 이 과정을 통해 자바스크립트를 보다 폭넓게 활용할 수 있게 되니, 차근차근 익혀나가며 다양한 프로젝트에 적용해보시기 바랍니다.