[Javascript] vscode 이용해서 자바스크립트 코딩 방법 - Live Server - HTML, Javascript

안녕하세요

오늘은 마이크로소프트의 vscode를 이용하여
Javascript 코드를 작성하는 방법에 대해서 알아볼게요

먼저 vscode를 다운 받아야 겠죠?

구글에 검색해서 다운받으셔도 되지만

아래의 링크에 들어가셔서 다운로드 하셔도 됩니다

code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

 

운영체제에 맞게 다운로드 하시면 됩니다

윈도우랑 리눅스(레드헷, 데비안 계열), 맥OS를 지원하네요 ㅎㅎ

 

설치를 끝내고 vscode를 들어와 보시면

위와 같은 UI를 볼 수 있어요

먼저 프로젝트 폴더를 만들어 주세요

안만들고 그냥 html js 파일을 작성하셔도 되지만

폴더를 만들어서 따로 관리하는 것이 프로젝트 관리에 더욱 효율적이겠죠?

 

폴더를 만드셨으면 이제 html 파일을 만들어 주세요

대부분의 html 기본 파일명은 index입니다

작성하실 때 꿀팁인데

! + tab 눌러 주시면 html 기본틀이 만들어진 것을 볼 수 있어요

 

그러면 이렇게 html 코드틀이 이쁘게 작성된 것을 볼 수 있어요

이제 여기에 css, js 코드를 입히면 되는데

오늘은 js 코드를 넣어볼 거예요

 

main.js 라고 코드를 작성해 주세요

간단하게 alert를 띄울 수 있게 코드를 작성했어요

alert("hello")

코드를 작성하고 저장해주세요

 

그리고 html 코드에 js 코드를 불러와 줘야겠죠?

inline 코드로 작성해도 되지만 JS를 불러오는식으로 할게요

<script src="main.js"></script>

코드를 </body> 위에 넣어주세요

이러면 html 코드 파싱하는 마지막에 JS 코드를 읽게 되겠죠?

Basic한 js 코드는 body 코드 최하단에 위치하는게 좋습니다

 



html 코드를 작성할 때 거의 필수인

Live Server Extention을 추천해 드릴게요

Live Server는 코드를 실시간으로 페이지에 출력해줍니다.

하단에 Go Live 를 눌러주시면 바로

Run 이 가능합니다

 

보시면 이렇게 alert가 띄워지는 것을 볼 수 있어요

감사합니다 🤗