15강 · 저장하고 마무리

한눈에

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

오늘 다룰 내용은 세 가지입니다. 먼저 목록을 브라우저에 저장합니다. 그다음 페이지를 열 때 다시 읽습니다. 마지막으로 직접 친 파일 네 개를 돌아봅니다. 좋은 소식이 있습니다. 브라우저가 여러분이 정한 이름으로 글자를 하나 보관해줍니다. 서버도 데이터베이스도 계정도 라이브러리도 필요 없습니다. 저장에 한 줄, 다시 읽는 데 한 줄입니다. 마지막으로 폴더를 열어보겠습니다. 오늘 HTML 은 전혀 바뀌지 않습니다. 스크립트 아홉 줄과 마지막에 작은 규칙 하나입니다. 전체가 남아 있게 하는 데 그만큼이면 됩니다. localStorage 전체가 네 줄입니다. setItem 은 이름을 붙여 글자를 보관합니다. getItem 은 그것을 돌려주고, 없으면 null 을 줍니다. removeItem 은 하나를, clear 는 이 사이트 전부를 잊습니다. 글자만 보관하는데, 거기에 함정이 있습니다. 우리 메모는 글자가 아니라 배열입니다. 그래서 넣을 때 글자로 바꾸고 꺼낼 때 되돌립니다. stringify 는 배열이나 객체를 긴 글자 하나로 만듭니다. parse 는 그 글자를 다시 배열이나 객체로 만듭니다. 정확히 반대이고, 앞으로 오래 둘 다 쓰시게 됩니다. JSON 은 데이터를 글자로 적는 방식일 뿐입니다. 저장은 push 바로 다음 한 줄입니다. 매번 배열 전체를 저장합니다. 새 항목만도 아니고 차이만도 아닙니다. 전부입니다. 목록을 다시 그릴 때처럼, 여기서도 단순한 쪽이 낫습니다.

처리 함수 안, push 아래에 한 줄입니다. notes 라는 이름은 우리가 정하고, 이 사이트 안에서만 겹치지 않으면 됩니다. 저장하면 벌써 목록이 보관되고 있습니다. 읽는 곳이 없어서 화면에는 아직 안 나타납니다.

script.js

그리고 페이지가 열릴 때 다시 읽습니다. 처음 이 페이지를 여는 사람에게는 getItem 이 null 을 줍니다. 그래서 if 가 중요합니다. 처음 오는 분은 시작 줄 두 개를 봅니다. notes.length 를 0 으로 두면 다시 묶지 않고 배열을 비웁니다. 그다음 저장된 줄을 같은 배열에 하나씩 넣습니다. 나머지 코드가 이미 쓰고 있는 바로 그 배열입니다.

묶음은 배열 바로 아래, 함수 앞에 들어갑니다. 순서가 중요합니다. draw 가 불리기 전에 돌아야 합니다. 그다음 마지막 규칙 두 개로 링크가 페이지와 어울리게 합니다. 3강부터 계속 브라우저 기본 파란색이었습니다. 두 파일을 저장합니다. 이 강의의 마지막 코드입니다.

script.js

style.css

마지막으로 서버를 띄웁니다. 1강과 같은 줄이고, 15편 동안 바뀌지 않았습니다. 다섯 가지 대신 하나만 기억하시면 됩니다.

터미널

한 줄 적고 Add 를 누릅니다. 이제 새로 고치면서 목록을 보셔야 합니다. 그대로 있습니다. 세 줄 전부입니다. 탭을 닫고 브라우저를 닫고 내일 와도 그대로입니다. 이 컴퓨터의 이 브라우저에, 이 사이트 몫으로 저장됩니다. 그 부분이 중요하고, 그것이 유일한 한계입니다. 지금 이런 화면이 보이고 계셔야 합니다. 새로 고침과 브라우저 종료를 견디는 목록입니다. 새로 고친 뒤 비어 있으면 콘솔에서 빨간 줄을 찾아보세요. 보통 parse 실패이고, if 를 넣으면 해결됩니다. 15편이 실제로 무엇을 만들었는지 보겠습니다. HTML 63줄에 그림, 제목, 목록, 입력 양식이 들어 있습니다. 스타일시트는 백 줄을 조금 넘고, 우리가 쓴 규칙이 전부 들어 있습니다. 자바스크립트 50줄에 사건, 배열, 반복, 저장이 들어 있습니다. 셋 다 글자 하나까지 직접 치셨습니다. 여기서는 보통 세 가지에서 막히게 됩니다. 첫째, 배열을 그대로 setItem 에 넘기는 경우입니다. 대괄호 없는 반점 목록이 되어서 parse 가 실패합니다. 둘째, null 인지 보지 않고 parse 하는 경우입니다. 처음 오는 사람에게 오류가 나고 페이지가 멈춥니다. 셋째, 다른 기기에서도 목록이 보일 거라고 기대하는 경우입니다. localStorage 는 이 컴퓨터의 이 브라우저입니다. 기기 사이에 공유하려면 서버가 필요한데, 그건 다른 강의입니다. 마지막으로 서버를 멈추겠습니다. 폴더에 파일 네 개뿐이고 다른 것은 없습니다. node_modules 도 package 파일도 빌드 단계도 설정 파일도 없습니다. 그 폴더를 어느 컴퓨터에 복사해도 동작합니다. 10년 뒤에도 그럴 겁니다. 가져가실 것 세 가지입니다. 세 언어와 각각이 무엇을 정하는지 아시게 됐습니다. 프레임워크 없이도 전부 동작했습니다. 나머지는 전부 이것의 연장이고, 이름만 더 좋습니다. 작은 것을 만들어보고 일부러 망가뜨려 보세요. 그게 다음 강의이고, 그건 누가 대신 찍어드릴 수 없습니다.

글로 정리한 같은 내용은 하루글에서도 보실 수 있습니다.