# 1-3 자바스크립트 이해
### 3장. 자바스크립트 이
- 웹페이지에 생명을 불어넣는 언어
### 정적인 화면에 '생명'을 넣는 일
HTML과 CSS로 완성된 웹페이지는 예쁘지만, 아직 '움직이지 않는 그림'에 불과합니다. 버튼을 눌러도 아무 일도 일어나지 않고, 입력창에 글자를 써도 반응이 없습니다. 이 상태는 마치 전원을 꺼둔 스마트폰 화면처럼 '멈춰 있는 세상'이죠.
그런데 버튼을 누르면 팝업이 열리고, 입력창에 문자를 치면 자동으로 추천 단어가 뜨는 그 순간—이 모든 마법을 담당하는 존재가 바로 자바스크립트(JavaScript) 입니다.
자바스크립트는 웹페이지에 '생명'을 불어넣는 언어입니다. HTML이 뼈대라면, CSS는 옷이고, 자바스크립트는 그 옷을 입고 움직이는 사람의 근육과 신경입니다.
### 웹의 무대 위, 배우는 자바스크립트
앞 장에서 살펴보았듯 브라우저는 하나의 건축물처럼 동작합니다. 그리고 그 위에 세 요소가 있다는 것도 함께 알아보았습니다.
- HTML은 기본적인 집의 뼈대를 구축하고,
- CSS는 인테리어를 담당하며,
- JavaScript는 전기와 수도를 담당하죠.
예를 들어, HTML로 버튼을 하나 만들고, CSS로 색깔을 예쁘게 칠했다고 해보겠습니다.
```javascript
좋아요 버튼 테스트
```
```javascript
```
이 상태에서 브라우저는 위 버튼 영역의 코드를 해석해 그저 정적인 버튼을 보여줄 뿐입니다. 하지만 여기에 다음과 같은 자바스크립트 한 줄을 추가하면 이야기가 달라집니다.
```javascript
좋아요 버튼 테스트
```
*html 파일을 생성한 뒤 위 내용을 붙여넣고 브라우저에서 실행해보세요.
위에서 추가된 자바스크립트 부분은 다음과 같습니다.
```javascript
document.getElementById("likeButton").addEventListener("click", () => {
alert("좋아요를 눌렀습니다!");
});
```
이 자바스크립트 덕분에 이제 버튼을 누르면 아래 이미지와 같이 "좋아요를 눌렀습니다!" 라는 알림이 뜨죠. 즉 자바스크립트 한 줄이 바로 '정적인 그림'을 '움직이는 이야기'로 바꿉니다.
### 변수 ― 기억을 담당하는 메모장
프로그래밍 언어의 가장 기본은 기억입니다. 어떤 값을 저장해두었다가 나중에 다시 꺼내 쓰는 것이죠. 자바스크립트에서는 이 역할을 변수(variable) 가 맡습니다. 따라서 변수는 브라우저 속의 작은 메모장이라고 생각하면 됩니다.
```javascript
let count = 0;
```
이 문장은 "count라는 이름의 메모장에 0을 적어둬"라는 뜻입니다. 그리고 나중에 이렇게 쓸 수 있죠.
```javascript
count = count + 1;
```
이제 메모장에는 1이 적히게 됩니다.
버튼을 누를 때마다 숫자가 올라가게 만들면, 간단한 '좋아요 카운터'를 만들 수도 있습니다.
```javascript
let count = 0;
document.getElementById("likeButton").addEventListener("click", () => {
count = count + 1;
console.log("좋아요 수:", count);
});
```
이처럼 변수는 '상태(state)'를 기억하는 도구입니다. 이후 리액트 설명에서 배울 useState의 근본 원리도 결국 이 변수 개념에 기반해 있습니다.
### 함수 ― 행동을 정의하는 마법의 주문
변수가 '기억'을 담당한다면, 함수(function) 는 '행동'을 담당합니다. 함수는 일종의 '동작 묶음'입니다. 예를 들어, 버튼을 클릭할 때마다 실행될 동작을 함수로 만들어보죠.
```javascript
function sayHello() {
alert("안녕하세요!");
}
```
이제 이 함수를 버튼과 연결하면 됩니다.
```javascript
document.getElementById("greetButton").addEventListener("click", sayHello);
```
이렇게 하면 버튼을 누를 때마다 sayHello() 함수가 실행되어 알림창이 뜹니다. 함수는 반복되는 행동을 한 번만 정의해두고 재활용할 수 있게 해줍니다. 즉, '동작의 재사용'을 가능하게 하는 핵심 개념입니다.
앞으로 우리가 사용할 리액트에서도 이같은 함수 개념을 확장하여 컴포넌트(component)를 생성하고 활용합니다.
### 이벤트 ― 세상과의 대화
자바스크립트는 사용자의 행동(이벤트) 에 반응합니다. 클릭, 입력, 스크롤, 마우스 이동, 키보드 입력 — 이런 모든 '행동'이 이벤트입니다.
예를 들어 이런 코드가 있습니다.
```javascript
document.getElementById("nameInput").addEventListener("input", (e) => {
console.log("입력 중:", e.target.value);
});
```
이 코드는 사용자가 이름 입력창에 타이핑할 때마다 브라우저 콘솔에 글자를 보여줍니다. 즉, 브라우저가 사용자의 행동을 감지하고, 자바스크립트가 거기에 반응하는 구조입니다. 이 구조를 좀 더 비유하자면, 자바스크립트는 귀를 가진 배우와 같습니다. 관객(사용자)이 어떤 행동을 하면, 그 소리를 듣고 바로 반응하죠.
### DOM 조작 ― 화면의 요소를 직접 바꾸기
이제 자바스크립트의 진짜 힘을 보여줄 차례입니다. HTML로 만들어진 화면의 요소를 '직접' 바꿀 수 있다는 점이죠.
DOM(Document Object Model)의 개념은 앞서 언급한 적이 있었는데요. DOM은 브라우저가 HTML을 읽어들여 '트리 구조의 객체' 로 바꾼 결과물입니다. 즉, HTML 문서를 자바스크립트가 이해할 수 있도록 변환한 내부 구조라고 생각하면 됩니다. 이 구조를 통해 자바스크립트는 화면의 내용을 실시간으로 바꿀 수 있습니다.
```javascript
document.getElementById("message").innerText = "안녕하세요, 자바스크립트!";
```
이 한 줄이 HTML의 텍스트를 바꿉니다. 화면이 새로고침되지 않아도 내용이 즉시 바뀌는 것, 바로 이것이 동적 웹(Dynamic Web) 의 시작입니다.
### 정리 ― 움직이는 웹의 원리
정적인 HTML과 CSS 위에 자바스크립트가 더해지면, 비로소 웹페이지는 '살아 있는 유기체'처럼 반응합니다.
| **요소** | **역할** | **비유** |
| --- | --- | --- |
| HTML | 구조를 정의 | 뼈대 |
| CSS | 디자인을 담당 | 옷 |
| JavaScript | 동작을 제어 | 근육과 신경 |
그리고 이 세 가지가 함께 어우러질 때, 우리가 매일 쓰는 웹서비스를 구성하는 검색창, 알림, 애니메이션, 버튼 반응 등이 모두 자연스럽게 작동하게 됩니다.
### 다음 장으로 ― 리액트의 등장
하지만 자바스크립트만으로 복잡한 화면을 만들다 보면 "어느 부분이 언제, 왜 바뀌는지"를 관리하기가 점점 어려워집니다. 화면의 데이터가 많아질수록, '어떤 요소를 언제 업데이트해야 할지'가 복잡해지죠.
이 문제를 해결하기 위해 등장한 것이 바로 리액트(React) 입니다.
리액트는 자바스크립트의 원리를 그대로 이어받으면서, "상태(state)가 바뀌면 화면이 자동으로 갱신된다"는 새로운 사고방식을 제시합니다. 다음 장에서는, 이 리액트가 어떻게 자바스크립트의 한계를 넘어 더 '똑똑한 화면'을 만들어주는지 알아보겠습니다.
3장에서 소개된 내용들은 아래 test.html 파일을 작성하셔서 모두 테스트해보실 수 있습니다.
```javascript
3장 자바스크립트 핵심 원리 테스트
💡 자바스크립트 핵심 원리 테스트
1. 변수와 이벤트 (좋아요 버튼)
좋아요 수: 0
2. 함수 (인사하기)
3. 이벤트 (입력 중 로그)
입력 결과가 여기에 표시됩니다.
4. DOM 조작 (화면 내용 바꾸기)
이 문장은 곧 자바스크립트가 바꿀 예정입니다.
```
For the site tree, see the [root Markdown](https://slashpage.com/lop.md).