시작 …
지금은 다시 누르는 순간 앞의 줄을 잊어버립니다. 오늘은 전부 간직해서 목록으로 보여줍니다.
지금은 다시 누르는 순간 앞의 줄을 잊어버립니다. 오늘은 전부 간직해서 목록으로 보여줍니다.
오늘 다룰 내용은 세 가지입니다. 먼저 배열입니다. 이름 하나에 여러 값을 담습니다. 그다음 그것을 하나씩 훑는 반복문입니다. 마지막으로 목록 항목을 손으로 쓰지 않고 코드로 만듭니다. 웹에서 보신 모든 목록 뒤에 있는 방식입니다. 데이터를 간직하고 나서 그립니다. 반대로 하지 않습니다. 배열을 바꾸고 전체를 다시 그립니다. 페이지에 손을 넣어 한 줄만 고치지 않습니다. 낭비처럼 들리는데, 그게 틀리지 않게 해주는 방법입니다. 폴더를 다시 열어보겠습니다. 페이지에 태그 하나를 넣는데, 영원히 비어 있습니다. 그 안의 모든 것은 코드에서 나옵니다. 그렇게 하는 것은 이번이 처음입니다. 태그는 이것이 전부입니다. ul 이고, 2강에서 손으로 썼던 그 태그입니다. 열고 닫고, 사이에는 아무것도 없습니다. 일부러 비워두고, HTML 에서는 다시 건드리지 않습니다.
Add 버튼 아래에 들어갑니다. 스크립트가 찾아야 하니 id 를 붙입니다. 저장해도 페이지는 그대로 보입니다. 빈 목록은 자리를 전혀 차지하지 않습니다.
index.html
<ul id="notes"></ul>
이제 배열입니다. 들리는 것보다 간단합니다. 대괄호 안에 값을 넣고 반점으로 나눕니다. 이름 하나에 값이 여럿이고, 순서가 유지됩니다. 내용이 바뀔 텐데도 const 를 씁니다. const 는 이름을 다시 묶는 것을 막을 뿐, 안을 바꾸는 것은 막지 않습니다. 시작 줄 두 개를 넣어서 처음 열었을 때 빈 화면이 아니게 합니다. 이것이 그리는 함수입니다. function 은 여러 번 할 일에 이름을 붙이는 것입니다. 먼저 빈 글자를 넣어 목록을 비웁니다. 그다음 for of 가 값마다 한 번씩, 순서대로 돕니다. createElement 는 HTML 에 없는 li 를 만들어냅니다. appendChild 가 그것을 목록 안에 넣습니다.
지금까지 중 가장 긴 덩어리라 글자를 먼저 줄이겠습니다. 찾기, 배열, 함수, 그리고 마지막에 호출 한 번입니다. 마지막 줄이 시작 항목 두 개를 그리는 부분입니다. 그것이 없으면 함수는 있는데 한 번도 돌지 않습니다. 함수를 만드는 것과 부르는 것은 다른 일입니다. 저장하면 목록에 이미 두 줄이 들어 있습니다.
script.js
const list = document.querySelector("#notes");
const notes = ["Read one paper", "Record a lesson"];
function draw() {
list.textContent = "";
for (const note of notes) {
const item = document.createElement("li");
item.textContent = note;
list.appendChild(item);
}
}
draw();배열이 하는 일 네 가지인데, 이 넷을 먼저 쓰게 됩니다. push 는 값을 끝에 붙입니다. length 는 몇 개인지 알려줍니다. 대괄호에 숫자를 넣으면 하나를 꺼내는데, 0부터 셉니다. for of 는 하나마다 한 번씩, 순서대로 돕니다.
처리 함수 안, 되돌려주는 줄 바로 다음에 두 줄입니다. push 를 먼저, draw 를 나중에 합니다. 순서가 중요합니다. draw 를 먼저 하면 새 줄 없이 목록을 다시 그리게 됩니다. 그다음 목록이 제자리에 놓이도록 작은 규칙 두 개를 넣습니다. 마지막 강의를 위한 주석도 끝에 남깁니다.
script.js
notes.push(field.value); draw();
style.css
#notes {
margin: 16px 0 0;
padding-left: 22px;
}
#notes li {
margin: 4px 0;
}
/* saving */서버는 같은 방법으로 띄웁니다. 14강째인데 명령은 한 번도 바뀌지 않았습니다. 처음부터 일부러 그렇게 했습니다.
터미널
python -m http.server 5500
페이지를 열면 이미 두 줄이 있습니다. HTML 이 아니라 배열에서 나온 것입니다. 한 줄 적고 Add 를 누르면 세 번째가 아래에 나타납니다. 셋 다 같은 함수가 같은 방식으로 그린 것입니다. 새로 고치면 세 번째가 사라지는데, 그것이 15강입니다. 지금 이런 화면이 보이고 계셔야 합니다. 시작 줄 두 개와 직접 넣은 세 번째 줄입니다. 누를 때마다 목록이 두 배가 되면 비우는 줄이 빠진 것입니다. 그건 금방 우스워져서 찾기 쉽습니다. 전체를 다시 그리는 것에 대해 한마디 더 하겠습니다. 함수 하나면 페이지가 항상 배열과 일치합니다. 한 줄씩 고치는 데서 버그가 나옵니다. 다시 그리는 것은 지루한데, 지루한 쪽이 맞습니다. 나중에 만날 프레임워크는 전부 이 생각을 더 빠르게 만든 것입니다. 여기서는 보통 세 가지에서 막히게 됩니다. 첫째, const 로 만든 배열에 다시 넣으려는 경우입니다. push 는 내용을 바꾸는 것이라 괜찮습니다. 둘째, push 뒤에 draw 를 부르지 않는 경우입니다. 배열은 커지는데 페이지는 그대로이고 오류도 없습니다. 셋째, 다시 그리기 전에 목록을 비우지 않는 경우입니다. 누를 때마다 옛 목록 아래에 전체가 다시 그려집니다. 두 번 누르면 값 세 개로 여섯 줄이 됩니다. 마치기 전에 서버를 멈춰두겠습니다. 스크립트가 41줄이고 목록을 가지고 있습니다. 아직 하나가 빠져 있는데, 무엇인지 이미 아실 겁니다. 폴더는 그대로 두세요. 한 편 남았습니다. 오늘 기억하실 것 세 가지입니다. 배열은 값을 순서대로 담고, push 가 끝에 더합니다. 데이터를 간직하고 그립니다. 페이지를 직접 고치지 않습니다. 요소는 HTML 말고 코드에서도 나올 수 있습니다. 다음 시간에는 브라우저를 닫아도 남아 있게 만듭니다.
글로 정리한 같은 내용은 하루글에서도 보실 수 있습니다.
로그인하시면 댓글을 쓰실 수 있습니다.
아직 댓글이 없습니다. 첫 댓글을 남겨 주시면 됩니다.