🫶 소개
저희 가족이 가족 단위의 독서 골든벨을 나간다고 와이프에게 통보 받아 관련된 준비 홈페이지를 클로드 코드 이용하여 1시간만에 만든 후기입니다.
📚 독서 골든벨 계획
💡 와이프의 독서현황 체크 목록 작성 요청
📚 진행 방법
최초 의도 전달
이 구글 시트에는 100권의 책의 ! 목록이 있어 • 우리 가족은 아빠 , 엄마, ㅇ연, ㅇ호 4명인데이 4명이 이 100권의 책을 읽고 골든벨 퀴즈대회에 나가야 해서 각자 이 책을 읽었는지 체크하는 웹 페이지를 만드려고 해.
Todos를 7단계로 알아서 수립하고, 알아서 시작을 합니다!
가족 독서 체크리스트 웹 페이지 기획
HTML 구조 및 기본 레이아웃 생성
JavaScript로 체크박스 기능 구현
로컬 스토리지 저장 기능 추가
진행률 표시 및 통계 기능 추가
책 검색 및 필터링 기능 구현
간단한 의도만 얘기하고 구체적인 상세 설계를 말하지 않으면
알아서 해준다
그러나 내가 원치 않는 설계가 섞여 들어갈 수 있다
내가 클로드 코드의 단계를 보고 마음에 들지 않았던 부분
로컬 스토리지 저장 기능 추가 -> Not 로컬, My Server에 저장해야 함
검색이나 필터링 기능까진 필요 없다구~
😮 황당했던 포인트 01
도서 100권 목록의 구글 시트 주소를 주었음에도 불구하고, 임의의 추천도서 100권을 갖고 진행을 하길래, 멈추고 다시 정확히 도서목록 확인하도록 지시
그런데 100권 목록이 내가 구글 시트에 준 도서 목록과 상이한 거 같아. 책 목록이 맞는지 더블 체크 후 잘못되었으면 수정 해줘.
https://docs.google.com/spreadsheets/d/1ubhPvrV_UGvAItq
🚀 로컬 저장 대신 내 클라우드 서버에 배포 요청하기
잘 완성되었어. 이것을 내 서버에 설치하고 싶은데, 내 서버 정보는 아래와 같아. @database-guide-v5.md @ssh-server-setup-tutorial.md
평소 제 DB 정보를 md 파일로 정리해 놓았기 때문에 database-guide-v5.md 라는 파일과 ssh-server-setup-tutorial.md 파일을 줘서 내 서버에 패스워드 대신 ssh key 방식으로 클코가 바로 접속하도록 했습니다.
모바일 호환성 요구
PC 뿐만 아니라 모바일에서도 화면이 잘리지 않고 최적화 되도록 되어 있나?
📖 도서별 주요내용(스토리)과 예상문제(10문항) 요구
각 책 제목을 누르면 각 책의 주요 내용(스토리)과 골든벨에서 각 책에서 출제할 만한 문제 예상문제 10개를 먼저 md 파일로 정리해 줄 수 있어?
최종 결과(산출물)
결과에서 배운 점
아이들에게 대시보드를 만들어 주니 동기부여가 확실하게 되었네요.
클코 전에도 딸깍으로 홈페이지 하나 만드는 것을 해봤지만,
클코로 만드니 비개발자가 좀 더 쉽게 할 수 있을거란 생각이 들었어요.
자녀 교육을 위해 대시 보드를 만드는 것이 굉장히 쉬운 시대라
저희 아이들에게도 자기 공부할 때 이런 대시보드를 직접 만들어 활용해 보라고 했습니다.
(공부 안하고 이런 거 만들고 있는게 함정ㅋㅋ)
간단한 홈페이지는 클코와 함께 쉽게 만드는 강좌도 가능할 듯
홈페이지는 예전부터 모든 개발 수업의 첫 입문인데, 클코와 함께 모바일 포함 1시간만에 만드는 시대임은 분명한 거 같아요.
