[JavaScript] vscode에서 사용하기 (with Code Runner, Live Server)

VSCode에서 자바스크립트를 사용하기 위한 방법을 알아보겠다. 또한 에디터 내의 확장 설치를 통해 작성한 코드를 쉽게 확인하는 법도 알아볼 것이다.

💎 VSCode

vscode는
https://code.visualstudio.com/
이 곳에서 설치하면 된다.

💎 nodejs

https://nodejs.org/en/
노드 js의 공식 웹사이트이다. 자바스크립트를 함께 사용하기 위해 마찬가지로 설치해준다!

이제 vscode에서 추가로 확장 설치만 해주면 자바스크립트를 간편하게 이용할 수 있다. vscode에 왼쪽 메뉴를 보면 마켓플레이스인 'Extensions' 에서 Code Runner와 Live Server를 검색하여 설치한다.

🛒 Code Runner

확장 설치 후, js파일을 만들어서

console.log('hi!');

내용 입력 후 저장하여 ctrl + alt + n을 눌러 확인해보면 콘솔창에 hi!가 출력된다. 따로 vscode를 종료하지 않아도 바로 실행된다.

🛒 Live Server

Live Server는 html을 통해 웹페이지를 동적으로 확인할 때 바로바로 변경사항을 확인할 수 있는 기능을 갖는다.

🔎 Live Server 사용 방법

• 서버 작동 시작 -- 하단의 방법 중 1개 선택

1. alt + l + o (여기서 l은 L의 소문자)
2. 마우스 우클릭하여 Open with Live Server 클릭
3. vscode 하단의 Go Live 클릭

• 서버 작동 해제 -- 하단의 방법 중 1개 선택

1. alt + l + c
2. 마우스 우클릭하여 Stop Live Server 클릭
3. vscode 하단의 Port: 클릭

html 파일을 만들어 body 태그에 간단하게 입력해준 후 저장하면 웹페이지에 출력되는 걸 볼 수 있다.