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를 눌러 저장하는 순간 웹브라우저에 수정된 메시지 “안녕! 세상아”가 보이게 됩니다.
'WEB > javascript' 카테고리의 다른 글
| JavaScript를 사용하여 웹브라우저에서 RTSP 영상 재생하기 (28) | 2024.07.19 |
|---|
시간날때마다 틈틈이 이것저것 해보며 블로그에 글을 남깁니다.
블로그의 문서는 종종 최신 버전으로 업데이트됩니다.
여유 시간이 날때 진행하는 거라 언제 진행될지는 알 수 없습니다.
영화,책, 생각등을 올리는 블로그도 운영하고 있습니다.
https://freewriting2024.tistory.com
제가 쓴 책도 한번 검토해보세요 ^^
그렇게 천천히 걸으면서도 그렇게 빨리 앞으로 나갈 수 있다는 건.
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!
