[클로드 코드 완독 챌린지] - 1주차 : 고양이가 나오는 웹 페이지 생성

오늘은 클로드 코드의 효과를 체험하는 마지막 날이므로 가벼운 실습으로 특정 목적의 웹 페이지를 빠르게 만들고 , 해당 웹 페이지를 어디에 올리면 좋을지 클로드 코드에게 물어볼 것이다.

Fri 디렉터리로 이동해 claude 를 실행하자.

고양이가 나오는 웹 페이지 생성

웹 페이지 제작 방법을 전혀 모르는 사용자라고 가정하자.

1. “고양이가 나오는 웹 페이지 만들어줘”
   • 7단계로 나누어 리액트 웹 페이지를 만들거라는 메시지 확인
2. 프로젝트 및 기본 파일들을 만들기 위한 단계 → Yes
3. 춤추는 고양이를 svg 형태로 만듬 → Yes
4. 메인 컴포넌트를 만듬 → Yes
5. CSS 애니메이션을 구현 → Yes
6. 반응형 디자인 적용 → Yes
7. 최종 애니메이션 제어 기능을 추가 → Yes
8. 만들어진 웹 페이지가 동작할 수 있는 개발 서버 실행 → Yes
9. 만들어진 개발 서버 주소 값 확인
10. 웹 브라우저에 로컬 주소 값을 입력해 확인
    • 윈도우 WSL2 사용자라면
    • “지금 윈도우 WSL2 환경이야 호스트에서 접속할 수 있게 바인딩해줘” 입력
11. 지금까지 작업한 내용을 이해하기 위해 클로드 코드에 “작업 내용을 설명해줘” 입력

---

만든 웹 페이지를 인터넷에 올리고 확인하기

1. “작성된 웹 페이지를 인터넷에 공개하려면 어떻게 해야 돼” 입력
   • 3단계로 진행 가이드를 작성해줌
   • “네” 입력
2. 처음 단계인 깃허브 저장소를 생성하는 방법에 대해서 알려줌
3. 깃허브 저장소 생성
   • 개인 계정에 접속
   • 리포지토리 생성 → 이름 : cat-dancing-page
4. “저장소 주소는 “~”. 2단계를 진행해줘” 입력
5. 임시 작업 공간을 만들고 깃허브 저장소를 클론한다는 내용 → Yes
6. 웹 페이지 파일들을 복사하고 의존성을 재설치한다는 내용 → Yes
7. 프로덕션 빌드 및 gh-pages 를 설치 → Yes
8. 코드 커밋 및 깃허브에 푸시 → Yes
9. 중첩 폴더 제거 후 커밋 및 푸시 → Yes
10. 깃 허브 페이지에 배포 → Yes
11. gh-pages 브랜치로 체크아웃 → Yes
12. 절대 경로를 상대 경로로 변경 → Yes
13. 수정된 내용을 깃허브 저장소에 푸시 →Yes
14. github 연동
15. 3단계는 알아서 진행
16. https://sondonghyuk.github.io/cat-dancing-page/ 배포된 웹사이트 확인

• 개발자에 따라 물어보는 순서는 달라질 수 있음

지금까지의 실습은 책에 있는 내용과 흡사하게 진행되었을 것이다.
이렇게 유사하게 진행될 수 있었던 이유는 각 디렉터리에 가이드가 되는 CLAUDE.md 파일이 존재했기 때문이다.

CLAUDE.md 는 클로드 코드를 원하는 방향으로 다루기 위한 가장 기초적인 내용이고, 중요한 내용이다.