오늘 끝나면
자바스크립트
- ✓자바스크립트의 핵심 문제를 한 문장으로 설명한다
- ✓오른쪽 실습에서 자바스크립트이 어떻게 움직이는지 관찰한다
- ✓다음 강의와 이어지는 한계를 말할 수 있다
실습 미션
1995, 페이지를 움직이게 만든 언어 이 문장이 실제로 무슨 뜻인지 실습에서 한 번 손으로 확인한다.
성공 조건
- □실습의 기본값을 먼저 관찰
- □입력값이나 모드를 한 번 이상 바꿔 결과 비교
- □왜 결과가 바뀌었는지 한 문장으로 설명
개발 · Day 12 / 브라우저 · 언어
페이지가
살아 움직이다
HTML·CSS는 가만히 있는 종이였음. 클릭해도 입력해도 안 바뀜. 거기에 반응을 붙이는 게 자바스크립트임. 1995년에 단 10일 만에 만들어짐.
10일 만에 태어난 언어
1995년, 넷스케이프가 브라우저를 만들고 있었음. 페이지에 움직임을 넣고 싶었음.
그 일을 브렌던 아이크가 맡음. 회사는 급했음. 주어진 시간은 단 10일. 그 안에 새 언어 하나를 통째로 만들어 냄.
급하게 만든 티가 남음. 이상한 규칙도 많음. 근데 브라우저에서 돌 수 있는 유일한 언어 자리를 차지함. 그게 전부였음.
그 자리 덕에 30년이 지난 지금도 안 죽음. 오히려 가장 많이 쓰이는 언어가 됨. 웹페이지가 있는 곳엔 늘 자바스크립트가 있음.
세상에서 가장 많이 쓰는 언어가 열흘 만에 태어남
가만히 있는 페이지 vs 반응하는 페이지
HTML은 글·이미지의 뼈대. CSS는 그 모양·색. 둘 다 한 번 그리면 끝임.
그래서 HTML·CSS만 있는 페이지는 종이 같음. 버튼을 눌러도 아무 일 안 일어남. 숫자도 못 바꿈. 그냥 보기만 함.
자바스크립트가 끼면 달라짐.클릭·입력·스크롤 같은 사용자 행동을 듣고 있음. 그 행동에 맞춰 페이지를 즉석에서 바꿈.
장바구니 숫자가 늘고, 좋아요가 빨개지고, 검색어를 치면 목록이 추려짐. 전부 자바스크립트가 하는 일임. 정적인 종이를 살아 있는 화면으로 바꿈.
정적인 종이를 살아 있는 화면으로 바꿈
직접 눌러보기
말로는 와닿기 어려움. 오른쪽을 직접 건드려 보셈. 한 동작 = 코드 한 줄임.
+1 버튼을 누르면 숫자가 올라감. 자바스크립트가 count = count + 1 한 줄을 실행한 결과임. 누를 때마다 화면이 다시 그려짐.
이름 칸에 타이핑해 보셈. 글자를 칠 때마다 아래 인사말이 실시간으로 바뀜. 이렇게 화면의 글자·요소를 바꾸는 걸 DOM 조작이라 함. 페이지를 만질 수 있는 손인 셈임.
맨 아래 칸을 보셈. 내가 한 동작마다 자바스크립트가 무슨 일을 했는지가 한 줄씩 찍힘. 화면 변화 뒤엔 늘 코드 한 줄이 있음.
코드 보기
// 버튼을 누르면 숫자 1 올리기
let count = 0;
button.onclick = function () {
count = count + 1; // 값 바꾸기
screen.textContent = count; // 화면에 반영
};
// 입력하면 인사말 바꾸기
input.oninput = function () {
hello.textContent = input.value + "님 안녕!";
};웹페이지의 세 겹
웹페이지 하나는 보통 세 가지가 겹쳐 만들어짐. 역할이 딱 나뉨.
HTML은 뼈대 — 제목·문단·버튼이 뭐가 있는지 정함.CSS는 옷 — 색·크기·배치를 꾸밈.
JS는 움직임 — 누르면·입력하면 무슨 일이 일어날지 정함. 사람으로 치면 뼈대·옷·근육임.
셋이 협력해 한 화면을 만듦. 뼈대만 있으면 밋밋함. 옷까지면 예쁘지만 안 움직임. 셋이 다 있어야 우리가 매일 쓰는 웹이 됨.
역할이 딱 나뉨 — 셋이 다 있어야 살아 있는 웹이 됨
자바와 자바스크립트는 남남
헷갈리기 딱 좋은 이름임. 자바와 자바스크립트는 완전히 다른 언어임.
이름이 비슷한 건 그냥 마케팅이었음. 1995년 당시 자바가 제일 뜨거웠음. 넷스케이프가 그 인기에 묻어가려고 비슷한 이름을 붙였을 뿐임.
흔한 비유로 "자바와 자바스크립트는 햄과 햄스터만큼 다르다"고 함. 글자만 비슷함. 만든 사람도, 쓰는 곳도, 문법도 다 다름.
여기까지가 "페이지가 어떻게 살아 움직이나"임. 다음은 이 페이지가 서버와 어떻게 대화하는지 — 보이지 않는 약속 HTTP를 봄.
Q. 자바스크립트는 브라우저에서만 도나?
원래는 그랬음. 근데 2009년 Node.js가 나오면서 브라우저 밖 서버에서도 돌게 됨. 덕분에 화면(앞단)과 서버(뒷단)를 같은 언어 하나로 만들 수 있게 됨. 자바스크립트가 더 커진 결정적 계기였음.비슷한 이름은 인기에 묻어가려던 마케팅이었음