처음 만나는 AI와 Claude Code

두 번째 카드를 저장하고 수정하기

3장. 두 번째 카드를 저장하고 수정하기

여러 장 추가·수정·삭제 HTML 예제 열기

첫 카드를 저장한 뒤 다른 책 제목과 질문을 입력해 다시 저장해 보세요. 첫 카드가 사라진다면 지금 프로그램은 약속한 대로 한 장을 바꾸어 저장하고 있습니다. 하지만 여러 책을 비교하며 모임을 준비하려는 사람에게는 부족합니다. 실제 사용에서 발견한 문제를 다음 개발 단계의 출발점으로 삼아 봅시다.

한 장에서 목록으로

이번에는 카드 한 장이 아니라 카드 목록을 저장합니다. 목록은 여러 메모를 순서대로 담는 상자라고 생각하면 됩니다. 각 카드에는 책 제목과 질문이 있고, 어느 카드를 고칠지 구분할 표시도 필요합니다. 이 표시를 프로그램에서는 보통 id라고 부릅니다. 제목이 같은 책 두 권을 적어도 서로 다른 카드를 수정·삭제할 수 있게 해 줍니다.

여러분이 종이 카드를 상자에 넣어 관리한다고 떠올려 보세요. 카드마다 번호표를 붙이면 제목이 같아도 원하는 카드를 찾아 고칠 수 있습니다. 프로그램의 id도 그런 구분표 역할을 하지만, 종이에 적힌 번호가 아니라 각 항목을 구별하는 값입니다.

성공 기준은 네 가지입니다.

1. 첫 카드를 둔 채 두 번째 카드를 추가할 수 있습니다.

2. 각 카드의 제목과 질문을 따로 수정할 수 있습니다.

3. 한 장을 삭제해도 다른 카드는 남고, 새로고침 뒤에도 그 상태가 유지됩니다.

4. 앞 실습에서 저장한 한 장이 있다면 처음 열 때 목록으로 옮겨집니다.

Claude Code에 현재 파일을 고쳐 달라고 요청합니다. 연습 폴더 안의 index.html만 대상인지 확인하세요.

지금은 준비 카드를 한 장만 저장해서 두 번째 책을 적으면 첫 카드가 사라져. 카드 여러 장을 목록에 추가하고 각 카드를 따로 수정·삭제할 수 있게 index.html을 고쳐 줘. 기존에 저장한 한 장이 있다면 처음 한 번 목록으로 옮겨 줘. 제목이나 질문이 비면 저장하지 말고, 새로고침 뒤에도 목록과 수정·삭제 결과가 유지되어야 해. 브라우저 안에서만 저장하고 모임 안내의 ‘추후 안내’는 유지해 줘. 바꾼 뒤 내가 시험할 순서를 알려줘.

모델이 만들어 주는 코드의 모양은 다를 수 있습니다. 저장에 쓰는 이름을 바꿀 때 기존 한 장을 읽어 목록으로 옮기는 과정이 빠지지 않았는지 물어보세요. 이전 내용을 자동으로 옮기는 일을 데이터 이전이라고 합니다. 이미 저장한 것을 잃지 않기 위한 단계입니다.

두 장으로 시험하기

첫 카드에 ‘어린 왕자’와 ‘주인공은 왜 여행을 떠났을까?’를 적습니다. 둘째 카드에는 ‘모모’와 ‘시간 도둑은 무엇을 빼앗았을까?’를 적어 봅니다. 둘 다 화면에 보이는지 확인하세요. 이 책들은 실습용 입력 예시이지 실제 모임 선정 도서가 아닙니다.

둘째 카드의 질문만 고쳐 저장한 뒤 새로고침합니다. 첫 카드의 질문은 그대로인가요? 이제 첫 카드만 삭제하고 다시 새로고침합니다. 둘째 카드는 남아 있어야 합니다. 하나라도 다르면 “어느 카드에 어떤 행동을 했을 때 무엇이 바뀌었는지”를 Claude Code에 알려 주세요. 예를 들면 “첫 카드를 지웠더니 둘째 카드도 사라졌어. 한 장만 지워지도록 고쳐 줘”처럼 말할 수 있습니다.

여러 장을 만들 수 있으니 다음에는 책을 더 빨리 알아볼 방법을 생각해 봅시다. 다음 실습의 이미지 붙이기는 그 문제에서 시작합니다.