[javascript] 자바스크립트, vscode에서 바로! 내장터미널로 쉽게 실행하는 방법

 

안녕하세요! 콩선생입니다.

오늘은 처음 JavaScript(자바스크립트)를 시작하는 분들을 위해 자바스크립트는 무엇인지 또 간단하게 실습환경을 만들 수 있는 방법에 대해 알아보고자합니다. 오늘은 많이들 사용하는 무료 코드에디터인 vscode에서 내장터미널을 이용해 편리하게 자바스크립트를 공부할 수 있는 실습환경을 만들어 보려고합니다.

 

 

자바스크립트 실행방법

JavaScript란? 간단실습환경 세팅하기

1. JavaScript (자바스크립트)란?

JavaScript(자바스크립트)는 간단하게 말해 웹페이지를 동적으로 만들어주는 프로그래밍 언어입니다. HTML이 뼈대와 구조를 담당하고 CSS가 스타일을 담당한다면 자바스크립트는 웹페이지의 행동 즉 움직임을 제어합니다. 현재 컴퓨터나 스마트폰 등에 사용되는 웹 브라우저에는 자바스크립트 인터프리터가 대부분 내장되어있습니다.

 

자바스크립트는 html의 내용을 변경할 수도있고, 속성과 스타일 변경이 가능합니다.

자바스크립트는 웹개발에서 핵심적인 역할을 하는 언어이며 활용범위는 매우 넓습니다.

프론트엔드 개발뿐아니라 Node.js의 등장으로 서버측 프로그래밍까지 가능하게 되었습니다.

 

2. 자바스크립트 특징

웹페이지를 동적으로 만드는 스크립트언어
자바스크립트는 스크립트 언어입니다. 별도의 컴파일 과정을 거치지않고 웹브라우저가 한줄씩 읽어가며 실행됩니다. (인터프리터언어) 이름이 비슷한 Java와는 완전 다른 프로그래밍언어입니다. 자바는 컴파일언어로 작성된 코드를 먼저 기계어로 번역(컴파일) 한 후 실행됩니다.

 

객체 기반 프로그래밍 (Object-based)

 

동적 타이핑

 

웹페이지를 동적으로 만드는 스크립트언어
자바스크립트는 함수형 프로그래밍을 지원합니다. 함수를 값처럼 취급하여 고차함수, 익명함 수등을 활영하여 간결하게 작성할 수 있습니다. 가독성을 높여 유지보수를 용이하게 만들어줍니다.

 

넓은활용범위
예전에는 웹브라우저에서만 사용되었지만 Node.js 과 같은 런타임 환경으로 서버측 프로그래밍까지 가능해진 강력한 프로그래밍언어입니다. 뿐 아니라 React Native, lonic 과같은 프레임워크를 이용하여 모바일 앱 개발에도 활발히 사용됩니다.

 

3.  VSCODE에서 내장터미널로 간단하게 실행하기

1)  nodejs 설치 (설치 홈페이지 : https://nodejs.org/en)

Node.js — Run JavaScript Everywhere

 

정상 설치가 되었는지는 명령프롬프트(cmd)에서 node -v 입력시 버전이 뜨면 확인이 가능합니다.

node 설치확인

2) vscode실행하기 / js파일 생성

vscode를 켜줍니다. (vscode설치방법 바로가기)

js 파일을 만들어줍니다.

원하는파일명.js로 만들면됩니다.

vs코드를 실행하자

 

3) 터미널 실행하기

 

터미널 실행 탄축키

Windows / Linux : Ctrl + `(백틱)

macOs : Cmd + `(백틱)

참고) 백틱을 못찾는 분들이 많아 백틱은 ~모양키입니다 숫자1 옆에 있습니다.

 

vscode터미널 실행화면

 

 

상단메뉴에서 직접 클릭하여 열수도 있습니다.

터미널-새터미널 클릭하면 터미널이 실행됩니다.

 

JavaScript 실행해보기

script.js 파일에 아래와 같이 코드를 입력합니다.

여기서 console.log(콘솔창에 띠우라는 명령어로 주소 디버깅할때 많이 이용되는 명령어입니다. 상세한 부분은 별도로 알아보도록하겠습니다.)

console.log("hello world");

 

터미널에서 node script.js 를 입력하면

정상적으로 실행되는 것을 확인할 수 있습니다.