[CCA-F] Claude Code in Action(1/2)

What is Claude Code?

What is a coding assistant?

Claude code의 근본 원리, coding assistant를 소개합니다.

이 그림이 충분한 설명이 되는데, Claude만으로는 실행할 수 없는 기능을 중간의 coding assistant를 거쳐서 실행하게 된다.
context를 알아채고, 계획을 세우고, 실행하는 일련의 과정에서 code의 context를 알기 위해 코드를 읽는 과정과 결론을 실행하는 과정에서 코딩 어시스턴트가 필요하다.
위 그림에서 코드를 읽기 위해 tool instruction을 LLM에게 보내는 요청에 포함시키는걸 볼 수 있다. 이를 통해 코딩 어시스턴트가 LLM에게 추가 툴을 써서 요청에 응할지를 물어보는 과정을 살펴볼 수 있다.

• 코딩 어시스턴트 : 코드 읽고싶어? 그렇다면 yes라고 해줘. 네가 짠 코드 실행시킬래? 그렇다면 yes라고 해줘. 내가 전부 다 해줄게.

Getting hands on

Adding Context

CLAUDE.md 사용하기

CLAUDE.md는 처음 /init으로 초기화 할 때, 코드에 대한 정보를 저장한다. claude를 code base기반으로 '중요한 명령어, 구조, 코딩 스타일'을 찾아낼 수 있게 이끈다. 맞춤형 특징들로 claude를 이끈다.
위치에 따라 종류가 다음의 세 가지가 있다.

• /init으로 생성되는 파일
• CLAUDE.local.md : 공유 안됨. personal level content.
• 사용자 local의 root에 있는 .claude : local machine의 모든 project에 사용된다.
  중간에 쓰다 보면 CLAUDE.md를 계속 수정할 일이 있을 텐데, 직접 하거나 /memory를 써서 수정할 수 있다. (이거나 그거나)
  CLAUDE.md 등의 .md 파일 내에서는 파일에 대한 멘션이 @로 가능하다. 파일 경로를 @를 붙여 멘션하면 된다.AGENTS.md로 .md를 분리해서 썼는데, 해당 에이전트에 대한 지침을 CLAUDE.md에 반영하고 싶다면 @AGENTS.md 이렇게 언급만 해도 된다.
• The database schema is defined in the @prisma/schema.prisma file. Reference it anytime you need to understand the structure of data stored in the database.

Making changes

좀 더 효율적으로 claude를 이끌기 위한 실행 계획을 수정하는 등의 노력들을 이 챕터에서 소개한다.
예를 들면 '더 꼼꼼하게 생각해줄래?' '계획만 해줘' 등의 기능들 말이다.

1.흐름 끊기 : esc 두번

2. planning과 thinking

planning은 shift+tab두번 또는 /plan으로 쓸 수 있으며, thinking은 /effort로 사용할 수 있다.
둘의 차이점은 다음과 같다.

• Planning : 더 많은 파일 읽고 추론하기, 자세한 구현 계획 생성, 클로드의 행동에서 의도(log에 가깝다)를 보고 싶을 때, 실행 전 사용자의 허가 받기
  물론 plan 수정도 가능하다. ctrl+g
• Thinking : 하나의 문제에 집중하고 싶을 때, 어려운 문제 풀 때.

추론 과정을 보고 싶다면 ctrl+o를 쓴다.
그리고 /effort를 써서 생각 정도를 조절할 수 있는데, low, max, ultrathinking 등의 키워드를 쓸 수 있다.

Controlling context

일하는 클로드를 원하는 방향으로 이끌기.

1. Escape 2번 : 클로드를 잠시 멈추게 하고 흐름 재정의
2. 1번을 반복해도 방향이 이상하다면 /memory로 지침을 수정하는게 더 나을 수도 있음
3. 근데 지침 보다는 이전으로 돌아가고 싶다면 /rewind로 대화 목록에서 어느 특정 시점으로 돌아갈 수 있음
4. 그 외에 알아두면 좋은 명령어
   • /compact : 여태 대화 기록 요약하면서 key point는 남겨두기. 첫 실행때 이거저거 해보면서 context가 너무 길어졌을 경우에 사용하기 유용하다.
   • /clear : 새 마음 새 context. 단, /resume로 이전 대화 불러올 수 있어서 해당 session에서 완전히 대화 기록을 지우는건 아님.

Custom commands

클로드 명령어 커스텀해서 쓰기
.claude/commands/{command-name}.md로 {command-name}이라는 명령어를 만들 수 있다.
다음은 이렇게 커스텀한 명령어의 예시이다.

This audit command does three things:

Runs npm audit to find vulnerable installed packages
Runs npm audit fix to apply updates
Runs tests to verify the updates didn't break anything

근데 commands 만들고 난 후에는 claude가 알아서 얘네 인식할테니 재시작 할 필요가 없다네...

그리고 commands에 arg도 넣을 수 있다. 이렇게!

Write comprehensive tests for: $ARGUMENTS

Testing conventions:
* Use Vitest with React Testing Library
* Place test files in a __tests__ directory in the same folder as the source file
* Name test files as [filename].test.ts(x)
* Use @/ prefix for imports

Coverage:
* Test happy paths
* Test edge cases
* Test error states

이 명령어는 다음과 같이 실행한다.

/write_tests the use-auth.ts file in the hooks directory 

MCP servers with Claude Code

MCP(Model Context Protocol)을 claude code와 쓰는 방법.

예시로 Playwright(claude에게 browser 조작 가능하게 권한 줌)을 들고 있다.
아래 명령어는 claude 세션 밖에서 실행할 것.

claude mcp add playwright npx @playwright/mcp@latest

• claude에 playwright라는 mcp를 더할 것
• 이 server는 npx~ 명령어로 실행할 것

MCP Server 처음 쓰면 계속 권한 물을 텐데, 귀찮으면 권한 미리 설정할 수 있다.
.claude/settings.local.json에서 아래와 같이 권한을 설정한다.

{
  "permissions": {
    "allow": ["mcp__playwright"],
    "deny": []
  }
}

mcp 다음에 더블 언더스코어 넣는거 잊지 말기.

Github integratrion

github action에 claude를 같이 쓰는 두 가지 방법

설치야 뭐 /install-github-app으로 하고, api키 설정하고 하면 된다.
claude api key가 물론 필요하다.
이후 설정은 .github/workflows에서 확인 가능하다.

그렇다면 어떻게 github action과 claude를 같이 쓸 수 있을까?

1. issue나 pull request에서 @claude 이렇게 호출해서 상호작용하기.
   ex) 이슈 하나 생성해서 '토글 기능 구현했다고 했는데 빠졌어. 구현해줄래? @claude'
2. pull request 날릴 때 claude가 자동으로 리뷰, 변화가 어느정도 일어났고 얼마나 영향 미칠지 등을 분석해서 pull request에 report 작성하게 할 수 있다.

첫 pull request 이후 workflows를 커스텀할 수 있다. 예시를 몇가지 들어본다.

1. claude 실행 전에 프로젝트 초기 환경 설정 하라고 명령하기

   name: Project Setup run: | npm run setup npm run dev:daemon

2. 프로젝트 설정 할 때 context를 claude에게 주기

   custom_instructions: | The project is already set up with all dependencies installed. The server is already running at localhost:3000. Logs from it are being written to logs.txt. If needed, you can query the db with the 'sqlite3' cli. If needed, use the mcp__playwright set of tools to launch a browser and interact with the app.

3. MCP 세팅하기
   이 때, 권한 부여하는 것이 중요하다. 명시적으로 전부 다 부여해 줘야 함.

   mcp_config: | { "mcpServers": { "playwright": { "command": "npx", "args": [ "@playwright/mcp@latest", "--allowed-origins", "localhost:3000;cdn.tailwindcss.com;esm.sh" ] } } }