FE/JavaScript

[JS] 자바스크립트 개발 환경과 실행 방법

mandelina 2022. 2. 12. 17:49

자바스크립트 실행환경

브라우저의 주목적 : HTML,CSS,JS 를 실행해 웹페이지를 브라우저 화면애 랜더링 

                          클라이언트 사이드 Web API 제공 (DOM,BOM,Canvas,fetch,requestAnimation 등..)

 

Node.js의 주목적 : 브라우저 외부에서 js실행환경을 제공

                        node.js 고유 API 제공 

 

웹브라우저

구글 크롬브라우저 사용

 

개발자도구

크롬브라우저가 제공하는 개발자 도구는 웹 애플리케이션 개발에 필수적인 도구이다.

 

단축키 : 윈도우 (F12 or Crtl+Shift + i)

 

 

Node.js

2009년, 라이언 딜이 발표한 크롬 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경

(즉, 브라우저에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서 동작시킬수 있는 자바스크립트 실행환경.)

 

npm (node package manager): 자바스크립트 패키지 매니저

 

 

 

비주얼 스튜디오 코드

브라우저 콘솔 또는 Node.js의  REPL에서 자바스크립트 코드를 실행할 수 있지만 개발단계에선 부족함이 많다.

코드에디터를 사용하여 코드자동완성,문법오류감지,디버깅 등 편리한 기능을 사용할 수 있다.

 

코드에디터 인기순위

1. VS code

2. Web Storm

3.Vim

4.Subline Text

5.Atom

6.Emacs

 

 

VS Code - 확장 플러그인

 

Code Runner : VS Code의 내장 터미널에서 단축키를 사용해 자바스크립트를 비롯한 다양한

                   프로그래밍 언어로 구현된 소스코드를 간단히 실행할 수 있다.

                   

                     실행 단축키 : Ctrl + Alt + N

 

 

Live Sever : 소스코드를 수정할 때마다 수정사항을 브라우저에 자동으로 반영 

 

'FE > JavaScript' 카테고리의 다른 글

[JS] 배열 - splice() , slice() 차이  (0) 2022.05.03
[JS] String , Boolean , Object?  (0) 2022.05.02
[JS] 원시자료형과 참조자료형  (0) 2022.04.28
[JS] 변수와 호이스팅  (0) 2022.02.13
[JS] 자바스크립트란?  (0) 2022.01.31