웹 개발 강의 10편 - 세 번째 언어

HTML 과 CSS 로 아홉 편을 왔습니다. 그동안 페이지는 열리는 순간 이미 완성이었습니다.

오늘 세 번째 언어가 들어오면서 그것이 달라집니다. 페이지가 열린 뒤에도 바뀔 수
있게 됩니다. 무언가 일어났기 때문입니다. 클릭, 키 입력, 시간 같은 것들입니다.

세 언어, 세 가지 일

파일 세 개가 한 페이지를 만들고, 역할이 겹치지 않습니다.

첫 스크립트

script.js 라는 새 파일을 만듭니다.

console.log("The script is running");

const heading = document.querySelector("h1");

console.log(heading.textContent);

console.log 는 브라우저의 콘솔에 출력합니다. 페이지가 아닙니다. 이 부분에서
매번 막히게 됩니다.

document 는 코드가 만질 수 있는 형태의 페이지 자체입니다.

querySelector 는 선택자에 맞는 첫 요소를 찾아줍니다. 6강에서 쓰던 그 문자열
그대로입니다. CSS 를 배운 것이 여기서 그대로 쓰입니다.

const 는 그 요소에 다시 쓸 수 있는 이름을 붙여줍니다. textContent 는 그 안의
글자입니다. 오늘은 읽고, 11강에서는 씁니다.

연결하기, 그리고 위치가 중요한 이유

index.html 의 footer 다음, </body> 앞에 넣습니다.

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

link 나 img 와 달리 닫는 태그가 있습니다. 코드는 파일에 있고 태그 사이에
있는 것이 아닙니다.

위치가 중요합니다. 스크립트는 브라우저가 그 줄에 닿는 순간 실행됩니다.

head 에 넣으면 그때는 h1 을 아직 읽지 않은 상태입니다. querySelector 가
아무것도 못 찾고, 다음 줄에서 오류가 납니다. 아래에 두면 그 위의 모든 것이
이미 존재합니다.

오래도록 사람들을 괴롭히는 부분입니다.

출력은 어디로 가는가

python -m http.server 5500

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

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

페이지는 전과 똑같아 보입니다. 자리가 바뀐 것도 색이 달라진 것도 없습니다.

스크립트가 한 일은 전부 다른 곳에서 일어났습니다. F12 를 누르고 Console 탭을
열면 두 줄이 보입니다. 우리 메시지와 제목에서 읽은 이름입니다.

두 번째 줄이 코드가 페이지에 손을 넣어 뭔가를 읽었다는 증거입니다.

콘솔이 비어 있으면 script 태그부터 확인해주시면 됩니다.

자주 발생하는 오류

첫째, script 태그를 head 에 넣는 경우입니다. 요소가 아직 없어서
querySelector 가 아무것도 못 찾습니다.

둘째, 태그 이름 앞에 샵을 붙이는 경우입니다. 샵은 6강에서와 똑같이 id 를
뜻합니다.

셋째, 콘솔 출력을 페이지에서 찾는 경우입니다. console.log 는 콘솔에만 씁니다.
F12 를 누르세요. 앞으로 그 창에서 살게 됩니다.

연습 문제

1. querySelector 로 #contact 를 찾아 그 안의 글자를 출력해보세요.
2. script 태그를 head 로 옮겨보고 콘솔에 나는 오류를 읽어보세요.
3. console.log 에 여러 값을 반점으로 나눠 넘겨보세요.

다음 편

11강에서는 버튼을 만들고, 누를 때 돌아가는 코드를 씁니다.

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