Visual Studio Code로 JS 실행하기

 

1. Node.js 설치하기

https://nodejs.org/ko

Node.js

 

 

2. Visual Studio Code 설치

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

3. visual studio code <확장>에서 "Code Runner" 설치

visual studio code에서는 단순히 코드를 빌드하고 실행하기 어렵기 때문에, 'Code Runner'라는 확장프로그램을 설치하여 쉽게 실행할 수 있게 설정할 수 있다!

code runner 실행방법

1) 마우스 우클릭  > Run Code

실행중지 > 실행창 마우스 우클릭 > Stop Code Run

---

2) 단축키 사용 > (맥) control + option + N

실행중지 > (맥) control + option + M

---

실행 언어 변경 단축키 > (맥) control + option + J 

 

 

4. 폴더 만든 후, js 파일 만들기 

나는 index.js라는 파일을 만들어서 a를 출력해볼 수 있는 js 파일을 만들어 보았다!

 

 

5. HTML을 실행하기 위해 <확장>에서 "Live Server" 설치하기

js 파일 만들때와 마찬가지로 , html 확장자를 가지는 파일을 생성하면 된다

Live Server란..?

 

Html/Css와 같은 시각적인 웹 페이지를 만들 때, 시시각각으로 페이지가 어떻게 변경되는지 확인하고 싶을때 사용

Live Server는 새로고침하지 않아도 저장할 때마다 실시간 라이브로 반영되어 변경사항을 바로 확인할 수 있기 때문에 편리함!

만든 후 [html:5] 라는 코드 자동 완성을 하면, html 기본 설정 파일 생성!

코드에서 우클릭 > Open with Live Server 또는 Command+L+O 

내가 작성한 코드가 웹페이지(본인은 크롬)에서 어떻게 뜨는지 바로 확인 가능

(코드를 저장하면, 웹페이지가 자동으로 변경됨)