AI에게 개발을 맡기기 전에 왜 기본기가 먼저여야 하나요?

// AI에게 막연하게 요청하는 경우

"블로그 웹사이트 만들어줘"

→ AI가 임의로 결정하는 것들:
  - 프레임워크 (React? Next.js? Vue?)
  - 스타일링 방식 (CSS Modules? Tailwind? styled-components?)
  - 라우팅 구조 (/posts/[id]? /blog/[slug]?)
  - 댓글 기능 포함 여부
  - 로그인 필요 여부
  - 데이터 저장 방식 (로컬 파일? DB? CMS?)

결과: 동작은 하지만 요구사항과 다르고,
      수정하려면 전체 구조를 이해해야 합니다.

// 기본기 없이 AI 코드를 그대로 사용하는 경우

// AI가 생성한 코드 — 동작은 하지만 문제가 있습니다.
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(async () => {       // async를 useEffect에 직접 전달 (메모리 누수)
    const res = await fetch(`/api/users/${userId}`);
    const data = await res.json();
    setUser(data);
  }, []);                       // userId가 바뀌어도 재요청 안 함 (버그)

  return <div>{user?.name}</div>;
}

// 기본기가 있다면:
// - useEffect에 async 직접 전달이 잘못됐다는 걸 알 수 있습니다.
// - userId를 의존성 배열에 넣어야 한다는 걸 알 수 있습니다.
// 기본기가 없다면: 동작하는 것처럼 보여 그냥 넘어갑니다.

// 기본 구조를 이해한 뒤 구체적으로 요청하는 경우

"Next.js App Router 기반으로 블로그를 만들어줘.
 글 목록은 / 경로에 SSG로 렌더링하고,
 상세 페이지는 /articles/[slug]로 라우팅해줘.
 마크다운 파일을 _articles 폴더에 저장하고
 빌드 시 generateStaticParams로 정적 페이지를 생성해줘.
 스타일은 Tailwind CSS를 사용하고,
 카테고리 필터는 클라이언트 컴포넌트로 분리해줘."

→ 이 요청이 가능한 이유:
  - SSG와 SSR의 차이를 알기 때문에 SSG를 선택할 수 있습니다.
  - 동적 라우팅 구조를 알기 때문에 [slug] 패턴을 지정할 수 있습니다.
  - Server/Client Component 경계를 알기 때문에 분리 기준을 줄 수 있습니다.

// AI가 생성한 코드를 검토하고 수정하는 경우

// AI 생성 코드
function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(async () => {
    const res = await fetch(`/api/users/${userId}`);
    const data = await res.json();
    setUser(data);
  }, []);

  return <div>{user?.name}</div>;
}

// 기본기를 바탕으로 검토 후 수정한 코드
function UserProfile({ userId }: { userId: string }) {
  const [user, setUser] = useState<User | null>(null);

  useEffect(() => {
    const controller = new AbortController();

    const load = async () => {
      try {
        const res = await fetch(`/api/users/${userId}`, {
          signal: controller.signal,
        });
        const data = await res.json();
        setUser(data);
      } catch (err) {
        if (err instanceof DOMException && err.name === 'AbortError') return;
      }
    };

    load();
    return () => controller.abort(); // 언마운트 시 요청 취소
  }, [userId]);                      // userId 변경 시 재요청

  return <div>{user?.name}</div>;
}

// AI를 도구로 활용하는 협업 흐름

1. 요구사항 구체화  — 기본 구조 이해 → 명확한 스펙 정의
2. 초안 생성       — AI가 빠르게 코드를 생성
3. 검토 및 수정    — 개발자가 로직, 성능, 보안을 검토
4. 개선 요청       — 문제를 발견하면 구체적으로 수정 요청
5. 반복            — 검토 → 수정을 반복하며 완성도를 높임

AI는 2번 단계를 빠르게 처리합니다.
1, 3, 4번은 개발자의 기본기가 없으면 진행할 수 없습니다.