웹 개발 강의 15편 - 저장하고 마무리

마지막 편입니다. 지금까지 만든 것은 새로 고치면 사라집니다. 오늘 그것을 고치고,
15강이 만든 것을 돌아보겠습니다.

좋은 소식이 있습니다. 브라우저가 여러분이 정한 이름으로 글자를 하나 보관해
줍니다. 서버도 데이터베이스도 계정도 라이브러리도 필요 없습니다. 저장에 한 줄,
다시 읽는 데 한 줄입니다.

localStorage 네 줄

글자만 보관합니다. 거기에 함정이 있습니다.

배열을 글자로, 글자를 배열로

우리 메모는 글자가 아니라 배열입니다. 그래서 넣을 때 글자로 바꾸고 꺼낼 때
되돌립니다.

JSON.stringify(notes)   // ["a","b"]  ->  문자열  ["a","b"]
JSON.parse(saved)       // 문자열  ["a","b"]  ->  ["a","b"]

정확히 반대이고, 앞으로 오래 둘 다 쓰시게 됩니다. JSON 은 데이터를 글자로 적는
방식일 뿐입니다.

저장하기

처리 함수 안, push 아래에 한 줄입니다.

localStorage.setItem("notes", JSON.stringify(notes));

매번 배열 전체를 저장합니다. 새 항목만도 아니고 차이만도 아닙니다. 목록을
다시 그릴 때처럼, 여기서도 단순한 쪽이 낫습니다.

notes 라는 이름은 우리가 정하고, 이 사이트 안에서만 겹치지 않으면 됩니다.

다시 읽기

script.js 의 배열 바로 아래, 함수 앞에 넣습니다.

const saved = localStorage.getItem("notes");

if (saved) {
  notes.length = 0;
  for (const note of JSON.parse(saved)) {
    notes.push(note);
  }
}

순서가 중요합니다. draw 가 불리기 전에 돌아야 합니다.

getItem 은 처음 이 페이지를 여는 사람에게 null 을 줍니다. 그래서 if 가
중요합니다. 처음 오는 분은 시작 줄 두 개를 봅니다.

notes.length = 0 은 다시 묶지 않고 배열을 비웁니다. const 라서 새 배열을
넣을 수 없기 때문입니다.

그다음 저장된 줄을 같은 배열에 하나씩 넣습니다. 나머지 코드가 이미 쓰고 있는
바로 그 배열입니다.

링크 색 맞추기

style.css 의 /* saving */ 주석 아래에 마지막 규칙을 넣습니다.

a {
  color: #8A5A00;
}

a:hover {
  color: #C98B1B;
}

3강부터 계속 브라우저 기본 파란색이었습니다. 이 강의의 마지막 코드입니다.

확인하기

python -m http.server 5500

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

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

한 줄 적고 Add 를 누른 다음, 새로 고치면서 목록을 보셔야 합니다.

그대로 있습니다. 탭을 닫고 브라우저를 닫고 내일 와도 그대로입니다.

이 컴퓨터의 이 브라우저에, 이 사이트 몫으로 저장됩니다. 그 부분이 중요하고,
그것이 유일한 한계입니다.

새로 고친 뒤 비어 있으면 콘솔에서 빨간 줄을 찾아보세요. 보통 parse 실패이고,
if 를 넣으면 해결됩니다.

15강이 만든 것

폴더에 파일 네 개뿐이고 다른 것은 없습니다. node_modules 도 package 파일도
빌드 단계도 설정 파일도 없습니다.

그 폴더를 어느 컴퓨터에 복사해도 동작합니다. 10년 뒤에도 그럴 겁니다.

자주 발생하는 오류

첫째, 배열을 그대로 setItem 에 넘기는 경우입니다. 대괄호 없는 반점 목록이
되어서 parse 가 실패합니다.

둘째, null 인지 보지 않고 parse 하는 경우입니다. 처음 오는 사람에게 오류가
나고 페이지가 멈춥니다.

셋째, 다른 기기에서도 목록이 보일 거라고 기대하는 경우입니다. localStorage 는
이 컴퓨터의 이 브라우저입니다. 기기 사이에 공유하려면 서버가 필요한데, 그건
다른 강의입니다.

가져가실 것

세 언어와 각각이 무엇을 정하는지 아시게 됐습니다. 페이지에 무엇이 있는가,
어떻게 보이는가, 무엇을 하는가입니다.

프레임워크 없이도 전부 동작했습니다. 나머지는 전부 이것의 연장이고, 이름만
더 좋습니다.

작은 것을 만들어보고 일부러 망가뜨려 보세요. 그게 다음 강의이고, 그건 누가
대신 찍어드릴 수 없습니다.

연습 문제

1. 목록에서 항목을 지우는 버튼을 만들어보세요. 배열에서 빼고 다시 그리면 됩니다.
2. localStorage 에 이름도 같이 저장해보세요.
3. 개발자 도구의 Application 탭에서 저장된 값을 직접 들여다보세요.

다음 편

여기까지가 15강입니다. 읽어주셔서 고맙습니다.

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