자바스크립트란

🎯 학습 목표

이 강을 마치면 다음을 할 수 있습니다.

• 자바스크립트가 무엇인지, 웹에서 어떤 역할을 담당하는지 설명할 수 있습니다.
• HTML·CSS·JavaScript 세 언어가 각각 어떻게 협력하는지 이해할 수 있습니다.
• 브라우저 개발자 도구(콘솔)에서 자바스크립트를 직접 실행할 수 있습니다.
• 이 강좌의 전체 학습 흐름을 파악하고 앞으로의 방향을 잡을 수 있습니다.

🌐 웹을 구성하는 세 가지 언어

이 섹션에서는 자바스크립트가 탄생한 배경과 웹에서의 역할 분담 구조를 살펴보겠습니다.

오늘날 우리가 사용하는 모든 웹 페이지는 세 가지 핵심 언어로 만들어집니다. HTML(HyperText Markup Language)은 페이지의 뼈대, 즉 "무엇이 있는가"를 정의합니다. 제목, 문단, 버튼, 이미지 같은 요소들의 구조와 내용을 담당하는 언어입니다. CSS(Cascading Style Sheets)는 "어떻게 보이는가"를 결정합니다. 색깔, 크기, 여백, 폰트처럼 시각적인 표현을 담당합니다.

그런데 HTML과 CSS만으로 만들어진 페이지는 완전히 고정되어 있습니다. 버튼을 눌러도 아무 일도 일어나지 않고, 입력창에 글자를 쳐도 반응이 없습니다. 마치 아름답게 인쇄된 책처럼, 보기에는 좋지만 상호작용이 불가능한 정적인 결과물입니다.

바로 여기서 JavaScript(자바스크립트)가 등장합니다. 자바스크립트는 "어떻게 동작하는가"를 담당하는 언어입니다. 버튼을 클릭했을 때 팝업을 띄우거나, 스크롤에 따라 요소를 보이거나 숨기거나, 서버에서 새 데이터를 받아와 화면을 갱신하는 등 모든 동적인 행동이 자바스크립트로 구현됩니다.

언어	역할	비유
HTML	구조와 내용	건물의 뼈대와 방 배치
CSS	시각적 표현	벽지, 페인트, 인테리어
JavaScript	동작과 상호작용	전기, 배관, 자동문

세 언어는 서로 독립적이지만, 함께 사용될 때 비로소 우리가 경험하는 풍부한 웹 페이지가 완성됩니다. 자바스크립트를 배운다는 것은 이 세 언어 조합에서 "살아있는 동작"을 불어넣는 능력을 갖추는 것입니다.

📖 자바스크립트의 탄생과 성장

이 섹션에서는 자바스크립트가 어떻게 탄생했고, 왜 이토록 중요한 언어가 되었는지 그 역사와 맥락을 살펴보겠습니다.

자바스크립트는 1995년 넷스케이프(Netscape)社의 엔지니어 브렌던 아이크(Brendan Eich)가 단 10일 만에 만든 언어입니다. 당시 웹은 오직 HTML만으로 구성된 정적인 문서의 세계였고, 넷스케이프는 이 정적인 페이지에 간단한 동적 기능을 추가하고 싶었습니다. 그 결과물이 바로 자바스크립트입니다.

처음에는 "LiveScript"라는 이름이었지만, 당시 폭발적 인기를 끌던 Java 언어의 인지도를 활용하기 위해 "JavaScript"로 이름을 바꿉니다. 하지만 중요한 사실은, 자바스크립트와 자바(Java)는 이름만 비슷할 뿐 전혀 다른 언어입니다. 마치 "햄버거"와 "햄"이 다른 것처럼 말입니다.

1997년, 자바스크립트는 ECMAScript라는 국제 표준으로 공식화됩니다. 여러 브라우저 회사들이 제각각 다른 방식으로 구현하던 혼란을 막기 위해서였습니다. 이 표준 덕분에 어떤 브라우저에서든 동일하게 동작하는 자바스크립트 코드를 작성할 수 있게 되었습니다. 2015년에는 ES6(ECMAScript 2015)라는 대규모 업데이트가 이루어지면서 화살표 함수, 클래스, 모듈 시스템 등 현대적인 문법이 대거 도입됩니다. 이후 매년 새로운 기능이 추가되고 있습니다.

가장 큰 전환점은 2009년 Node.js의 등장입니다. 그 전까지 자바스크립트는 오직 브라우저 안에서만 실행되는 언어였습니다. Node.js는 자바스크립트를 브라우저 밖으로 꺼내어, 서버에서도 실행할 수 있게 만들었습니다. 이로써 자바스크립트 하나로 웹 프론트엔드와 서버 백엔드를 모두 개발하는 "풀스택" 시대가 열렸습니다.

현재 자바스크립트는 GitHub의 연간 개발자 설문에서 10년 이상 연속으로 가장 많이 사용되는 프로그래밍 언어 1위를 차지하고 있습니다. 웹 브라우저, 서버, 모바일 앱(React Native), 데스크톱 앱(Electron), 심지어 IoT 기기까지 자바스크립트가 동작하고 있습니다. 단 10일 만에 만들어진 언어가 30년이 지난 지금도 세계에서 가장 많이 쓰이는 언어가 되었다는 사실이 놀랍습니다.

⚙️ 자바스크립트의 실행 환경

이 섹션에서는 자바스크립트가 어디서, 어떻게 실행되는지 실행 환경을 살펴보겠습니다.

자바스크립트 코드는 반드시 어떤 실행 환경(Runtime) 위에서 동작합니다. 실행 환경이란 자바스크립트 코드를 읽고 해석하여 실제로 동작시켜 주는 프로그램이라고 이해하면 됩니다. 대표적인 실행 환경은 두 가지입니다.

첫 번째는 브라우저(Browser)입니다. Chrome, Firefox, Safari, Edge 등 모든 현대 브라우저에는 자바스크립트 엔진이 내장되어 있습니다. Chrome은 V8이라는 엔진을 사용하는데, 이 엔진이 자바스크립트 코드를 매우 빠르게 실행시켜 줍니다. 브라우저 환경에서는 웹 페이지의 HTML 요소를 조작하거나, 사용자의 클릭·스크롤 이벤트에 반응하는 코드를 작성할 수 있습니다. 우리가 매일 사용하는 구글, 유튜브, 카카오톡 웹 버전의 동적인 기능들이 모두 이 브라우저 환경에서 자바스크립트로 동작합니다.

두 번째는 Node.js입니다. Node.js는 브라우저 없이 컴퓨터에서 직접 자바스크립트를 실행할 수 있게 해주는 환경입니다. 동일한 V8 엔진을 사용하지만, 브라우저 없이 운영체제 위에서 바로 실행됩니다. 웹 서버, API 서버, 자동화 스크립트 등을 자바스크립트로 만들 수 있습니다. 앞으로 배울 내용의 대부분은 두 환경 모두에서 공통적으로 사용되는 핵심 문법입니다.

구분	브라우저	Node.js
실행 방식	HTML 파일 or 개발자 도구 콘솔	터미널에서 node 파일명.js
주요 용도	웹 페이지 동작, DOM 조작	서버, API, 자동화 스크립트
특수 기능	window, document, DOM API	파일 시스템, 네트워크, OS 접근
공통 문법	변수, 자료형, 함수, 배열, 객체, 조건문, 반복문, Promise 등

이 강좌에서는 주로 브라우저 개발자 도구의 콘솔(Console)을 사용하여 코드를 실행할 것입니다. 별도의 프로그램 설치 없이 지금 사용 중인 브라우저에서 바로 실습할 수 있다는 장점이 있습니다.

브라우저 콘솔 열기

콘솔은 브라우저에 내장된 자바스크립트 실행기이자 디버깅 도구입니다. 다음 방법으로 열 수 있습니다.

• Windows / Linux: F12 또는 Ctrl + Shift + I
• Mac: Cmd + Option + I
• 열린 패널에서 "Console" 탭을 클릭합니다.

콘솔 탭을 클릭하면 > 모양의 입력 커서가 표시됩니다. 이곳에 자바스크립트 코드를 직접 입력하고 Enter를 누르면 즉시 실행 결과를 확인할 수 있습니다. 콘솔은 앞으로 이 강좌 전반에 걸쳐 실습 도구로 계속 사용하게 됩니다.

💻 첫 번째 자바스크립트 코드

이 섹션에서는 실제로 자바스크립트 코드를 작성하고 실행해 보겠습니다.

모든 프로그래밍 언어 입문의 첫 번째 예제는 화면에 "Hello, World!"를 출력하는 것입니다. 자바스크립트에서는 console.log()라는 함수를 사용합니다. 브라우저 콘솔을 열고 아래 코드를 입력한 뒤 Enter를 눌러보세요.

console.log("Hello, World!");

console.log()는 괄호 안에 전달한 값을 브라우저 콘솔에 출력하는 함수입니다. console은 브라우저가 제공하는 디버깅 도구 객체이고, log는 그 안에 들어있는 출력 기능입니다. 지금은 함수나 객체가 무엇인지 몰라도 괜찮습니다. 9강과 14강에서 자세히 배우게 됩니다. 지금은 "콘솔에 무언가를 출력할 때 쓰는 도구"라고 이해하면 충분합니다.

조금 더 나아가 보겠습니다. 자바스크립트로 간단한 계산도 할 수 있습니다.

console.log(1 + 2);             // 3 출력
console.log(10 * 5);            // 50 출력
console.log(100 / 4);           // 25 출력
console.log("안녕" + "하세요"); // 안녕하세요 출력

위 코드에서 // 이후의 내용은 주석(Comment)입니다. 주석은 사람이 읽기 위한 설명글로, 자바스크립트 엔진이 실행할 때 완전히 무시됩니다. 코드의 의도를 설명할 때 활용합니다.

숫자끼리 +를 사용하면 덧셈이 되고, 문자열(글자)끼리 +를 사용하면 두 문자열이 하나로 이어 붙여집니다. 같은 기호라도 대상에 따라 다르게 동작한다는 점이 흥미롭습니다. 이 내용은 5강 연산자에서 깊이 다룹니다.

이번에는 HTML 파일에서 자바스크립트를 사용하는 방법도 살펴보겠습니다. 가장 기본적인 방법은 HTML 파일 안에 <script> 태그를 삽입하는 것입니다.

<!DOCTYPE html>
<html>
<head>
  <title>나의 첫 JS 페이지</title>
</head>
<body>
  <h1>자바스크립트 시작!</h1>

  <script>
    console.log("HTML 파일에서 실행됩니다!");
    alert("안녕하세요, 자바스크립트!");
  </script>
</body>
</html>

<script> 태그 안에 자바스크립트 코드를 작성하면, 브라우저가 HTML을 읽다가 해당 태그를 만났을 때 코드를 실행합니다. alert() 함수는 브라우저에 팝업 경고창을 띄웁니다. 실제 개발에서는 자주 사용하지 않지만, 자바스크립트가 동작한다는 것을 눈으로 확인하는 데 유용합니다.

<script> 태그는 보통 </body> 바로 앞에 배치합니다. HTML 요소들이 모두 로드된 이후에 자바스크립트가 실행되어야 페이지 내의 요소를 안전하게 접근할 수 있기 때문입니다. 이 이유는 16강 DOM에서 자세히 다룹니다.

실무에서는 자바스크립트 코드를 별도의 .js 파일에 분리하고, HTML에서는 <script src="app.js"></script>처럼 불러오는 방식을 사용합니다. 코드가 길어질수록 파일을 분리하는 것이 관리하기 훨씬 편리하기 때문입니다.

⚠️ 자주 하는 실수와 주의점

이 섹션에서는 자바스크립트 입문자들이 처음에 자주 겪는 혼란과 실수를 살펴보겠습니다.

자바(Java)와 자바스크립트(JavaScript)를 혼동하는 실수가 가장 흔합니다. 두 언어는 이름이 비슷해서 같은 것이라고 생각하기 쉽지만, 완전히 다른 언어입니다. 자바는 안드로이드 앱, 기업 서버 시스템 등에 주로 사용되는 강타입(strongly-typed) 컴파일 언어이고, 자바스크립트는 웹 브라우저와 Node.js 환경에서 실행되는 동적 타입(dynamically-typed) 인터프리터 언어입니다. 면접이나 대화에서 이 둘을 혼동하면 매우 기초적인 실수로 여겨질 수 있으니 처음부터 확실히 구분해 두는 것이 중요합니다.

대소문자를 정확히 구분해야 합니다. 자바스크립트는 대소문자를 엄격하게 구분합니다. console.log()를 Console.log()나 console.Log()로 쓰면 오류가 발생합니다. 처음에는 이 부분에서 많이 당황할 수 있지만, 조금만 익숙해지면 자연스럽게 몸에 배게 됩니다. 오류가 나면 먼저 대소문자를 확인하는 습관을 기르세요.

세미콜론(;) 처리도 초보자들이 헷갈리는 부분입니다. 자바스크립트는 줄 끝에 세미콜론을 붙이는 것이 관례입니다. 사실 자바스크립트 엔진은 세미콜론을 생략해도 자동으로 삽입하는 기능(ASI, Automatic Semicolon Insertion)이 있어서 대부분의 경우 오류가 나지 않습니다. 하지만 이 자동 삽입이 의도치 않은 방식으로 동작하는 경우도 있어, 명시적으로 세미콜론을 붙이는 습관을 기르는 것이 안전합니다.

콘솔에서 오류 메시지를 두려워하지 마세요. 처음에는 빨간 글씨의 오류 메시지가 나오면 무섭게 느껴질 수 있습니다. 하지만 오류 메시지는 "어디서 무엇이 잘못되었는지" 정확히 알려주는 친절한 안내판입니다. Uncaught ReferenceError: console is not defined처럼 오류 이름과 설명이 함께 표시되므로, 메시지를 읽고 해당 위치를 확인하는 습관을 기르는 것이 실력 향상의 지름길입니다. 오류를 많이 만나고 해결해 본 사람이 더 빨리 성장합니다.

복사·붙여넣기보다 직접 타이핑을 권장합니다. 예제 코드를 그냥 복사해서 실행하는 것보다 직접 손으로 타이핑해 보면 문법이 훨씬 빨리 손에 익습니다. 오타가 나면 오류 메시지를 보고 찾는 경험 자체가 훌륭한 학습입니다.

🗺️ 이 강좌의 학습 흐름

이 섹션에서는 30강 전체의 구성을 미리 파악하여 학습 방향을 잡아 보겠습니다.

자바스크립트를 체계적으로 익히기 위해 이 강좌는 크게 네 단계로 구성되어 있습니다. 처음부터 모든 것을 완벽히 이해하려고 하지 않아도 됩니다. 각 강의는 앞 강의를 기반으로 조금씩 쌓아가는 방식으로 설계되어 있어, 모르는 부분이 생기면 해당 강의를 다시 보면서 반복 학습하는 것이 가장 효과적입니다.

1단계: 기본 문법 (1~10강)은 모든 것의 토대입니다. 변수, 자료형, 연산자, 조건문, 반복문, 함수처럼 프로그래밍의 가장 기본적인 개념들을 배웁니다. 이 단계를 탄탄히 익혀두면 나머지 모든 내용이 자연스럽게 따라옵니다. 지금 배우는 1강과 2강은 이 단계의 시작으로, 환경을 세팅하고 첫 코드를 실행해 보는 준비 과정입니다.

2단계: 배열과 객체 (11~15강)에서는 데이터를 구조화하여 다루는 방법을 배웁니다. 여러 개의 값을 묶어 관리하는 배열과, 속성과 값의 쌍으로 데이터를 표현하는 객체는 실제 개발에서 가장 많이 사용하는 자료 구조입니다. 쇼핑몰의 상품 목록, SNS의 게시물 목록 같은 것들이 모두 배열과 객체로 표현됩니다.

3단계: DOM 조작 (16~22강)은 자바스크립트의 진짜 힘을 경험하는 구간입니다. DOM(Document Object Model)은 자바스크립트가 HTML 요소를 제어하는 방법입니다. 버튼 클릭에 반응하고, 텍스트를 바꾸고, 새 요소를 만들고 지우는 등 진짜 웹 페이지처럼 동작하는 코드를 작성하게 됩니다. 이 단계를 마치면 간단한 인터랙티브 웹 페이지를 혼자 만들 수 있게 됩니다.

4단계: 비동기와 실전 (23~30강)에서는 현대 웹 개발의 핵심인 비동기 프로그래밍을 다룹니다. 서버에서 데이터를 받아오는 fetch, Promise, async/await를 배우고, 로컬 스토리지로 데이터를 저장하는 방법, 에러 처리와 디버깅 기법도 익힙니다. 마지막 29강에서는 배운 내용을 모두 활용해 미니 프로젝트(할 일 앱)를 완성하고, 30강에서 다음 단계 학습 방향을 안내합니다.

단계	강	핵심 주제
1단계 — 기본 문법	1~10강	변수, 자료형, 연산자, 조건문, 반복문, 함수
2단계 — 배열·객체	11~15강	배열, 배열 메서드, 객체, 응용
3단계 — DOM 조작	16~22강	DOM 선택·변경, 이벤트, 폼, 요소 생성·삭제, 타이머
4단계 — 비동기·실전	23~30강	비동기, Promise, async/await, fetch, 로컬 스토리지, 디버깅, 미니 프로젝트

📝 핵심 요약

1강에서 배운 내용을 정리해 보겠습니다.

항목	내용
자바스크립트의 역할	웹 페이지에 동작(상호작용)을 부여하는 언어
HTML과의 관계	HTML(구조) + CSS(디자인) + JS(동작) 세 언어의 협력
탄생	1995년 브렌던 아이크, 10일 만에 완성 — 자바(Java)와는 무관
표준화	ECMAScript(ES)로 국제 표준화, ES6(2015) 이후 매년 업데이트
실행 환경	브라우저(프론트엔드) + Node.js(서버·백엔드)
첫 출력 함수	console.log(값) — 콘솔에 출력
HTML 삽입	<script> 태그, 보통 </body> 바로 앞에 위치
강좌 구성	기본 문법 → 배열·객체 → DOM 조작 → 비동기·실전 (총 30강)

다음 강인 2강 — 실행 환경과 콘솔에서는 브라우저 개발자 도구를 더 깊이 살펴보고, 자바스크립트를 직접 작성하고 실행하는 다양한 방법(콘솔, HTML 파일, VS Code 환경 구성)을 실습합니다. 앞으로 실습 도구로 계속 사용할 환경을 제대로 세팅해 두는 강의이니 꼭 따라와 주세요!