Claude Code를 이용한 todo 만들기

복사
mkdir claude-todo
cd claude-todo

해당 폴더에서 claude를 실행한다.

복사
현재 폴더는 프로젝트 폴더입니다. 해당 폴더(.)를 vite프로젝트로 생성하고자 합니다.
다음과 같은 아키텍처를 사용하도록 프로젝트를 생성하고 싶습니다. 프로젝트를 생성해주세요.

- javascript 사용(typescript사용하지 않음)
- react 프로젝트
- lint 사용함

해당 폴더에서 todo개발을 진행합니다.

---

프론트엔드와 백엔드를 같이 개발할때는?

복사
프로젝트폴더( 프론트,백엔드 함께 있는폴더) - claude를 실행.
  - frontend ( react 프로젝트) - 별도의 git 레파지토리로 사용
  - backend   (이건 spring boot 프로젝트) - 별도의 git 레파지토리로 사용
  - CLAUDE.md 
  - docs - 프로젝트 관련문서가 저장되도록 한다.
  - .gitignore ( frontend, backend)

프로젝트폴더에서 명령을 실행한다.
gitignore에서는 frontend, backend를 ignore시킨다.

github에 frontend, backend, 프로젝트폴더를 레포지토리로 올린다.
배포시에는 frontend, backend 가 따로 배포되고 코드가 관리되어야 하기때문.

복사
mkdir mytodo
cd mytodo

claude 를 실행하고 shift+tab을 눌러서 auto mode로 바꾼다.

/model 을 입력한 후 Sonnet을 선택한다. 답이 잘 해결안될때만 Opus 4.8 을 사용한다.

복사
다음과 같은 구조로 폴더를 만듭니다.
현재폴더(.)과 frontend, backend 폴더는 git repository입니다.

프로젝트폴더( 프론트,백엔드 함께 있는폴더. 현재폴더(.)) - claude code가 실행된 폴더
  - frontend - 별도의 git 레파지토리로 사용
         - javascript사용(typescript사용안함), react, lint 사용 - vite프로젝트
  - backend  - 별도의 git 레파지토리로 사용
         - jdk 21, spring boot, spring data jpa, mysql, spring mvc 사용
  - CLAUDE.md 
  - docs - 프로젝트 관련문서가 저장되도록 한다.
  - .gitignore ( frontend, backend 는 gitignore 한다.)

CLAUDE.md 생성과 git 전략을 입력한다.

복사
CLAUDE.md 를 생성합니다. CLAUDE.md 는 되도록 200줄을 넘지 않게 작성해주세요.
위에서 설정한 아키텍처를 이용해서 프로젝트가 생성되었다는 정보를 기록해주세요.
docs 폴더를 생성하고, 앞으로 프로젝트와 관련된 문서는 이곳에 작성하도록 합니다.
git을 이용합니다. 개발은 dev브랜치에서 하고, 배포는 main브랜치를 사용하도록 합니다. 새로운 개발을 내가 시킬때마다 dev브랜치에서 피처 브랜치를 생성하여 개발을 하고, 개발이 완료되면 dev브랜치에 머지합니다. 

만약 CLAUDE.md 의 내용이 길어지면 구조적으로 폴더와 파일을 만들어서 CLAUDE.md 에서 해당 파일을 참고하도록 해주세요. CLAUDE가 자연스럽게 폴더와 파일구조를 읽어들여서 현재 프로젝트를 파악해서 개발할 수 있도록 해주세요.

CLAUDE는 참고로 .claude 경로에 다양한 파일들을 가질수 있다. (skill, agent정보 등등)

---

DB정보 설정

복사
 mysql 접속 정보는 C:\docker\mysql\docker-compose.yml 의 정보를 이용하여 접속정보를 설정해주세요.

다음과 같이 명령을 수행한다.

복사
React로 Todo 애플리케이션을 만들어주세요.

## 컴포넌트 구조
- App: 전체 상태 관리
- Input: 새 할 일 입력
- TodoList: 할 일 목록 표시
- TodoItem: 개별 할 일 표시

## 기능
1. 할 일 추가: 입력 후 버튼 클릭, 빈 입력 무시
2. 할 일 표시: 체크박스(읽기전용), 텍스트, 삭제 버튼
3. 할 일 삭제: 확인 메시지 후 삭제
4. 할 일 체크: 체크박스를 누르면 할일이 체크됩니다.

## 데이터 구조
- id: Date.now() 사용
- text: 할 일 내용
- completed: 기본값 false

src/App.jsx 파일에 작성해주세요.

백엔드는 spring boot를 이용해 api를 만들고 위의 기능이 mysql db에 저장되도록 해주세요. docs/ 폴더에 api 정의서도 마크다운 문서로 작성해주세요.