웹 개발 강의 14편 - 목록 만들기

지금은 다시 누르는 순간 앞의 줄을 잊어버립니다. 오늘은 전부 간직해서 목록으로
보여줍니다.

웹에서 보신 모든 목록 뒤에 있는 방식을 먼저 말씀드립니다. 데이터를 간직하고
나서 그립니다. 반대로 하지 않습니다. 배열을 바꾸고 전체를 다시 그립니다.
페이지에 손을 넣어 한 줄만 고치지 않습니다.

낭비처럼 들리는데, 그게 틀리지 않게 해주는 방법입니다.

빈 목록 하나

index.html 의 Add 버튼 아래에 넣습니다.

<ul id="notes"></ul>

2강에서 손으로 썼던 그 ul 입니다. 열고 닫고, 사이에는 아무것도 없습니다.

일부러 비워두고, HTML 에서는 다시 건드리지 않습니다. 그 안의 모든 것은
코드에서 나옵니다.

배열과 반복문

script.js 의 Add 버튼을 찾는 줄 아래에 넣습니다.

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();

대괄호 안에 값을 넣고 반점으로 나눕니다. 이름 하나에 값이 여럿이고, 순서가
유지됩니다.

내용이 바뀔 텐데도 const 를 씁니다. const 는 이름을 다시 묶는 것을 막을
뿐, 안을 바꾸는 것은 막지 않습니다.

시작 줄 두 개를 넣어서 처음 열었을 때 빈 화면이 아니게 합니다.

function 은 여러 번 할 일에 이름을 붙이는 것입니다. 먼저 빈 글자를 넣어 목록을
비웁니다. 그다음 for of 가 값마다 한 번씩 순서대로 돕니다.

createElement 는 HTML 에 없는 li 를 만들어냅니다. appendChild 가 그것을
목록 안에 넣습니다.

마지막 줄이 시작 항목 두 개를 그리는 부분입니다. 함수를 만드는 것과 부르는
것은 다른 일입니다. 그 줄이 없으면 함수는 있는데 한 번도 돌지 않습니다.

배열이 하는 일 네 가지

push 는 배열을 그 자리에서 바꾸는 것이라 const 여도 괜찮습니다.

추가하고 다시 그리기

처리 함수 안, 되돌려주는 줄 다음에 두 줄입니다.

notes.push(field.value);
  draw();

push 를 먼저, draw 를 나중에 합니다. 순서가 중요합니다. draw 를 먼저
하면 새 줄 없이 목록을 다시 그리게 됩니다.

그리고 style.css 의 /* list */ 주석 아래에 목록 규칙을 넣습니다.

#notes {
  margin: 16px 0 0;
  padding-left: 22px;
}

#notes li {
  margin: 4px 0;
}

확인하기

python -m http.server 5500

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

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

페이지를 열면 이미 두 줄이 있습니다. HTML 이 아니라 배열에서 나온 것입니다.

한 줄 적고 Add 를 누르면 세 번째가 아래에 나타납니다. 셋 다 같은 함수가 같은
방식으로 그린 것입니다.

새로 고치면 세 번째가 사라지는데, 그것이 15강입니다.

누를 때마다 목록이 두 배가 되면 비우는 줄이 빠진 것입니다.

전체를 다시 그리는 이유

함수 하나면 페이지가 항상 배열과 일치합니다.

한 줄씩 고치는 데서 버그가 나옵니다. 다시 그리는 것은 지루한데, 지루한 쪽이
맞습니다.

나중에 만날 프레임워크는 전부 이 생각을 더 빠르게 만든 것입니다.

자주 발생하는 오류

첫째, const 로 만든 배열에 다시 넣으려는 경우입니다. push 는 내용을 바꾸는
것이라 괜찮습니다.

둘째, push 뒤에 draw 를 부르지 않는 경우입니다. 배열은 커지는데 페이지는
그대로이고 오류도 없습니다.

셋째, 다시 그리기 전에 목록을 비우지 않는 경우입니다. 두 번 누르면 값 세 개로
여섯 줄이 됩니다.

연습 문제

1. 배열에 시작 항목을 하나 더 넣어보세요.
2. notes.length 를 화면에 출력해보세요.
3. li 대신 p 로 만들어보고 차이를 확인해보세요.

다음 편

15강에서는 브라우저를 닫아도 목록이 남아 있게 만들고, 전체를 마무리합니다.

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