안녕하세요. 엔지엠소프트웨어입니다. Visual Studio Code(vscode)에서 node.js(노드)를 설치하지 않고, 자바스크립트를 실행하는 방법에 대해 알아봅시다. 옛날~ 웹을 할 때는 노트패드나 드림위버, 울트라에디터, 에디터++을 비롯한 나모웹에디터등등... 여러가지 툴들이 춘추전국 시대를 이루었습니다. 지금은 모두 추억(?)이 되고, vscode로 통일되었죠. 아무튼, 웹개발은 CS 개발 도구에 비해 디버깅을 강력하게 지원하는 툴이 없었습니다. 노드가 아니면 지금도 마찬가지구요. 그래도 콘솔이라는 막강한 기능이 있어서 예전보다는 상황이 많이 좋아진건 사실입니다^^; vscode에 새로운 js 파일을 만들고 아래 코드를 추가하세요.

let arr = [1, 2, 3, 4, 5];

console.log("log: ", arr);
console.info("info: ", arr);
console.warn("warn: ", arr);
console.error("error: ", arr);

아마 지금은 실행되지 않을겁니다. 디버깅도 안되죠. vscode의 디버깅은 노드 환경에서 실행할 수 있기 때문입니다. 확장으로 이동하세요. 코드 러너(Code Runner)를 검색하고 설치하세요. 아래 그림은 이미 설치되어 있기에 Install 버튼이 표시되지 않고 있습니다.

이제 test.js에서 Ctrl+Alt+N을 눌러보세요. 아웃풋에 콘솔 내용이 표시되는걸 알 수 있습니다.

이외에도 여러가지 방법으로 디버깅을 할 수 있는데요. 아쉽게도 vscode의 output은 로그 레벨에 따라 색상을 구분해주지 못합니다. 크롬은 log, info, warn, error에 따라 색상으로 표시하기 때문에 좀 더 빠르게 문제를 찾고 분석할 수 있습니다. 이외에도 여러가지 콘솔 기능이 있는데요. 언제 한번 시간내서 자세하게 정리해보도록 할께요^^

개발자에게 후원하기

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~