AI 코드 편집기 활용법 AI와 스마트하게 코딩하기 (Cursor, Copilot, ChatGPT, VSCode)

Mastering Cursor Editor Smart Coding with AI (Cursor, Copilot, ChatGPT, VSCode)

any kind of tests are always allowed like vitest, npm test, nr test, etc.
also basic build commands like build, tsc, etc.
creating files and making directories (like touch, mkdir, etc) is always ok too

// AI에게 수정 요청할 예시 코드
function greet(person: string, date: Date): string { // 반환 타입 명시
  console.log(`Hello ${person}, today is ${date.toDateString()}!`);
  return `Hello ${person}, today is ${date.toDateString()}!`; // 반환문 추가
}
 
// 만약 다른 곳에서 date를 string으로 전달하려고 할 때 발생하는 오류를 AI가 수정하도록 유도
// const todayString = new Date().toISOString();
// greet("Alice", new Date(todayString)); // AI는 Date 객체로 변환하거나, 함수 시그니처를 바꿀 수 있음

이 React 컴포넌트의 `useEffect` 훅이 예상대로 동작하지 않는데, 주요 상태(state)와 속성(props) 값의 변화를 확인할 수 있도록 `console.log`를 추가해줘.

// 예시: React useEffect 디버깅
import React, { useState, useEffect } from 'react';
 
interface MyComponentProps {
  userId: number;
}
 
function MyComponent({ userId }: MyComponentProps) {
  const [userData, setUserData] = useState(null);
 
  useEffect(() => {
    // AI가 로그 추가 요청 시 아래와 같이 로그를 삽입 가능
    console.log(`[useEffect] userId changed: ${userId}`); 
    if (userId) {
      console.log(`[useEffect] Fetching data for userId: ${userId}`);
      fetch(`/api/users/${userId}`)
        .then(res => res.json())
        .then(data => {
          console.log(`[useEffect] Data received:`, data);
          setUserData(data);
        })
        .catch(error => {
          console.error(`[useEffect] Error fetching data:`, error);
        });
    }
  }, [userId]); // userId가 변경될 때마다 실행
 
  return (
    <div>
      {/* 사용자 데이터 표시 */}
    </div>
  );
}

userId가 1일 때 로그 결과는 이렇네. `userData`가 `null`로 계속 나오는데, 뭐가 문제인 것 같아?