Claude Code

📒 Claude Code 

claude code은 claude 사에서 만든 AI 코드 작성 에이전트이다. 터미널에서 요구사항을 프롬프트로 입력하면, 실행계획을 작성한 후 이를 순차적으로 실행한다. 작업 시작 시, 프로젝트 폴더 권한을 Clade code에게 위임하게 된다. Cladue Code가 실행계획을 수행하며, 폴더 내의 코드를 변경한다. 

 

🏃🏻‍♀️ 사용 사례 

프롬프트 요구사항을 다음과 같이 작성하였다. 이를 바탕으로 Claude Code가 실행계획을 세우고, 실행계획을 수행하며 파일을 직접 수정한다. 

프롬프트

사용자가 더 수강할 수 있는 강좌를 편하게 조회할 수 있는 React 앱을 구축해야 한다. 


요구사항 
- https://abc.com 사이트에서 원하는 강좌를 조회한 후, 필터링을 해야한다.  
- 이 때, 데이터는 실시간으로 조회해서 가져와야한다. 하드코딩된 데이터이면 안된다. 
- 강좌 이름에는 수업을 들을 수 있는 개월수 혹은 연년생 정보가 포함되어 있다. 
- 즉, 브라우저의 현재 시각을 기준으로 개월수를 계산해야한다.  

수강생 정보는 다음과 같습니다. 

- 2024년 01월에 태어난 영유아가 들을 수 있어야 한다. 
- "서울"에 있는 "인성시"에서 수강할 것이다. 
- 카테고리는 "자녀" 하위에 있는 모든 카테고리이다. 
- "접수중"인 것들만 조회되어야한다. 접수가 마감된 건은 필터링 되어야 한다. 
- "요일/시간"은 "토요일" 혹은 "일요일"이어야 한다. 

앱을 시각적으로 매우 매력적으로 만들어야 한다. 

당신은 세계 최고의 프론트엔드 엔지니어이고 시각 디자인 석사 학위도 가지고 있으므로 이 작업을 매우 잘 할 수 있다. 
색상 팔레트는 파란색, 흰색, 회색을 사용해야 한다.

- 날짜가 중요하기 때문에 달력 UI 안에 강좌 정보가 포함된 형태여야 한다. 
- 캘린더 위의 강좌에 마우스를 대면, 강좌의 정보가 툴팁으로 나와야 한다. 
- 그리고 강좌를 클릭하면 상세조회 링크로 이동해야한다.
```

 

실행 계획 및 수행 과정 

 

📺 소개 영상보기

https://www.youtube.com/watch?v=AJpK3YTTKZ4

https://www.youtube.com/watch?v=gNR3XI5Eb0k