콘솔창에 출력할 때 사용한 document.write() 메서드는 웹 브라우저에 텍스트를 표시해 주는 코드입니다. 그런데 확장 프로그램을 사용하면 웹 브라우저 없이 에디터에서 바로 실행하므로 에디터에서 실행할 때는 document.write() 메서드 대신 console.log() 메서드를 사용합니다.
이때 실행결과가 그림 8-7처럼 보이지 않고 알아보기 힘든 문자가 나오거나 글자가 깨져 보인다면 Node.js를 설치해 주세요. Node.js 사이트(https://nodejs.org/ko)로 가서 화면에 보이는 최신 LTS 버전(집필 당시 16.14.0 LTS 버전)의 파일을 내려받아 설치합니다. 설치 방법은 어렵지 않습니다. 계속 [Next] 버튼을 누르다가 [Finish] 버튼이 나오면 끝납니다. 설치가 끝나면 컴퓨터를 재부팅한 후 VSCode를 다시 실행해 보세요.
수코딩의 조언
VSCode의 확장 프로그램으로 자바스크립트 코드를 실행하는 방법은 제약사항이 꽤 많습니다. 자바스크립트 언어에 내장된 기능은 확장 프로그램으로 실행할 수 있지만, 11장과 12장에서 배우는 웹 브라우저와 직접 관련 있는 기능은 VSCode와 같은 코드 에디터에서 실행할 수 없습니다. 그리고 코드를 실행할 때 발생하는 오류 메시지도 웹 브라우저와 차이가 있습니다. 그래도 에디터 안에서 바로 간단하게 실행결과를 볼 수 있다는 점은 유용하므로 적절하게 활용하길 바랍니다.