처음 만나는 AI와 Claude Code

선택 확장: 실제 Excel 파일 내보내고 가져오기

선택 확장 실습: 실제 Excel 파일 내보내고 가져오기

Excel 내보내기·가져오기 HTML 예제 열기 · 함께 필요한 ExcelJS 파일과 라이선스

앞 장의 준비 카드는 이 브라우저에서 쓸 수 있습니다. 하지만 브라우저 데이터를 지우거나 다른 컴퓨터에서 열면 그대로 보이지 않습니다. 이 문제에 대비해 카드를 실제 .xlsx 파일로 내보내고 다시 가져오는 기능을 선택적으로 만들어 봅시다. Excel에서 열 수 있는 글자만 저장하는 CSV와 달리, 이번 파일에는 카드의 이미지도 함께 넣습니다.

이 실습은 기본 앱을 완성한 뒤에만 진행합니다. 건너뛰어도 책의 핵심인 요구사항·설계·구현·검증·개선은 모두 경험한 것입니다. Excel 파일은 자동 동기화가 아닙니다. 내보낸 뒤 바뀐 카드는 파일에도 다시 내보내야 합니다.

파일에 담을 정보와 가져오기 규칙

파일에는 카드마다 책 제목과 나눌 질문을 담고, 이미지가 있는 카드에는 사진 자체도 넣습니다. 가져오기는 이 앱에서 내보낸 파일만 받습니다. 다른 사람이 만든 임의의 Excel 문서까지 읽는 기능은 이번 범위에 없습니다. 참고 앱은 카드 수와 글·파일 크기에 한도를 두어 너무 큰 파일을 만들지 않도록 했습니다. 여러분의 앱에는 어떤 한도가 알맞을지 Claude Code에게 이유와 함께 제안해 달라고 할 수 있습니다.

가져올 때는 현재 카드를 지우지 않고 새 카드를 목록 뒤에 추가합니다. 같은 파일을 두 번 가져오면 카드도 두 번 생긴다는 점을 화면에 알려야 합니다. 파일 형식이 틀리거나 읽기에 실패하면 기존 카드는 그대로 남아야 합니다. 내보낸 파일에는 개인 메모와 사진이 있으므로 공유 전에 내용을 확인하세요.

원하는 동작을 말하고 구현 방법을 묻기

실제 .xlsx 파일을 만들고 읽으려면 앱에 새 기능이 필요합니다. 어떤 라이브러리나 파일 구성이 알맞은지는 현재 앱과 사용 환경에 따라 달라질 수 있습니다. 기술 이름을 미리 고르기보다 원하는 결과와 지켜야 할 조건을 먼저 말하고, Claude Code가 고른 방법을 쉬운 말로 설명해 달라고 해 봅시다.

Excel 파일은 준비 카드를 다른 프로그램으로 옮길 수 있는 휴대용 상자와 비슷합니다. 다만 상자에 담았다고 내용이 저절로 안전해지는 것은 아닙니다. 내보낸 파일에 어떤 글과 이미지가 들어 있는지 확인한 뒤 공유하세요.

지금 만든 준비 카드 앱에 실제 Excel 파일(.xlsx)로 내보내고 다시 가져오는 기능을 추가해 줘. 파일에는 책 제목과 나눌 질문을 담고, 이미지가 있는 카드에는 사진도 포함해 줘. 가져오기는 이 앱에서 내보낸 파일만 받고, 기존 카드를 지우지 말고 뒤에 추가해 줘. 같은 파일을 두 번 가져오면 카드가 중복된다는 점을 화면에 알려 줘. 잘못된 파일이거나 읽기에 실패하면 기존 카드는 그대로 두고 이유를 알려 줘. 카드와 사진을 외부 서버로 보내지 마. 구현 전에 지금 앱에 알맞은 방법과 새로 필요한 파일·외부 코드를 쉬운 말로 설명해 줘. 끝나면 실제 파일을 내보내고 다시 읽는 시험 방법도 알려 줘.

Claude Code가 방법을 제안하면 코드를 몰라도 다음처럼 물어볼 수 있습니다.

• “지금 앱은 어떤 파일과 기술로 만들어져 있나요? 새 기능을 위해 무엇을 추가하며, 왜 필요한가요?”

• “외부에서 가져올 코드가 있나요? 있다면 공식 출처와 이용 조건을 어디에서 확인하나요? 인터넷이 끊겨도 기능이 동작하나요?”

• “내 카드와 사진은 어디에 저장되고, 파일을 만들거나 읽을 때 다른 곳으로 전송되나요?”

• “크거나 잘못된 파일, 이미지가 너무 많은 경우에는 어떻게 막나요? 가져오기가 중간에 실패해도 원래 카드가 남나요?”

• “완성 후 어떤 파일을 함께 보관해야 하나요? 이미지 있는 카드와 없는 카드, 잘못된 파일을 어떻게 시험하나요?”

설명을 듣고 새 파일 다운로드나 명령 실행을 승인할 때는 출처와 작업 대상을 확인하세요. 이해되지 않는 출처나 동작이 있다면 실행 전에 다시 물어보면 됩니다. 어떤 기술을 사용했든 아래의 실제 동작을 기준으로 확인하세요.

내보내기·가져오기 시험

이미지가 있는 카드 한 장과 없는 카드 한 장을 준비합니다. ‘Excel 파일 내보내기’를 눌러 .xlsx가 내려오는지 확인하세요. 파일을 Excel에서 열 수 있다면 제목·질문과 첫 카드의 사진이 보이는지 확인합니다. Excel이 없어도 앱의 가져오기 시험은 할 수 있습니다.

시험용 카드를 지운 다음 방금 내보낸 파일을 선택해 가져옵니다. 제목과 질문 두 쌍, 이미지 한 장이 돌아오고 새로고침 후에도 남아야 합니다. 기존 카드를 지우는 것이 걱정된다면 삭제하지 않고 먼저 가져와 기존 목록 뒤에 두 장이 더해지는지 확인해도 됩니다.

마지막으로 이름만 .xlsx인 잘못된 파일을 선택해 봅니다. 오류가 나더라도 이미 있던 카드는 그대로여야 합니다. 결과가 다르면 “어떤 파일을 가져왔고, 가져오기 전후에 카드가 몇 장이었는지”를 Claude Code에 알려 주세요. 이것이 파일 기능의 확인 기준입니다.

파일로 옮기는 기능은 유용하지만 브라우저 저장 공간을 무한하게 만들지 않습니다. 이미지가 많아 저장이 막히면 사진을 줄이거나 중요한 카드를 파일로 내보낸 뒤 저장 방식을 다시 설계해야 합니다. 지금은 작고 분명한 범위에서 데이터가 빠짐없이 왕복하는지 확인하는 데 집중해 봅시다.