자바스크립트란? 실행 환경

자바스크립트는 어떻게 태어났나

1995년, Netscape의 개발자 브렌던 아이크(Brendan Eich)는 단 10일 만에 자바스크립트를 만들었습니다. 처음 이름은 Mocha → LiveScript → JavaScript로 바뀌었는데, 당시 유행하던 Java의 인기에 편승하기 위한 마케팅 전략이었습니다. Java와 JavaScript는 사실상 관계없는 언어입니다.

초기 목적은 단순했습니다. 웹 폼 유효성 검사처럼 "HTML을 약간 동적으로 만들기" 위해서였습니다. 그러나 현재 자바스크립트는 브라우저를 넘어 서버, 모바일 앱, 데스크탑 앱, IoT까지 모든 곳에서 사용됩니다.

ECMAScript — 자바스크립트의 표준

자바스크립트는 ECMAScript(ES)라는 국제 표준 규격을 따릅니다. Ecma International이라는 단체가 표준을 정합니다.

주요 버전 역사:
ES5 (2009)  — 현재도 기본, strict mode 도입
ES6 (2015)  — 대혁신: let/const, 화살표 함수, 클래스, Promise, 모듈
ES2017     — async/await
ES2020     — Optional Chaining, Nullish Coalescing
ES2022     — class fields, Array.at()
ES2024     — 계속 발전 중

"모던 자바스크립트"는 보통 ES6(ES2015) 이후 문법을 가리킵니다. 이 강좌는 처음부터 모던 문법으로 배웁니다.

자바스크립트의 실행 환경

1. 브라우저 (가장 기본)

크롬, 파이어폭스, 사파리 등 모든 브라우저에는 자바스크립트 엔진이 내장되어 있습니다. 크롬은 V8 엔진을 사용합니다.

브라우저 실행 흐름:
HTML 파싱 → script 태그 발견 → JS 엔진 호출 → 코드 실행 → DOM 조작

2. Node.js (서버 사이드)

2009년 라이언 달이 V8 엔진을 브라우저 밖으로 꺼내 만든 런타임입니다. 자바스크립트로 서버, CLI 도구, 파일 처리 등을 할 수 있게 되었습니다.

브라우저 JS vs Node.js JS:
공통: 언어 문법, 데이터 구조, Promise 등
브라우저 전용: window, document, DOM API
Node.js 전용: fs(파일), http(서버), process 등

개발 환경 설정

빠른 시작 — 브라우저 콘솔

별도 설치 없이 크롬 브라우저를 열고 F12 → Console 탭을 클릭하면 바로 자바스크립트를 실행할 수 있습니다.

// 콘솔에 바로 입력
console.log("Hello, JavaScript!");
1 + 2
// 결과: 3

로컬 개발 환경

필요한 도구:
1. VS Code 설치 (https://code.visualstudio.com)
2. Node.js 설치 (https://nodejs.org) — LTS 버전 권장
3. VS Code 확장: ESLint, Prettier, JavaScript (ES6) code snippets

설치 확인:
node --version   // v20.x.x
npm --version    // 10.x.x

첫 번째 파일 실행

// hello.js 파일 생성
console.log("Hello, World!");
console.log(2025 - 1995 + "년의 자바스크립트");

// 터미널에서 실행
node hello.js

// 출력:
// Hello, World!
// 30년의 자바스크립트

자바스크립트의 특성 이해하기

• 인터프리터 언어: 컴파일 없이 줄 단위로 실행 (실제로는 JIT 컴파일로 빠름)
• 동적 타입: 변수에 어떤 타입의 값도 담을 수 있음
• 싱글 스레드: 한 번에 하나의 작업만 처리하지만 이벤트 루프로 비동기 처리
• 프로토타입 기반: 클래스처럼 보이지만 내부는 프로토타입 체인
• 함수형 + 객체지향: 두 패러다임을 모두 지원

console.log — 가장 중요한 디버깅 도구

console.log("기본 출력");
console.log(42, true, "복수 인자");
console.warn("경고 메시지");  // 노란색
console.error("에러 메시지"); // 빨간색
console.table([{name: "Kim", age: 30}, {name: "Lee", age: 25}]); // 표 형식
console.time("timer");
// ... 코드 실행 ...
console.timeEnd("timer"); // 실행 시간 출력

자바스크립트를 배우는 가장 빠른 방법은 브라우저 콘솔을 항상 열어두고 배운 내용을 즉시 실험하는 것입니다. 틀려도 괜찮습니다. 오류 메시지가 최고의 선생님입니다.

관련 검색어  ·  자바스크립트 기초, JavaScript 입문, ECMAScript란, Node.js 설치, 자바스크립트 역사, 브라우저 콘솔