JavaScript의 모든 것: 역사, Java와의 차이, 그리고 실행 환경

GoGoComputer·2025년 2월 2일

javaScript study

목록 보기

4/10

자바스크립트(JavaScript)는 웹을 동적이고 상호작용 가능하게 만드는 데 있어서 사실상 독보적인 언어입니다. 그런데 “JavaScript”라는 이름 때문에 “Java”라는 언어와 관계가 있다고 오해하는 분들도 많이 계시죠. 이번에는 JavaScript의 역사, Java와의 차이점, 그리고 브라우저(클라이언트 측) vs Node.js(서버 측) 등 자바스크립트가 어디서 어떻게 실행되는지 자세히 살펴보겠습니다.

1. JavaScript와 Java, 어떻게 다를까?

1) 언어의 이름은 비슷하지만, 완전히 다른 언어

Java와 JavaScript는 이름만 비슷할 뿐,
문법, 철학, 동작 방식 면에서 완전히 별개의 언어입니다.
Java는 강형(Statically Typed) 언어이며, 엄격하게 객체 지향(OOP) 패러다임을 따릅니다.
- 변수를 선언할 때 무슨 타입(int, String 등)인지 미리 명시해야 하고,
- 코드를 컴파일하여 별도의 바이트코드(.class 파일) 형태로 만들고, 이를 JVM에서 실행합니다.
JavaScript는 약형(Weakly Typed), 동적(Dynamic) 언어이므로,
- 같은 변수가 문자열이었다가 숫자로 바뀌어도 에러가 나지 않습니다.
- 실행(런타임) 중에 코드를 해석·컴파일(JIT)합니다.

2) JavaScript는 브라우저에서, Java는 브라우저 밖에서

Java로 작성된 코드는 웹페이지에 “직접” 삽입되지 않습니다. (옛날에는 Java 애플릿이라는 방식이 있었지만, 지금은 거의 쓰이지 않습니다.)
JavaScript는 HTML 페이지 안에 <script> 태그로 넣거나, .js 파일을 로드하면 브라우저가 바로 실행할 수 있습니다.
Java는 보통 서버 측(백엔드)에서 HTML을 미리 생성한 뒤 클라이언트에게 보내주는 방식을 많이 씁니다.
(Spring, JSP, Tomcat 등이 Java 기반 서버 기술들이죠.)

요약: Java는 일반적으로 “브라우저 외부”에서 동작하고, JavaScript는 “브라우저 내부”에서 동작할 수 있는 언어다.

2. JavaScript가 태어난 역사적 배경

1) 초창기 웹은 “정적(Static)”이었다

웹의 초기에는 HTML 문서와 이미지만 보여주고,
페이지를 새로고침해야만 내용을 바꿀 수 있었습니다.
웹페이지를 조금만 바꾸려 해도, 서버에 새 요청을 보내고 전체 페이지를 다시 받아야 했죠.
그 과정에서 사용자 경험(UX)이 좋지 않다는 문제가 대두되었습니다.

2) 웹페이지를 동적으로 만들 수 있는 언어의 필요성

브라우저가 “클릭, 입력, 마우스 이동” 같은 이벤트에 즉시 반응하고,
부분적으로만 화면을 바꿀 수 있으면 훨씬 편리하겠죠.
JavaScript는 이런 요구를 해결하기 위해 만들어졌습니다.
- 처음 이름은 LiveScript였으나, 당시 Java가 워낙 인기여서, 조금이라도 이름을 붙여서 인기를 끌어보려고 “JavaScript”로 바꾸었습니다.

3) 결론: JavaScript는 “브라우저 안”에서 일하는 최고의 언어

HTML/CSS와 함께 웹페이지를 동적으로 만들어줄 수 있는 유일한 언어가 되었고,
“페이지 전환 없이 백그라운드에서 HTTP 요청을 보내는” 기능(Ajax 등)이 탄생하여,
지금의 “모던 웹” 형태가 가능해졌습니다.

3. 자바스크립트의 클라이언트 측 vs 서버 측

1) 클라이언트 측 (브라우저에서 동작)

브라우저는 자바스크립트 엔진(예: Chrome의 V8, Firefox의 SpiderMonkey)을 내장하고 있습니다.
자바스크립트가 웹페이지와 상호작용하여 화면을 동적으로 변경하거나, 이벤트(버튼 클릭 등)를 처리합니다.
보안을 위해, 브라우저 안의 자바스크립트는
- 시스템 파일에 직접 접근할 수 없습니다.
- 운영 체제나 하드웨어를 막 제어할 수 없습니다.
- 인터넷상의 서버와 통신(Ajax, fetch)은 가능하지만, 그 이외에는 샌드박스 내에서 제한됩니다.

2) 서버 측 (Node.js로 실행)

Node.js: 구글 V8 엔진을 떼어내서, 브라우저 밖의 환경에서 자바스크립트를 실행하도록 만든 런타임입니다.
Node.js를 통해 서버를 만들면, “JavaScript”가 브라우저가 아닌 컴퓨터(서버)에서 돌아가면서
- 파일 시스템 접근,
- 네트워크 소켓,
- 데이터베이스 연결 등
  다양한 일을 할 수 있습니다.
다만, 브라우저가 아니라 서버에서 돌아가는 것이므로, 직접 HTML/CSS를 조작하는 일은 불가능합니다.

3) 구문은 같지만, 제공되는 기능(API)는 다르다

클라이언트 측 자바스크립트: document.querySelector(), alert(), fetch() 같은 웹 관련 API를 쓸 수 있음.
서버 측(Node.js) 자바스크립트: fs(파일 시스템), http 모듈, process 객체 등 서버·로컬 관련 API를 쓸 수 있음.
공통 구문(변수, 함수, 조건문 등) 은 똑같기 때문에,
웹브라우저용 자바스크립트를 배워 놓으면 Node.js도 익히기가 훨씬 쉽습니다.

4. JavaScript를 배우는 이유

브라우저에서 동적인 웹페이지를 구현하기 위해서는 JavaScript가 거의 필수입니다.
- HTML과 CSS만으로는 정적인 페이지까지만 만들 수 있지만, 이벤트 처리나 부분 업데이트 등은 할 수 없어요.
Node.js 등 환경이 생기면서, 자바스크립트를 서버나 데스크톱 앱 등으로도 확장 가능해졌습니다.
- 결과적으로 “프런트엔드(브라우저) + 백엔드(서버)” 모두를 자바스크립트로 개발하는 생태계가 자리 잡았습니다.
자바스크립트는 단일 언어로 다양한 플랫폼을 개발할 수 있어, 개발 효율이 높습니다.
- 웹페이지(프런트엔드), 서버(백엔드), 모바일 앱(React Native) 등.

5. 결론적으로…

Java와 JavaScript는 이름만 비슷할 뿐, 완전히 다른 프로그래밍 언어입니다.
자바스크립트는 웹페이지 내부(클라이언트 측) 를 조작하는 사실상 유일한 언어이고,
Java는 그렇지 않습니다(주로 서버 측 혹은 Android 앱 개발 등에 사용).
JavaScript는 태생부터 브라우저에서 쓰기 위해 만들어졌지만,
Node.js를 통해 브라우저 밖(서버, 로컬)에서도 동작할 수 있게 되었습니다.
브라우저 측과 서버 측 모두 같은 자바스크립트 문법을 쓰므로,
한 번 배워 놓으면 어떤 환경으로든 확장하기가 쉽습니다.

“왜 브라우저부터 시작할까?”

브라우저에서 자바스크립트를 배우면 직접 UI의 변화를 눈으로 확인할 수 있으니,
학습 동기가 더 잘 생기고 이해도 쉽습니다.
그리고 그 뒤에 Node.js 등의 환경으로 넘어가면,
동일한 언어로 파일 시스템 접근, 서버 운영 같은 새로운 API만 익히면 되죠.

더 깊은 학습 방향

기본 문법: 변수(약형, 동적 언어), 조건문, 반복문, 함수, 객체 등을 익혀야 합니다.
DOM 조작: 브라우저 환경에서 HTML 요소(문서 객체 모델, DOM)를 선택하고 수정하는 방법을 배워야 웹페이지를 동적으로 바꿀 수 있습니다.
이벤트 처리: 사용자의 클릭, 입력, 스크롤 같은 액션에 어떻게 반응할지 배워야 합니다.
비동기 통신(Ajax, fetch): 페이지 전환 없이 서버에 데이터를 요청하고 받아오려면 비동기 프로그래밍 방식을 이해해야 합니다.
Node.js: 서버 측에서 파일 시스템, 네트워크, 데이터베이스 등을 다뤄보고 싶은 경우, Node.js에 도전해 볼 수 있습니다.

결론

자바스크립트의 기원은 브라우저를 더 스마트하고 동적으로 만들기 위함이었다.
Java와는 전혀 다른 언어이므로 혼동하지 않아도 된다.
자바스크립트는 이제 클라이언트(브라우저) + 서버(Node.js) 모두에서 사용되어, 풀스택 개발이 가능해졌다.
이 강의에서는 브라우저 측 자바스크립트부터 집중적으로 배우며, 필요한 경우 Node.js도 다룰 것이다.

이렇게 자바스크립트가 어디서 왔고, 왜 이렇게 중요한지 이해하셨다면, 이제 본격적으로 “언어 자체” (문법, 객체, 함수, 이벤트 등)를 학습해 나가면 됩니다.
자바스크립트의 역사와 철학을 알면, 왜 언어가 이런 특성을 가지게 되었는지, 또 왜 웹 개발에 이렇게나 중요한지 맥락을 더 잘 이해할 수 있을 거예요.

궁금한 점이 생기면 언제든 질문해 주세요!

자바스크립트(JavaScript)는 웹페이지를 동적으로 만들기 위해 탄생한 언어이지만, 시간이 흐르면서 표준화 과정을 거쳐 계속 진화해 왔습니다. 그 역사와 배경을 이해하면, “왜 여러 브라우저에서 코드가 조금씩 다르게 동작하는지”나 “ECMAScript가 무엇인지” 같은 궁금증을 좀 더 쉽게 풀 수 있습니다. 이번에는 자바스크립트가 어떻게 발전해 왔고, 현재 어떤 표준화 프로세스를 거치는지 쉽게 길게 설명해 드릴게요.

1. 1995년, 자바스크립트의 탄생: LiveScript

1) 넷스케이프(Netscape)와 LiveScript

1995년, Netscape(당시 유명했던 웹 브라우저 회사)는 브라우저 안에서 간단한 스크립트를 수행할 수 있도록 LiveScript를 도입했습니다.
이 언어가 JavaScript로 이름이 바뀐 건, 당시에 “Java”가 아주 인기였고, 그 인기를 조금이라도 얻고자 일부러 “Java” 이름을 붙였다고 해요.
- 하지만 언어로서의 Java와는 전혀 별개입니다.

2) Microsoft Internet Explorer와 JScript

곧 이어 1996년에는 마이크로소프트(Microsoft)가 자사 브라우저(Internet Explorer)에 JScript를 탑재했습니다.
사실상 JavaScript와 JScript는 목적과 문법이 거의 같았지만, 미묘한 차이들이 있었고 이로 인해 브라우저마다 스크립트가 달리 동작하는 “단편화(파편화)” 문제가 생겼습니다.

2. 1996년 말부터 시작된 “표준화” 노력

1) ECMAScript의 등장

1996년 말, “브라우저마다 스크립트가 다르고, 서로 호환이 잘 안 되는 건 큰 문제가 되겠다”는 의견이 모아졌습니다.
그래서 JavaScript의 규격(사양)을 ECMA라는 국제 표준화 기구에 제출했고, 그 결과로 표준 사양인 ECMAScript가 탄생하게 됩니다.
- ECMA: 유럽컴퓨터제조사협회(European Computer Manufacturers Association)에서 시작된 기구로, 다양한 기술 표준을 관리합니다.
- ECMAScript: “JavaScript”가 구현해야 할 공식 표준 언어 사양의 이름입니다.

2) Microsoft도 결국 표준에 합류

90년대 후반, 2000년대 초반에는 마이크로소프트가 독자적인 행보를 보이기도 했지만, 결국 ECMAScript 표준을 지원하기 시작했습니다.
그렇게 수년간의 표준화 작업을 거쳐, 오늘날에는 대부분의 브라우저가 ECMAScript 표준을 어느 정도 준수하게 되었습니다.

3) 초기에는 한계가 많았다

90년대 ~ 2000년대 초반에는 자바스크립트로 할 수 있는 일이 제한적이었습니다.
- 주로 팝업 광고, “경고창 띄우기(alert)” 같은 간단한 장난스럽거나 스팸성 기능에 많이 쓰였죠.
또한 브라우저 간 차이가 커서, 같은 기능을 하려 해도 브라우저별로 코드를 따로 써야 하는 불편함이 있었습니다.

3. 2005년 이후, 자바스크립트의 대약진

1) Ajax의 등장

2005년 전후로 Ajax(비동기 통신) 기법이 각광받기 시작했습니다.
새로운 페이지를 통째로 로드하지 않고, 백그라운드에서 데이터를 받아와서 화면 일부만 갱신할 수 있게 되었죠.
이를 통해 자바스크립트로 구현할 수 있는 기능이 폭발적으로 늘어났습니다.
- “웹 애플리케이션”이라는 개념이 본격적으로 떠오른 시기이기도 합니다.

2) 지속적인 표준화와 브라우저 엔진 개선

2010년 ~ 2011년 무렵부터, 브라우저 개발사들이 표준 사양에 적극 협력하면서, 자바스크립트 엔진도 엄청나게 최적화되고 빨라졌습니다.
Google Chrome 브라우저가 선두 주자로 V8 엔진을 발표하고, 다른 브라우저들도 경쟁적으로 성능을 끌어올렸죠.
이 과정에서 표준화 위원회(ECMA TC39 위원회)가 매년 새로운 ECMAScript 기능을 도입하고, 브라우저는 이를 단계적으로 구현하게 되었습니다.

4. ECMAScript vs JavaScript

1) ECMAScript가 표준, JavaScript는 “구현”

ECMAScript는 “이 언어(표준)에는 이런 기능, 이런 문법이 있어야 한다”는 사양입니다.
JavaScript는 그 사양을 구현한 가장 대표적인 언어죠.
다른 구현으로는 예전에 존재하던 ActionScript(플래시에서 사용하던 언어)나 JScript 등이 있었습니다.

2) 표준화 프로세스

ECMA 기구는 매년 새로운 제안(Proposal)을 받아, 기능을 시험해 보고, 준수해야 할 규칙을 정의해 표준을 업데이트합니다.
브라우저(크롬, 파이어폭스, 사파리 등) 개발사들은 이 표준 사양이 완성되기 전에 미리 구현하기도 합니다.
- 그래서 어떤 브라우저에서는 “최신 기능이 되는데”, 다른 브라우저에서는 “안 된다” 같은 상황이 생기기도 하죠.

3) 최신 사양을 쓰려면?

ECMAScript 2015(ES6) 이후로 자바스크립트가 크게 발전했습니다.
- 화살표 함수(=>), 클래스, 모듈 시스템(import/export), let/const, 템플릿 리터럴 등 굉장히 많은 문법 변화가 있었어요.
이후로 ES7(2016), ES8(2017), … 이렇게 매년 새로운 기능을 도입하고 있습니다.
하지만, 모든 브라우저가 이 새 기능을 동시에 지원하는 건 아니어서, 호환성을 고려해야 할 때가 있습니다.
- 다음 강의나 브라우저 지원 모듈에서 “새로운 자바스크립트 기능을 안전하게 쓰는 방법(예: Babel, 폴리필)”을 배우게 될 거예요.

5. 현재 자바스크립트: “끊임없는 진화”

1) 지속적인 업데이트

자바스크립트(ECMAScript)는 매년 새 버전을 발표하고 있고, 브라우저 공급 업체들도 적극적으로 따라갑니다.
때문에 예전보다 훨씬 강력하고 편리한 문법들이 추가되어, “정말 다른 언어가 됐다”는 표현이 나올 정도로 많이 바뀌었습니다.

2) 최신 문법을 배우는 게 중요

많은 옛날 예제나 강의는 기존의 구식(JavaScript ES5 이전) 코드를 가르치는 경우가 많습니다.
요즘엔 ES6+ 버전의 문법을 쓰면 더 간결하고 가독성이 높은 코드를 짤 수 있습니다.
이 강의에서도 최신 문법을 기준으로 배우게 됩니다.
- 다만, 옛날 문법도 어느 정도 알면, 레거시 코드나 오래된 튜토리얼을 볼 때 도움이 됩니다.
- 우리는 주로 최신 문법을 쓰되, 필요 시 이전 문법과의 차이를 보여드릴 거예요.

6. 요약: 자바스크립트의 역사 흐름

1995년 Netscape → LiveScript → JavaScript로 이름 변경
1996년 Microsoft가 JScript를 만들어 IE에 탑재 (브라우저마다 차이 발생)
1996년 말: 언어 표준화 추진 → ECMAScript 사양 탄생
2000년대 초반: “파편화” 문제, 자바스크립트 활용도 낮았음 (주로 팝업, 간단한 이벤트 처리 수준)
2005년 전후로 Ajax 붐 → 자바스크립트가 웹에 없어서는 안 될 언어로 부상
2010년대: 브라우저 엔진의 급속 발전, ECMAScript 표준 업데이트 가속 → 최신 자바스크립트(ES6+)로 획기적 변화
현재: 매년 새로운 기능이 나오고, 대부분의 모던 브라우저가 이를 재빨리 구현. 자바스크립트는 끊임없이 진화 중.

7. 결론 및 앞으로의 학습

자바스크립트는 과거에 서로 다른 브라우저마다 각기 다른 언어처럼 보일 정도로 파편화가 심했지만,
지금은 표준화(ECMAScript) 덕분에 대부분 동일하게 작동합니다.
여전히 최신 기능을 지원하지 않는 옛날 브라우저가 있을 수 있으나, 폴리필, 트랜스파일러(Babel) 등 방법으로 문제를 해결할 수 있습니다.
이 강의에서는 최신 자바스크립트 문법(ES6+) 를 중심으로 배우되,
필요하면 이전(구) 문법도 간단히 언급하여 이해를 돕습니다.
ECMAScript 표준은 매년 업데이트 중이므로, 자바스크립트를 계속 쓰신다면 새 기능이 나올 때마다 조금씩 공부를 이어가는 게 좋습니다.

정리

JavaScript는 원래 넷스케이프에서 시작된 LiveScript가 이름을 바꾼 것으로,
1990년대 중반부터 지금까지 ECMAScript 표준을 통해 지속적으로 발전해 왔습니다.
초창기엔 브라우저 간 호환 문제가 심각했고, 용도도 제한적이었지만,
Ajax와 표준화 노력, 브라우저 엔진 발전 덕분에 현대 웹의 중심 언어가 되었습니다.
“ECMAScript”는 자바스크립트가 구현해야 할 표준 사양이며, 브라우저(크롬, 파이어폭스, 사파리 등)가 이를 엔진에 구현해 제공하는 구조입니다.
최신 자바스크립트(ES6+) 문법이 훨씬 편리하고 강력하므로, 이 강의에서는 최신 문법을 중심으로 학습합니다.
앞으로도 자바스크립트는 매년 업그레이드될 예정이므로, 계속해서 진화하는 언어라는 점을 기억해 두시면 좋습니다.

이제 자바스크립트의 역사와 표준화 과정을 살펴보셨으니,
본격적으로 언어 문법을 배우며, 실전 예제를 통해 “왜 웹 개발에 자바스크립트가 중요한지” 몸소 체험해 보시게 될 겁니다.
계속해서 최신 문법을 익히고, 브라우저 지원 여부를 확인하는 방법 등도 곧 배우실 테니, 흥미를 갖고 따라와 주세요!

이제 본격적으로 자바스크립트(JavaScript) 실습을 시작하기 전에,
우리가 코드를 작성하고, 테스트해 보는 과정을 좀 더 편리하게 해줄
개발 환경(Development Environment) 을 갖추어야 합니다.

여기서는
1) 코드 에디터(IDE) 로 Visual Studio Code(이하 VSCode) 를 설치하는 방법과,
2) 테스트 및 디버깅을 위해 구글 크롬(Chrome) 을 활용하는 과정을
차근차근 길게 설명해 드리겠습니다.

1. 왜 시스템 텍스트 에디터(메모장 등)로 코드를 작성하면 불편할까?

Windows의 메모장, Mac의 텍스트 에디터 같은 기본 프로그램도
아주 간단한 코드를 작성하기에는 가능하지만,
코드 작성이 길어질수록 가독성이 떨어지고,
자동 완성이나 에러 표시 같은 편의 기능이 전혀 없습니다.
그래서 개발자들은 편리하고 강력한 기능을 갖춘
전용 코드 에디터(또는 IDE) 를 사용해 왔고,
그 중에서 VSCode가 무료이면서도 기능이 뛰어나 가장 인기가 높습니다.

2. Visual Studio Code (VSCode) 설치하기

1) VSCode란?

마이크로소프트(Microsoft)에서 개발한 오픈소스 코드 편집기입니다.
무료이고, Windows, Mac, Linux 등 여러 운영 체제를 모두 지원합니다.
확장성이 매우 뛰어나서, 필요한 기능을 플러그인(확장 프로그램) 형태로 추가할 수 있습니다.
UI(사용자 인터페이스)도 직관적이고, 자동 완성, 문법 강조, 디버깅 등 다양한 기능을 기본 제공합니다.

2) 설치 방법

웹 브라우저에서 Visual Studio Code를 검색하거나, 주소창에 code.visualstudio.com을 입력합니다.
공식 홈페이지에 들어가면 “Download for…” 버튼이 보이는데,
접속한 환경(Windows, Mac, Linux)을 자동 인식해 버튼이 생성됩니다.
- 만약 자동으로 인식되지 않으면, 드롭다운 메뉴에서 직접 운영 체제를 선택하세요.
설치 프로그램(Installer) 를 다운로드한 뒤, 일반 프로그램 설치하듯이 “다음 → 다음” 과정을 거치시면 됩니다.
설치가 완료되면 VSCode를 시작해 보세요.

3) VSCode 기본 설정 (컬러 테마 등)

처음 실행하면, 밝은 테마나 어두운 테마(다크 모드) 등 다양한 Color Theme를 선택할 수 있습니다.
- 상단 메뉴에서 Preferences → Color Theme(또는 단축키)로 언제든 변경 가능합니다.
UI 요소(하단 상태 표시줄, 사이드바 등)는
View → Appearance 메뉴에서 보이거나 숨길 수 있습니다.

3. VSCode에서 프로젝트 열기

VSCode의 왼쪽 상단 메뉴에서 File → Open Folder를 선택해서,
원하는 프로젝트 폴더(예: my-javascript-project)를 열 수 있습니다.
이제 왼쪽 사이드바(Explorer 탭)에 폴더와 파일 목록이 나타나고,
파일을 클릭하면 중앙 편집창에서 소스 코드를 확인할 수 있습니다.

예:

my-javascript-project/
├── index.html
├── assets/
│   ├── styles/
│   └── scripts/
│       └── app.js
└── info/
    └── dynamic.html

이렇게 폴더를 열어 두면, HTML, CSS, JS 파일을
VSCode 한 곳에서 관리하고 편집할 수 있어 매우 편리합니다.

4. 유용한 확장 프로그램(Extension) 설치

VSCode에는 다양한 확장 프로그램(Extension)들이 있습니다.
이 중 자바스크립트 웹 개발에 유용한 몇 가지를 추천해 드립니다.

1) Material Icon Theme

파일이나 폴더 앞에 표시되는 아이콘을 더욱 예쁘고 직관적으로 바꿔 줍니다.
검색창(Extensions 탭)에서 material icon theme를 입력 후, 설치(Install) 버튼을 누르면 바로 적용됩니다.
반드시 필요한 것은 아니지만, 폴더 구조를 한눈에 보기 편해지는 장점이 있습니다.

2) Prettier - Code formatter

코드 포맷터(자동 정렬)로, 들여쓰기나 공백 위치 같은 부분을 한 번에 깔끔하게 정리해 줍니다.
검색창(Extensions 탭)에서 prettier 를 찾아 설치 후, 활성화하세요.
“코드가 엉망이어도, 자동으로 보기 좋게 재배열”해 주는 기능이 있으며,
특정 단축키(예: Windows 기준 Shift + Alt + F)나,
Format Document 기능을 통해 사용할 수 있습니다.

예시:

// 포맷팅 전 (들여쓰기 엉망)
function test( ) {
console.log("Hello" );}

// 포맷팅 후 (Prettier가 정리해 줌)
function test() {
  console.log('Hello');
}

이렇게 통일된 규칙으로 코드를 정리하면,
협업 시에도 가독성과 유지 보수 측면에서 매우 유리합니다.

5. VSCode 기본 사용 팁

1) 자동 완성 / 문법 강조

VSCode는 자바스크립트(JS), HTML, CSS 파일을 자동으로 인식해,
문법 강조(syntax highlighting)와 자동 완성(IntelliSense)을 제공해 줍니다.
코드에 에러가 있을 경우, 빨간 밑줄 등으로 문법 오류를 시각적으로 알려 주기도 합니다.

2) 단축키 사용

상단 메뉴의 Code → Preferences → Keyboard Shortcuts 로 들어가면,
원하는 기능에 단축키(keybinding) 를 지정할 수 있습니다.
Format Document 같은 기능을 단축키로 편하게 사용할 수 있으니,
개인 취향에 맞게 설정해 보세요.

3) 글로벌 설정 vs 워크스페이스 설정

User Settings(전역 설정): 모든 프로젝트에 동일하게 적용됩니다.
Workspace Settings(작업 영역 설정): 특정 프로젝트(폴더)에만 적용됩니다.
예: 글꼴 크기, Prettier 옵션(세미콜론 추가 여부, 큰따옴표 vs 작은따옴표) 등을 설정할 수 있습니다.

6. Chrome(크롬 브라우저)에서 코드 테스트하기

1) 왜 크롬(Chrome)을 추천하나요?

크롬은 자바스크립트 엔진인 V8을 탑재하고 있어, 빠른 성능과 좋은 개발자 도구(DevTools)를 제공합니다.
강의나 예제에서 크롬을 기준으로 진행하면,
여러분과 동일한 결과를 재현하기 쉽습니다.
나중에 배울 “브라우저 호환성” 문제를 다룰 때, 다른 브라우저도 고려하긴 하지만,
개발 시점엔 크롬을 쓰는 게 가장 편리합니다.

2) 크롬 개발자 도구 (DevTools)

크롬에서 웹페이지를 연 뒤, F12(또는 Ctrl + Shift + I, ⌘ + ⌥ + I 등)를 누르면,
개발자 도구 창이 열립니다.
Console(콘솔) 탭에서 console.log() 로 출력한 메시지나 에러를 확인할 수 있습니다.
Elements(요소) 탭에서는 HTML 구조를 실시간으로 확인하고 수정해 볼 수 있습니다.
다른 탭들도 네트워크 요청(Network), 성능(Performance), 소스 코드 디버깅(Sources) 등을 지원하므로,
앞으로 디버깅 모듈에서 자세히 배우게 됩니다.

(Tip) 시크릿 모드 사용

크롬 확장 프로그램이 너무 많으면, 웹사이트의 동작을 방해할 수 있습니다.
필요하다면 시크릿 모드로 페이지를 열어, 확장 프로그램 없이 깔끔한 상태에서 테스트하는 것을 추천드립니다.

7. 이제 준비 완료!

VSCode와 Chrome을 설치/설정하면, 가장 기본적인 자바스크립트 개발 환경이 마련됩니다.
VSCode로 파일(HTML, CSS, JS)을 작성하거나 수정하고,
Chrome(또는 다른 브라우저)에서 페이지를 열어 결과를 확인합니다.
개발자 도구(DevTools) 콘솔이나 VSCode의 자동 완성, 디버깅 기능을 활용해,
코드를 빠르게 수정하고 테스트할 수 있습니다.

이제 여러분은 자바스크립트 코드를 써 보고, 확인해 볼 완벽한 환경을 갖추신 겁니다!
강의에서 제공되는 예제 코드를 그대로 열어서 확인하거나,
직접 새 파일을 만들어 코드를 작성해 볼 수도 있죠.

8. 앞으로 배울 내용 미리보기

코드 작성: 브라우저에서 HTML 페이지를 로드하고, 그 안에 <script> 태그로 자바스크립트를 연결하게 됩니다.
DOM 조작: 자바스크립트로 화면 요소(HTML 태그) 를 찾아 변경하고, 사용자 이벤트(클릭 등)에 반응하는 법을 익힙니다.
디버깅 & 콘솔 로그: 콘솔(개발자 도구)에서 console.log() 등을 통해 코드 흐름을 파악하고, 오류를 찾아 해결합니다.
브라우저 호환성: 나중에 다른 브라우저(파이어폭스, 사파리, 엣지 등)에서도 동일하게 동작하게 만들려면 어떻게 해야 하는지도 배울 겁니다.

강의 후반부에는 Node.js를 다뤄, 브라우저 바깥(서버 측)에서도 JavaScript를 사용할 수 있음을 확인하게 되지만,
그 전까지는 브라우저 중심으로 배우면서, 시각적 결과를 확실히 확인해 볼 수 있을 거예요.

결론

VSCode는 자바스크립트 코드를 작성하기에 매우 적합한 에디터입니다.
- Material Icon Theme, Prettier 같은 확장 프로그램으로 더 편리하고 깔끔한 환경을 구성할 수 있습니다.
Chrome 브라우저는 개발자 도구(DevTools) 를 제공해, 디버깅과 테스트에 탁월합니다.
이렇게 VSCode + Chrome 조합을 갖추면, 자바스크립트 실습을 아주 쾌적하게 진행할 수 있습니다.
설정이 끝났다면, 이제 정식으로 자바스크립트 문법과 기초 개념을 배우며, 실습을 시작해 보시면 됩니다!

이제 모든 환경 설정이 완료되었으니, “자바스크립트의 기초”를 배울 준비가 되셨습니다.
곧 이어질 과정에서, 최신 문법(ES6+)을 기반으로 자바스크립트의 변수, 함수, 이벤트, DOM 조작 등을
체계적으로 익혀 나가 보도록 해요. 즐겁게 학습하시길 바라겠습니다!

GoGoComputer

IT를 좋아합니다.

이전 포스트

자바스크립트는 어디서 실행될까? 브라우저 vs. Node.js 차이점

다음 포스트