함정과 주의점

// 위험한 코드
const supabase = createClient(
  "https://abc.supabase.co",    // URL이 코드에 직접!
  "eyJhbGciOiJIUzI1NiIs..."     // 키가 코드에 직접!
);

// 안전한 코드
const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
);

// 위험: 문자열 결합
const { data } = await supabase
  .rpc('search_users', { query: `%${userInput}%` });
 
// 안전: 파라미터 바인딩 (Supabase는 기본적으로 안전하지만 rpc 사용 시 주의)
const { data } = await supabase
  .from('users')
  .ilike('name', `%${userInput}%`);

// 위험: dangerouslySetInnerHTML
<div dangerouslySetInnerHTML={{ __html: userComment }} />
 
// 안전: React 기본 이스케이핑
<div>{userComment}</div>
 
// HTML 필요 시: sanitize 라이브러리 사용
import DOMPurify from 'dompurify';
<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(userComment) }} />

// 위험: 모든 출처 허용
const corsHeaders = { "Access-Control-Allow-Origin": "*" };
 
// 안전: 특정 도메인만 허용
const corsHeaders = {
  "Access-Control-Allow-Origin": "https://myapp.vercel.app"
};

// 위험: 입력값 검증 없음
export async function POST(req: Request) {
  const { email, amount } = await req.json();
  await chargeUser(email, amount);  // amount가 음수면?
}
 
// 안전: Zod로 검증
import { z } from 'zod';
const schema = z.object({
  email: z.string().email(),
  amount: z.number().positive().max(1000000),
});
 
export async function POST(req: Request) {
  const body = schema.parse(await req.json());
  await chargeUser(body.email, body.amount);
}

# 기능과 함께 테스트 요청
> "로그인 API를 만들어줘. 유닛 테스트도 함께 작성해줘.
   - 정상 로그인 케이스
   - 잘못된 비밀번호 케이스
   - 존재하지 않는 이메일 케이스"

> "이 5개 파일에서 공통 패턴을 추출해서 재사용 가능한 유틸 함수로 만들어줘"

> "이 에러가 발생했어:
  [에러 메시지 전문 복사]
  고쳐줘."

> "lib/auth.ts와 app/api/login/route.ts를 읽고,
   왜 인증이 실패하는지 분석해줘."

> "이 방식은 계속 안 되니까, 완전히 다른 접근법으로 다시 구현해줘.
   이전 코드는 삭제하고 처음부터."

# npm에서 확인할 것
> "[패키지명]의 npm 주간 다운로드 수, 최근 업데이트 날짜, GitHub 스타 수를 알려줘"