반응형

Visual Studio Code에서 JavaScript를 실행하는 방법을 다룹니다. 




2021. 03. 23  최초작성





1. 윈도우용 Node.js 설치 파일을  다운로드 받아 설치합니다. 

아래 링크에서 Windows Installer (.msi) 항목에 있는 것 중 64-bit를 다운로드하면 됩니다.  

https://nodejs.org/ko/download/ 

 

 

 

 

 

2. 옵션 변경없이 설치를 진행합니다. 

 

 

 

2. Visual Studio Code를 설치합니다. 

 

Visual Studio Code 설치하는 방법( Windows / Ubuntu )

https://webnautes.tistory.com/1197





3. 확장에서 code runner를 검색하여 설치합니다. 

 




4. hello.js 이름으로 다음 코드를 작성합니다.

 

var a='hello world';

console.log(a);




5. Ctrl + Alt + N을 누르면 출력에 실행결과가 보입니다. 

 




6. 확장에서 live server를 검색하여 설치합니다.

 




7. “폴더 열기”를 선택합니다. 

 




8. 새로운 폴더를 생성하여 이동한 후, “폴더 선택” 버튼을 클릭합니다.

 





9. “새 파일” 아이콘을 클릭한 후, 다음 코드를 app.html 이름으로 작성한 후, Ctrl + S를 눌러서 저장합니다.

 



<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var str = '안녕! 세상아';

document.getElementById("demo").innerHTML = str;
</script>

</body>
</html>




상태표시줄에 UTF-8로 되어 있어야 한글이 깨지지 않습니다. 

 





10. app.html 파일이 열린 상태에서 마우스 우클릭하여 “Open with Live Server”를 클릭합니다. 

 




11. 디폴트 웹브라우저가 실행되면서 “안녕!”이라는 메시지가 보입니다. 

 




12. “안녕!” 뒤에  “세상아”를 추가하고 Ctrl + S를 눌러 저장하는 순간 웹브라우저에 수정된 메시지 “안녕! 세상아”가 보이게 됩니다. 

 




반응형

해본 것을 문서화하여 기록합니다.
부족함이 있지만 도움이 되었으면 합니다.


포스트 작성시에는 문제 없었지만 이후 문제가 생길 수 있습니다.
질문을 남겨주면 가능한 빨리 답변드립니다.


제가 쓴 책도 한번 검토해보세요 ^^

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">