Visual Studio Code 사용하는 JavaScript 개발 환경 만들기
Visual Studio Code에서 JavaScript를 실행하는 방법을 다룹니다.
2021. 03. 23 최초작성
개발환경 만드는 과정을 영상으로 설명한 유튜브 영상은 아래 링크를 통해 보세요.
1. 윈도우용 Node.js 설치 파일을 다운로드 받아 설치합니다.
아래 링크에서 Windows Installer (.msi) 항목에 있는 것 중 64-bit를 다운로드하면 됩니다.
https://nodejs.org/ko/download/
2. 옵션 변경없이 설치를 진행합니다.
‘
3. Visual Studio Code를 설치합니다.
Visual Studio Code 설치하는 방법( Windows / Ubuntu )
https://webnautes.tistory.com/1841
4. 확장에서 code runner를 검색하여 설치합니다.
5. hello.js 이름으로 다음 코드를 작성합니다.
| var a='hello world'; console.log(a); |
6. Ctrl + Alt + N을 누르면 출력에 실행결과가 보입니다.
7. 확장에서 live server를 검색하여 설치합니다.
8. “폴더 열기”를 선택합니다.
9. 새로운 폴더를 생성하여 이동한 후, “폴더 선택” 버튼을 클릭합니다.
10. “새 파일” 아이콘을 클릭한 후, 다음 코드를 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로 되어 있어야 한글이 깨지지 않습니다.
11. app.html 파일이 열린 상태에서 마우스 우클릭하여 “Open with Live Server”를 클릭합니다.
12. 디폴트 웹브라우저가 실행되면서 “안녕!”이라는 메시지가 보입니다.
13. “안녕!” 뒤에 “세상아”를 추가하고 Ctrl + S를 눌러 저장하는 순간 웹브라우저에 수정된 메시지 “안녕! 세상아”가 보이게 됩니다.
