# Visual Studio Code 에디터로 HTML, JavaScript 개발 환경 구축/실행하는 방법
1. VS Code 설치
2. 폴더지정, 파일 생성
3. JS파일 실행(Code Runner)
4. HTML 실행(Open In Browser, Live Server)
1. VS Code 설치
▶ Visual Studio Code 사이트 가서 OS에 맞게 다운 받는다.
Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.
code.visualstudio.com
윈도우(Windows)는 다운받은 파일로 설치하면 되고,
맥(Mac)은 다운로드 파일 자체가 실행 파일이라, 그냥 실행하면 된다.
2. 폴더 지정, 파일 생성
▶︎ "Open Folder"를 눌러서 파일들을 저장할 폴더를 지정
▶︎ 폴더를 새로 만들고 지정해도 된다 (test_01폴더를 만들어 지정했다.)
▶︎ 지정한 폴더가 추가 되었다.
▶︎ 두번째 아이콘을 클릭해 폴더를 만든다.(html, js 폴더를 만들었다)
▶︎ 첫번째 아이콘을 클릭해 파일을 만든다.(index.html 파일과 test.js 파일을 만들었다)
▶︎ test.js 파일에 콘솔에 로그 찍는 코드를 입력했다.
▶︎ index.html 에 기본적인 내용을 작성하고, test.js파일을 연결했다.
* html:5 만 입력해도 기본적인 <html></html> 왁구가 자동완성 된다
3. JS 실행 (Code Runner 활용)
: VS Code 상에서 js코드 실행을 위해, Code Runner 플러그인 설치(엄청 간단!)
▶︎ ① Extentions 메뉴를 누르고, ② "Code Runner"를 검색하고, ③ "Install" 버튼을 누르면 끝!
▶︎ js 편집창 상태에서, 오른쪽 상단의 ▷버튼을 누르면 js 코드가 실행된다.
* 맥 단축키 : Control + Option + N
* 윈도우 단축키 : Ctrl + Alt + N
4. HTML 실행(open in browser, Live Server 활용)
: VS Code에서 브라우저로 HTML을 실행(?) 시키기 위해, open in browser 플러그인 설치(엄청 간단!)
▶︎ ① Extentions 메뉴를 누르고, ② "open in browser"를 검색하고, ③ "Install" 버튼을 누르면 끝!
▶︎ html 편집창 상태에서, 마우스 우클릭 후 "Open in Browser" 클릭하면, 브라우저에서 html이 로드된다.
* 맥 단축키 : Option + B
* 윈도우 단축키 : Alt + B
▶︎ 브라우저에서 잘 실행이 된다.
▶︎ 실행되는 디폴트 브라우저를 chrome 등으로 변경하려면?
① Settings에 들어가, ② Open Settins(JSON) 아이콘을 누르고, ③ settings.json 파일에 "open-in-browser.default" : "chrome" 추가!
* settings.json 파일에 다른 항목을 추가할 때는 콤마( , ) 로 구분하여 작성한다.
▶︎ 서버 구동 환경에서 실행하고 싶다면? Live Server 플러그인을 설치!
① Extentions 메뉴를 누르고, ② "Live Server"를 검색하고, ③ "Install" 버튼을 눌러 설치.
▶︎ html 편집창에서 마우스 우클릭 후, "Open with Live Server"를 클릭. (우측 하단의 "Go Live"를 눌러도 됨)
*서버를 중단하려면 "Stop Liver Server"를 클릭.
▶︎ 로컬 서버(port: 5500)환경에서 html이 로드된다.
Visual Studio Code 에서 HTML, Javascript 개발 환경 구축 완료!
이제 코딩 시작!
< VS Code 기본 단축키 정리 참고 >
[VSCode] 자주 사용하는 기본 핵심 단축키(shortcuts) 정리 모음
< VS Code HTML 자동 완성 기능 사용법 참고 >
[VSCode] HTML 템플릿 자동완성 기능 사용 방법 기초/기본(Emmet: 에밋)
<VS Code에서 Tab키로 따옴표, 콜론, 괄호, 브래킷 이동 방법 참고>
[VS Code] 탭(Tab)으로 세미콜론, 괄호, 브래킷, 따옴표 점프 이동 방법(건너뛰기)
'개발(Development) > JS(자바스크립트)' 카테고리의 다른 글
| [JS] 자바스크립트 템플릿 리터럴: 백틱(``), 달러(${ }) 사용법 (0) | 2020.10.10 |
|---|---|
| [JS] 자바스크립트 래퍼 객체 (기본/원시타입 표준메서드) (2) | 2020.10.10 |
| [JS] 자바스크립트 null은 객체? 기본 타입! (typeof null) (0) | 2020.10.10 |
| [JS] 자바스크립트 데이터 타입: 기본 타입(원시 타입) (0) | 2020.10.09 |
| [JS] 자바스크립트 변수 생성 과정, 호이스팅 정리 (0) | 2020.10.08 |
댓글