Prompt Context 번역
Prompt Context는 AI를 거대한 레포지토리에서 사용할 수 있게 해주는 아이디어입니다. 사용하시는 IDE나 도구는 거의 상관 없습니다. 그리고 이 방식을 사용하면 거대하고 복잡한 모노레포에서도 AI가 잘 작동합니다.
tl;dr;
제 .cursorrules 파일은 다음과 같습니다.
- First, look for glob `**/.AI.md`. Use terminal command `find . -name '.AI.md'` from the project root, if required.
- Second, if you are going to read and/or write any file in a directory containing `.AI.md` files from the first step, read all of them and respect the instructions in them.
- For example, if you are reading or writing a file at /a/b/c, you should check for `/a/.AI.md`, `/a/b/.AI.md` and `/a/b/c/.AI.md` in the order.
감이 오시나요? 이런 방식으로 AI한테 어떤 폴더에서는 어떻게 작업해야하는지 폴더별로 가르쳐줄 수 있습니다. context.md 파일을 통해서요.
아이디어는 인공지능이 작업을 하기 위해 필요한 경우 임의의 파일을 읽어올 수 있다는 점에서 착안했습니다. 제 레포지토리는 전혀 느낌이 다른 여러개의 next.js 앱과 protobuf RPC를 위한 코드를 포함해 여러가지 복잡한 패키지들이 있는데요, 각 폴더에서 해야하는 작업이 너무 다릅니다. 하지만 저는 이 기술을 사용해서 AI가 코드를 잘 짜게 만들 수 있었습니다.
장점:
전체 폴더를 위한 작업 지침을 넘기는 것이 아니기 때문에 컨텍스트 사이즈가 거의 문제되지 않습니다.
폴더별로 작성하기 때문에 관리하기 쉬워집니다.
AI가 코드 스타일을 더 잘 지킵니다. (지키지 않는다면
context.md에 적으면 됩니다.)AI가 더 높은 퀄리티의 코드를 짭니다.
.cursorrules방식의 암시적 프롬프트가 레포지토리의 복잡도와 상관없이 작동합니다.
예시 context.md 파일입니다.
/context.md:
(레포지토리의 최상단에 있습니다)
# RPC
We use connect rpc to call RPC methods. The protobuf files are located at `${gitRoot}/rpc/*/v1.proto`.
## When to use RPC vs client-side code
- Basically, prefer client-side code over RPC.
- If you need to call a nodejs-only code, use RPC.
- If you need to call code that uses any secret, use RPC.
## Implementing RPC methods
- First, add the RPC method definitions and message definitions to the protobuf files.
- You should register the RPC method implementations in the `${gitRoot}/servers/*-api/connect.ts` file.
- You should not store all code in the `${gitRoot}/servers/*-api/connect.ts` file. Instead, define a service and put the implementation in another file in the same directory.
## Calling RPC methods
- Do not fetch directly from the page component. Instead, define a hook to fetch the data and use it in the page component.
From a react component, you can define a hook using the `useMutation` method.
```js
const detectFaces = webtoolsClient.detectFaces.useMutation();
```
After then, you can call the method with `mutateAsync` method.
```js
const result = await detectFaces.mutateAsync({
imageData: new Uint8Array(buffer),
});
```
/apps/context.md:
1. This directory contains next.js apps. Follow the next.js app directory structure.
2. List all files before you start coding. Follow the file structure.
3. Do not fetch directly from the page component. Instead, define a hook to fetch the data and use it in the page component.
4. Prefer explicit path parameters in components over 'useParams'.
5. Do not generate shadcn ui components.
6. If you are trying to run the test script in package.json (e.g. `pnpm test:unit`), ensure you set environment variable `CI=1` to indicate it's running automatically.
7. Follow Toss Design guidelines.
8. Ignore route-related TypeScript type errors.
9. If you need to call mutating RPC methods, use the `useMutation` hook.
```ts
const createProject = coreClient.createProject.useMutation();
```
10. If you need to call query RPC methods, use the `useQuery` hook.
```ts
const projects = coreClient.listProjects.useQuery();
```
11. Include `locale: Locale` where `Locale` is `import { Locale } from "@/i18n";` in the params of the page components.
12. Define the params as `Promise<T>` in the page components.
13. Use `use(params)` to unwrap the params as `T` from `Promise<T>` in the page components.
14. Import RPC clients from `@dudykr/rpc-clients/src/XXX`. where `XXX` is the name of the RPC client.
e.g.
```ts
import { coreClient } from "@dudykr/rpc-clients/src/core";
```
15. Use `<Link>` from `next/link` instead of the `<a>` tag.
# Translation
For the next.js apps, modify only `./messages/en.json` and run `pnpm translate`.
This will translate the messages to all languages.
이것들은 실제로 제가 사용하는 context.md 파일들입니다. 흥미롭다면 한 번 시도해보시는 걸 추천드립니다.