책에 포함된 노트처음 만나는 JavaScript: 웹페이지를 살아 움직이게 만드는 언어

JavaScript의 역할

2026-05-16Views 8약 5분생성형 AI 활용

Summary

JavaScript는 왜 필요한가?

HTML과 CSS만으로도 웹페이지를 만들 수 있습니다. HTML은 제목, 문단, 이미지, 링크, 입력창 같은 내용의 구조를 만들고, CSS는 색상, 여백, 글꼴, 배치 같은 보이는 모습을 꾸밉니다. 여기까지 배우면 정적인 소개 페이지나 블로그 글, 랜딩 페이지 정도는 충분히 만들 수 있습니다.

그런데 웹페이지가 사용자에게 반응해야 하는 순간이 오면 이야기가 달라집니다.

예를 들어 이런 기능을 떠올려 보세요.

버튼을 누르면 메뉴가 열리고 닫힌다.
입력한 글자 수가 실시간으로 표시된다.
할 일을 추가하면 목록에 새 항목이 생긴다.
로그인 여부에 따라 다른 화면을 보여 준다.
서버에서 날씨나 상품 데이터를 가져와 화면에 그린다.

이런 일은 HTML과 CSS만으로는 처리하기 어렵습니다. 사용자의 행동을 감지하고, 현재 상태를 기억하고, 조건에 따라 화면을 바꾸고, 필요한 데이터를 가져오는 언어가 필요합니다. 그 역할을 하는 것이 바로 JavaScript입니다.

JavaScript는 웹페이지를 "문서"에서 "인터페이스"로 바꿔 줍니다. 사용자가 클릭하고 입력하고 기다리는 동안, 페이지가 그 행동에 맞춰 반응하게 만드는 언어입니다.

JavaScript의 역할

HTML, CSS, JavaScript의 역할 구분

처음 웹을 배울 때는 HTML, CSS, JavaScript가 서로 섞여 보일 수 있습니다. 하지만 역할을 나눠 보면 훨씬 이해하기 쉽습니다.

HTML: 무엇이 있는가를 정합니다.
CSS: 어떻게 보이는가를 정합니다.
JavaScript: 어떤 일이 일어나는가를 정합니다.

간단한 버튼을 예로 들어 보겠습니다.

<button class="like-button">좋아요</button>
<p class="like-count">0</p>

HTML은 버튼과 숫자가 있다는 사실을 만듭니다.

.like-button {
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  background-color: royalblue;
  color: white;
}

CSS는 버튼의 색과 모양을 정합니다.

const button = document.querySelector('.like-button');
const countText = document.querySelector('.like-count');

let count = 0;

button.addEventListener('click', function () {
  count = count + 1;
  countText.textContent = count;
});

JavaScript는 버튼을 클릭했을 때 숫자가 올라가도록 만듭니다.

이 세 가지는 경쟁 관계가 아닙니다. 각각의 역할이 다릅니다. 좋은 웹페이지는 HTML이 의미 있는 구조를 만들고, CSS가 보기 좋은 표현을 담당하며, JavaScript가 필요한 상호작용을 적절히 더할 때 완성됩니다.

브라우저에서 JavaScript가 실행되는 방식

JavaScript 코드는 보통 브라우저에서 실행됩니다. 브라우저는 HTML 파일을 읽고, CSS를 적용하고, JavaScript 코드를 실행해 페이지를 동작하게 만듭니다.

여기서 중요한 점이 있습니다. JavaScript는 페이지 안의 HTML 요소를 찾아서 바꾸는 일을 자주 합니다. 그런데 JavaScript가 실행되는 시점에 아직 HTML 요소가 만들어지지 않았다면, 원하는 요소를 찾지 못할 수 있습니다.

예를 들어 아래 코드를 보겠습니다.

<script>
  const title = document.querySelector('h1');
  title.textContent = '안녕하세요, JavaScript!';
</script>

<h1>처음 제목</h1>

이 경우 브라우저는 위에서 아래로 HTML을 읽습니다. script가 먼저 실행되는 순간에는 아직 <h1>을 만나기 전입니다. 그래서 document.querySelector('h1')가 원하는 요소를 찾지 못할 수 있습니다.

보통은 다음처럼 script 태그를 HTML 내용 아래쪽에 두거나, defer 속성을 사용합니다.

<h1>처음 제목</h1>

<script>
  const title = document.querySelector('h1');
  title.textContent = '안녕하세요, JavaScript!';
</script>

또는 외부 JavaScript 파일을 연결할 때 이렇게 쓸 수 있습니다.

<script src="app.js" defer></script>

defer를 사용하면 브라우저가 HTML 문서를 읽는 동안 JavaScript 파일을 내려받고, HTML 구조를 모두 준비한 뒤 코드를 실행합니다. 입문 단계에서는 외부 파일을 연결할 때 defer를 붙이는 습관을 들이면 좋습니다.

script 태그 사용하기

JavaScript를 HTML에 넣는 방법은 크게 두 가지입니다.

첫 번째는 HTML 파일 안에 직접 작성하는 방법입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>첫 번째 JavaScript</title>
  </head>
  <body>
    <h1>처음 만나는 JavaScript</h1>

    <script>
      console.log('페이지가 열렸습니다.');
    </script>
  </body>
</html>

이 방식은 짧은 예제를 확인할 때 편합니다. 하지만 코드가 길어지면 HTML과 JavaScript가 뒤섞여 읽기 어려워집니다.

두 번째는 JavaScript 파일을 따로 만들고 연결하는 방법입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>첫 번째 JavaScript</title>
    <script src="app.js" defer></script>
  </head>
  <body>
    <h1>처음 만나는 JavaScript</h1>
  </body>
</html>

그리고 app.js 파일에는 이렇게 작성합니다.

console.log('외부 JavaScript 파일이 실행되었습니다.');

실제 프로젝트에서는 보통 두 번째 방식처럼 파일을 나눕니다. HTML은 구조를 담당하고, JavaScript는 별도 파일에서 동작을 담당하게 하는 편이 관리하기 쉽기 때문입니다.

콘솔과 개발자 도구

JavaScript를 처음 배울 때 가장 자주 쓰게 될 공간은 브라우저의 개발자 도구입니다. 특히 콘솔(Console)은 코드를 테스트하고, 값이 어떻게 변하는지 확인하고, 오류 메시지를 읽는 데 매우 중요합니다.

대부분의 브라우저에서는 페이지에서 마우스 오른쪽 버튼을 누른 뒤 검사를 선택하거나, 다음 단축키로 개발자 도구를 열 수 있습니다.

Windows/Linux: F12 또는 Ctrl + Shift + I
macOS: Command + Option + I

콘솔 탭을 열고 아래 코드를 입력해 보세요.

1 + 2

결과로 3이 나옵니다. 이번에는 문장을 출력해 보겠습니다.

console.log('JavaScript를 시작합니다.');

console.log()는 화면에 직접 보이는 기능은 아니지만, 개발자가 현재 값을 확인할 때 자주 사용합니다.

const name = '민지';
console.log(name);

코드가 예상대로 동작하지 않을 때도 콘솔을 먼저 확인해야 합니다. JavaScript 오류는 대부분 콘솔에 메시지로 표시됩니다. 처음에는 영어 오류 메시지가 낯설 수 있지만, "어느 파일의 몇 번째 줄에서 문제가 났는지"를 알려 주는 경우가 많으므로 천천히 읽어 보는 습관이 중요합니다.

첫 번째 JavaScript 코드 작성하기

이제 간단한 예제를 만들어 보겠습니다. 버튼을 누르면 제목 문구가 바뀌는 코드입니다.

먼저 index.html 파일을 만듭니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>첫 번째 JavaScript</title>
    <script src="app.js" defer></script>
  </head>
  <body>
    <h1 class="title">아직 버튼을 누르지 않았습니다.</h1>
    <button class="change-button">문구 바꾸기</button>
  </body>
</html>

같은 폴더에 app.js 파일을 만들고 아래 코드를 작성합니다.

const title = document.querySelector('.title');
const button = document.querySelector('.change-button');

button.addEventListener('click', function () {
  title.textContent = '버튼을 눌렀습니다!';
});

이 코드는 세 단계로 읽을 수 있습니다.

.title 클래스를 가진 제목 요소를 찾습니다.
.change-button 클래스를 가진 버튼 요소를 찾습니다.
버튼을 클릭하면 제목의 글자를 바꿉니다.

아직 document.querySelector, addEventListener, textContent 같은 표현이 완전히 익숙하지 않아도 괜찮습니다. 지금은 JavaScript가 HTML 요소를 찾고, 사용자의 행동을 기다렸다가, 화면을 바꿀 수 있다는 흐름만 잡으면 됩니다. 이 책의 뒤쪽에서 DOM과 이벤트를 자세히 다룰 것입니다.

이 책을 읽는 방법

JavaScript를 처음 배울 때 문법을 하나씩 외우려고 하면 금방 지칩니다. 대신 다음 질문을 계속 떠올리면 좋습니다.

지금 다루는 값은 무엇인가?
이 값은 변해야 하는가, 변하지 않아야 하는가?
어떤 조건에서 다른 행동을 해야 하는가?
같은 일을 여러 번 반복하고 있는가?
사용자의 행동에 어떻게 반응해야 하는가?
화면과 데이터가 서로 어떻게 연결되는가?

이 질문들은 앞으로 배우게 될 변수, 조건문, 반복문, 함수, 배열, 객체, DOM, 이벤트, 비동기 처리로 이어집니다. 문법은 따로 떨어진 규칙이 아니라 웹페이지를 살아 움직이게 만들기 위한 도구입니다.

이번 장에서는 JavaScript가 왜 필요한지, HTML·CSS와 어떤 역할 차이가 있는지, 브라우저에서 어떻게 실행되는지, 그리고 첫 번째 코드를 어떻게 작성하는지 살펴보았습니다. 다음 장부터는 JavaScript 코드를 읽고 쓰기 위한 기본 문법을 차근차근 익히겠습니다.

책 목록

처음 만나는 JavaScript: 웹페이지를 살아 움직이게 만드는 언어

전체 목차 보기