Claude Code 써보기

https://docs.anthropic.com/ko/docs/claude-code/amazon-bedrock

Amazon Bedrock의 Claude Code - Anthropic

위의 안내대로 따라하면 된다. 

그냥 사용하려면 결제를 해야하기 때문에 bedrock으로 연결해 무료로 써볼 수 있다. 

 

1. AWS Management Console https://aws.amazon.com/ko/console/ 로 이동해서 로그인하고, IAM 사용자를 생성한다. 

 

2. AWS 자격 증명 구성

# AWS CLI 구성 
npm install -g @anthropic-ai/claude-code
aws configure

# 환경 변수 (엑세스 키)
export AWS_ACCESS_KEY_ID=your-access-key-id
export AWS_SECRET_ACCESS_KEY=your-secret-access-key

 

3. Claude Code 구성 

# Bedrock 통합 활성화
export CLAUDE_CODE_USE_BEDROCK=1
export AWS_REGION=us-east-1  # 또는 선호하는 지역

 

 

4. 시작 

claude init

 

위 단계를 완료하면 Welcome to Claude Code 가 뜬다! 

 

 

클로드 코드 시작 

1. 프로젝트 생성하기 

그리고 나는 학습 기록 분석기 라는 프로젝트를 먼저 테스트로 처음부터 만들어보려고 한다. 

프론트는 Next.js로 구성할 것이다. 

그러면 여기서 이렇게 설치할까? 라고 물어봐주면 yes 라고 답하고 프로젝트를 생성한다. 

tailwindcss 까지 일일이 물어보고 설정해준다.

내가 할일은 enter만 치는 것 .. 하하 

 

2. 프론트엔드 코드 만들기 

메인 페이지도 만들기 시작했다. 

 

3. 벡엔드 코드 만들기 

벌써 프론트엔드 코드가 완성되었다...!

이제 벡엔드 코드를 만들려고 한다. 

 

 

`express`와 `mongoDB`로 벡엔드 코드도 뚝딱 만들어졌다. 

4. 프론트에서 API 연결하기

먼저 API 함수를 만들고, 

 

다음에 이를 페이지에서 적용한다. 

 

 

5. 차트 그래프 적용하기 

chart.js 패키지를 설치한다. 

 

 

 

신기한 점은, 에러가 나도 Claude Code가 알아서 오류를 찾아서 해결한다는 점이다. 

현재 backend/ 폴더에 잘못 설치하려고 해서, 다시 frontend/ 폴더를 찾아보고 설치를 했다. 

(( 이런 간단한 오류는 잘 잡지만 기능적인 오류는 잘 못잡는 것 같다.

 

 

 

학습 기록에 관한 차트를 만들어준다. 

 

 

그리고 아까 api.ts에서 만든 API 함수를 가져와 연결한다. 

 

뺄 코드와 추가할 코드도 시각적으로 잘 보여준다. 

 

6. 패턴 분석 실행하기 

벡엔드 코드에서 패턴 분석 기능 코드를 적는다. 

 

 

 

7. 최종 실행하기 

이제 다 완성되었다. 

나의 요구사항들을 들어주었고, 프로젝트 결과 요약과 실행 방법까지 친절하게 알려준다. 

 

이제 웹사이트가 어떻게 만들어졌는지 확인해보자. 

 

1. 학습을 기록할 수 있다. 

 

2. 내가 한 학습 기록 리스트를 볼 수 있다. 

 

 

3. 학습 대시보드에서 학습한 내용들의 통계를 볼 수 있다. 

 

 

 

 

총평 

개발을 아예 몰라도 처음부터 끝까지 만들어볼 수 있다는게 좋은 것 같다. 

프론트엔드 구조와 벡엔드 구조도 잘 짜인 것 같다. 

 

하지만 사이트 스타일링을 깔끔하게 해주지 못한다. 챗지피티가 이 부분에서는 훨씬 깔끔하게 잘해주는 것 같다. 

솔직히 말해서 스타일에 대한 감이 거의 없는 듯 ..

 

그리고 오류 수정도 잘 못한다.

이렇게 문제의 콘솔을 꼬집어서 알려줘도 잘 해결을 못한다.

벡엔드 연결이 잘 안되어서 물어보니 네트워크 연결을 다루지 않고 벡엔드 없이 프론트에서만 할 수 있는 방법을 알려준다. ㅡㅡ 

몇번을 물어봐도 똑같은 흐름일 뿐 .. 해결되지 않았다. 

 

이게 다 클로드 코드가 짠 코드여서 내가 어디를 수정해야할지 감도 안잡히고 이해하는데 시간이 많이 걸릴 것 같다. 

 

그래도 처음에 프로젝트 환경 세팅은 잘한다. 테일윈드 같은 config 파일을 설정하는 건 도움이 된다.

그래서 처음부터 다 시키지 말고, 내가 개발하다가 모르는 부분만 질문하고 조금씩 수정하는 게 좋을 것 같다. 

 

뭔가 잘되는데 답답해서 잘 쓰게 될지는 모르겠다 ..