AI 프롬프트로 JavaScript 200% 활용하기

1. 역할: 나는 [JS를 배우는 학생 / 주니어 개발자]이야
2. 맥락: [어떤 프로젝트 / 어떤 코드 / 어떤 에러]
3. 지시: [구체적으로 무엇을 해달라는지]
4. 형식: [코드+주석 / 비교표 / before-after]

JS의 var/let/const 차이를 표로 정리해줘.
각 행: 스코프 / 재선언 / 재할당 / 호이스팅 / 추천 사용처.
그리고 typeof 결과가 헷갈리는 케이스(null/[]/NaN) 5개를
예시 코드와 함께 보여줘.

함수 선언식 / 함수 표현식 / 화살표 함수의
차이를 호이스팅·this·arguments 관점으로 비교해줘.
클로저 예시 1개도 포함 — 디바운스 함수를 화살표로.

map·filter·reduce 차이를 한 데이터셋(주문 배열)에서
같은 결과를 다른 방식으로 만드는 코드로 보여줘.
그리고 체이닝 예시(filter→map→reduce)와
for 루프 대비 가독성/성능을 표로 비교해줘.

querySelector vs getElementById 차이부터 시작해서
classList(add/remove/toggle), addEventListener,
동적 요소 생성(createElement + appendChild)까지
5단계 예시로 정리해줘. 각 단계 주석 포함.

같은 작업(3초 후 데이터 반환)을
1) callback / 2) Promise / 3) async/await 3가지로 작성해줘.
각 방식의 장단점과 콜백 지옥이 어떻게 해결되는지 보여줘.
에러 처리도 각각 포함.

fetch로 GitHub API(/users/octocat)를 호출하는 함수를 만들어줘.
포함: AbortController로 취소 / try/catch 에러 / 로딩 상태 /
응답 status 검증(404/500) / JSON 파싱 실패 대응.

1000개 li가 있는 ul에서 각 li 클릭을 처리할 때
각각 addEventListener를 거는 방식 vs 부모 ul에 한 번 거는 방식을
메모리·성능·동적 추가 대응 측면에서 비교해줘.
실전 코드 + closest()로 정확한 li 식별까지.

ES Modules(import/export) vs CommonJS(require)를
역사적 배경 + 동작 차이 + Node.js/브라우저 환경별 동작으로 비교해줘.
번들러(Vite/webpack)가 무엇을 하는지도 한 단락으로.

Observer / Factory / Module / Singleton 4가지를
JS로 작성한 미니 코드로 보여주고, 각 패턴이
실제로 어떤 라이브러리(예: RxJS, jQuery 플러그인 시스템)에
쓰였는지 매핑해줘.

JS 성능 병목 5가지(레이아웃 스래싱 / 이벤트 폭주 / 큰 배열 /
메모리 누수 / DOM 빌드)를 진단·해결하는 패턴을 정리해줘.
각각: debounce / throttle / virtual list / WeakMap /
documentFragment 코드 예시 포함.

Vitest로 함수형 유틸 5개(슬러그 생성, 통화 포맷, debounce,
배열 chunk, 이메일 검증)에 대한 단위 테스트를 작성해줘.
TDD 흐름(Red → Green → Refactor)으로 진행 + AAA 패턴.

// ❌ 나쁜 프롬프트 결과: 'fetch로 데이터 가져와줘'
async function badFetch() {
  const r = await fetch('/api/users');
  return r.json();
}
// 문제: 에러 처리 없음, 로딩 상태 없음, 취소 불가, 응답 검증 없음


// ✅ 좋은 프롬프트 결과: 모든 엣지 케이스 + 취소 + 검증
async function goodFetch(id, { signal } = {}) {
  try {
    const res = await fetch(`/api/users/${id}`, { signal });
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const ct = res.headers.get('content-type') || '';
    if (!ct.includes('application/json')) throw new Error('Not JSON');
    return { ok: true, data: await res.json() };
  } catch (err) {
    if (err.name === 'AbortError') return { ok: false, aborted: true };
    return { ok: false, error: err.message };
  }
}

// 사용 예 — UI 로직과 결합
const ctrl = new AbortController();
goodFetch(123, { signal: ctrl.signal }).then((result) => {
  if (!result.ok && !result.aborted) {
    console.error('Failed:', result.error);
  }
});

/*
  📊 나쁜 프롬프트 vs 좋은 프롬프트 결과:
  | 항목         | ❌ 나쁜 | ✅ 좋은 |
  | 에러 처리     | 없음   | try/catch + status 검증 |
  | 로딩 상태     | 모름   | { ok, data, error } 반환 |
  | 요청 취소     | 불가   | AbortController signal |
  | 타입 검증     | 없음   | content-type 확인 |
  | 사용 가독성   | 모호함 | 호출자가 분기 처리 가능 |
  → 프롬프트의 구체성이 코드 품질을 결정합니다!
*/