바이브코딩으로 만드는 나만의 게임과 학습 도구

3차시 / 전체 6차시

데이터 저장하여 기록 관리하기

새로고침해도 최고 점수는 남는다

3데이터 저장하여 기록 관리하기

오늘의 흐름 · 45분

00~05분점수가 사라지는 문제
05~12분저장할 곳 세 군데
12~20분코드 받아 내 파일로
20~36분저장 붙이기
36~45분올리고 옆자리에서 열기

시간은 안내일 뿐입니다. 막히는 사람이 많으면 실습 시간을 늘립니다.

3데이터 저장하여 기록 관리하기

해 보세요

게임을 한 판 하고 새로고침

점수가 어떻게 됐나요?

3데이터 저장하여 기록 관리하기

사라졌습니다

컴퓨터는 꺼진 순간 잊어버립니다

기억하게 하려면 어딘가에 적어 두라고 말해 줘야 합니다.

3데이터 저장하여 기록 관리하기

저장할 곳은 세 군데

1 안 남는다 그냥 화면에만 띄움 F5 누르면 사라짐 지금까지 2 내 PC에만 브라우저 수첩에 적음 껐다 켜도 남음 오늘 3 어디서나 인터넷에 적음 집에서도 보임 5차시 오늘은 ②번까지 간다
단계마다 불편한 점이 하나씩 남습니다. 그 불편이 다음 시간의 주제가 됩니다.
3데이터 저장하여 기록 관리하기

오늘 쓸 것

localStorage

브라우저가 가진 작은 수첩입니다.
껐다 켜도 남아 있지만, 그 브라우저 안에서만 남습니다.

3데이터 저장하여 기록 관리하기

그 전에 할 일

캔버스 보고 고치기 좋은 곳 기록은 남지 않는다 내 파일 mypage.html 기록이 남고, 배포할 수 있다 코드 받기 캔버스 오른쪽 위 메뉴 오늘부터는 내 파일로 가져와서 쓴다
3차시부터는 수업이 끝날 때마다 코드를 받아 두는 습관을 들입니다.
3데이터 저장하여 기록 관리하기

내 파일로 가져오기

1
코드 받기캔버스 오른쪽 위 메뉴에서
2
이름 정하기영문 + .html로 (예: game.html)
3
폴더에 두기바탕화면에 내 폴더를 하나 만들어 모아 둡니다
4
더블클릭브라우저가 열리면 성공

내 컴퓨터에서 먼저 확인하고 올리는 습관을 들이세요. 올린 뒤에 고치는 것보다 빠릅니다.

3데이터 저장하여 기록 관리하기

붙일 기능

  • 게임이 끝나면 점수를 수첩에 적는다
  • 이미 적힌 점수보다 높을 때만 바꿔 쓴다
  • 페이지를 열 때 적힌 점수를 읽어 와 보여 준다
  • 화면에 '이 브라우저에만 저장됩니다'라고 알려 준다

워크벤치 3차시 프롬프트에 그대로 들어 있습니다.

3데이터 저장하여 기록 관리하기

이제 직접

16분, 기록 남기기

붙인 다음 코드를 다시 받아 파일을 덮어쓰고,
새로고침해 보세요. 최고 점수가 남아 있으면 성공입니다.

3데이터 저장하여 기록 관리하기

한 가지 실험

옆자리 컴퓨터에서 열어 보세요

같은 주소인데, 내 최고 점수가 보이나요?

3데이터 저장하여 기록 관리하기

왜 안 보일까

내 컴퓨터 🗒️ 브라우저 수첩 최고 점수 420 F5 눌러도 그대로 옆자리 컴퓨터 🗒️ 브라우저 수첩 비어 있음 같은 파일을 열어도 ✕ 수첩은 컴퓨터마다 따로 있다 — 서로 오가지 않는다
고장이 아닙니다. 주소는 같아도 수첩은 컴퓨터마다 따로입니다. 이걸 해결하는 것이 5차시입니다.
3데이터 저장하여 기록 관리하기

다음 시간

나만의 학습 도구

게임 말고, 내가 실제로 쓸 것을 만듭니다.

1 / 13 🏠 홈 🛠️ 워크벤치 1차시2차시4차시5차시6차시