웹 개발 강의 12편 - 값을 담아 두기

버튼은 누를 때마다 같은 말을 합니다. 오늘은 세기 시작하는데, 그러려면 기억할
자리가 필요합니다.

코드를 쓰기 전에 봐야 할 것이 있습니다. 함수는 누를 때마다 처음부터 다시
돕니다. 그래서 숫자는 함수 바깥에 있어야 합니다. 안에서 선언하면 매번 0부터
시작하고, 숫자가 1을 넘지 못합니다.

const 와 let

const 로 시작하고, 바꿔야 하는 순간에 let 으로 옮기시면 됩니다.

숫자가 들어갈 자리

index.html 의 출력 문단 아래에 빈 문단 하나를 더 넣습니다.

<p id="count"></p>

id 는 하나에만 붙는 것이라 다른 이름을 씁니다. 이름이 다른 빈 문단 두 개이고,
스크립트가 둘 다 채웁니다.

세는 값 만들기

script.js 의 출력 요소를 찾는 줄 아래에 넣습니다.

const counter = document.querySelector("#count");

let presses = 0;

요소에는 const 를 씁니다. 한 번만 찾기 때문입니다. 세는 값에는 let 을 씁니다.
누를 때마다 바뀌기 때문입니다.

둘 다 함수 바깥, 다른 이름들 옆에 놓입니다. 그게 세기가 동작하게 만드는
핵심입니다.

0 입니다. 아직 아무도 누르지 않았기 때문입니다.

함수 안에서 세기

함수 안, 인사말 아래에 두 줄을 넣습니다.

presses = presses + 1;
  counter.textContent = "Presses: " + presses;

첫 줄은 옛 값을 읽고 1을 더해서 다시 넣습니다. 등호는 비교가 아닙니다. 이것을
저기에 넣으라는 뜻입니다.

둘째 줄은 조각 세 개로 문장을 만듭니다. 고정된 앞부분, 숫자, 고정된 뒷부분입니다.

인사말은 그대로 둡니다. 바꾸는 것이 아니라 더하는 것입니다. 이제 누를 때마다
두 가지가 일어납니다.

더하기 기호가 하는 두 가지 일

1 더하기 2 는 3 입니다. 1 더하기 글자 2 는 12 가 됩니다.

자바스크립트가 양쪽에 무엇이 있는지 보고 정합니다. 양쪽이 숫자면 더하고,
한쪽이라도 글자면 이어붙입니다.

처음 한 번 놀라고 나면 그 뒤로는 괜찮습니다.

확인하기

python -m http.server 5500

처음 실행하면 윈도우에서 방화벽 경고창이 뜰 수 있습니다. 개인 네트워크만 체크된 상태로 액세스 허용을 눌러주시면 됩니다. 이 서버는 본인 컴퓨터에서만 쓰는 것이라 공용 네트워크는 체크하지 않으셔도 됩니다.

브라우저에서 localhost:5500 으로 들어가시면 됩니다.

한 번 누르면 두 줄이 나타납니다. 다시 누르면 숫자만 바뀝니다.

인사말은 매번 똑같습니다. 상수와 변수가 한 화면에 같이 있는 것입니다.

숫자가 1에 머물면 세는 값이 함수 안에 선언된 것입니다. 오류가 전혀 안 나서
찾기가 더 어렵습니다.

변수가 어디에 사는가

변수가 어디에 사는지가 무엇이 남는지를 정합니다.

함수 바깥에 있으면 모든 클릭이 같은 것을 봅니다. 안에 있으면 클릭마다 새것이
만들어집니다.

오늘은 이어지기를 원했으니 위쪽에 두었습니다. 이 생각에는 이름이 있는데,
범위(Scope)라고 부릅니다.

자주 발생하는 오류

첫째, 세는 값에 const 를 쓰는 경우입니다. 첫 클릭에서 바꾸려다 브라우저가
멈춥니다.

둘째, 함수 안에서 선언하는 경우입니다. 오류는 없고 숫자가 1을 넘지 못합니다.
첫 번째보다 찾기 어렵습니다.

셋째, 글자를 이어붙인 뒤에 1을 더하는 경우입니다. 그때는 이미 글자라서 4와 1이
나란히 붙습니다. 계산을 먼저 하고 이어붙이는 것은 나중에 하시면 됩니다.

연습 문제

1. presses 가 5가 될 때 다른 문구가 나오게 해보세요.
2. let 을 const 로 바꿔보고 콘솔에 나는 오류를 읽어보세요.
3. 세는 값을 함수 안으로 옮겨보고 숫자가 어떻게 되는지 확인해보세요.

다음 편

13강에서는 입력 칸에 적은 내용을 읽습니다.

영상으로 보시려면 링바이트에 같은 내용이 올라가 있습니다.
강의 노트도 함께 보실 수 있습니다.