[JS] 자바스크립트 개발환경 세팅: 브라우저 개발자도구, VS코드

자바스크립트 개발을 위한 개발환경을 설정합니다. 자바스크립트는 여러 브라우저와 에디터에서 실행할 수 있으나, 여기에서는 크롬 개발자 도구와 VS코드를 알아봅니다.

[ Contents ]

1. 브라우저 개발자 도구

동적 웹프로그래밍을 위한 언어이므로, 브라우저에서 자바스크립트를 실행할 수 있습니다. (크롬, 웨일, 엣지 등)

예를 들어, 크롬(Chrome) 브라우저에서 F12를 누르면 개발자 도구가 열립니다. 개발자 도구의 콘솔창에서 자바스크립트를 실행할 수 있습니다. 다만 아무 웹페이지에서나 자바스크립트가 모두 실행되진 않습니다.

따라서 빈페이지(about:blank)에서 실습을 진행해야 하는 단점이 있습니다. 또한 인터프리터 방식으로 한줄마다 실행되므로 긴 코드를 짜고 테스트하기는 어렵습니다.

기존에 쓰시던 편집기(에디터)를 이용하시면 좋습니다. (Atom, VS code 등)

요즘은 관련 플러그인이나 패키지만 설치하면 되기 때문에, 개발환경 구성하기가 쉽습니다.

[Atom] 아톰 에디터 설치 및 웹 개발 설정 (feat 패키지, 플러그인)

[ Contents ] 1. Atom Atom은 VS code와 비슷한 '소스 코드 편집기', 즉 에디터입니다. IDE가 아니기 때문에, 개발 분야에 따라 설정과 플러그인 설치가 필요합니다. 이 글에서는 웹 개발에 필요한 설정과

star7sss.tistory.com

(Atom 에디터 설치 방법)

[C/C++] 비주얼 스튜디오 코드 다운로드/설치하기 [VScode, Visual Studio Code]

2022.01.14 - [PL (Programming Language)/C] - [C] C언어 컴파일러 설치 (비주얼 스튜디오, Dev c++) [C] C언어 컴파일러 설치 (비주얼 스튜디오, Dev c++) C언어로 쓴 코드를 실행시키기 위해서는 '컴파일러'가 필요

star7sss.tistory.com

(비주얼 스튜디오 코드 설치 방법)

새 NodeJS 프로그램 만들기 - 마이컴파일러 - myCompiler

실행 코드 코드 저장 기존 코드를 유지하시겠습니까? 에디터에 코드가 있는 동안 언어를 전환하려고 합니다. 이를 유지하려면 “기존 코드 유지”를 선택합니다. 예제로 바꾸려면 “예제로 바

www.mycompiler.io

학습용으로 간단하게 실습하실 거라면 웹 컴파일러도 좋습니다.

회원가입 필요없이, 바로 코드를 입력하고 실행해볼 수 있어요.

그러면 다음 글부터는 JavaScript의 기본 문법에 대해서 알아보겠습니다.

[JS] 자바스크립트 배열 생성, 특징, 함수: push, unshift, pop, shift, length, splice (0)	2023.09.14
[JS] 자바스크립트 함수 정의 방법: 함수 선언식과 (익명)함수 표현식 (0)	2023.09.13
[JS] 자바스크립트 연산자: 나머지(%), 증감(++, --), 논리(!, \|\|, &&), 일치(===), ??(Null 병합), 삼항 연산자 (0)	2023.09.13
[JS] 자바스크립트 변수와 상수 선언: let, var, const (feat. let과 var의 차이) (0)	2023.09.13
[JS] 자바스크립트(JavaScript)란? 동적 웹프로그래밍과 모던 자바스크립트 (0)	2023.09.11