STEP 03 • PROMPT PRACTICE
3단계: 첫 번째 프롬프트 작성 실습
연동이 완료된 Gemini에게 실제로 코딩 질문을 하고 코드를 생성해 보는 실습 시간입니다.
축하합니다! 이제 VS Code 안에서 여러분만의 전담 AI 코딩 튜터가 24시간 대기하고 있습니다. 아래 실습 예시를 따라 첫 질문을 던져보세요.
실제 VS Code에서 질문을 던지는 3단계 순서
1
1. 코드 파일 열기 및 질문하고 싶은 코드 블록 선택
질문하고 싶은 자바스크립트나 파이썬 파일에서 함수 영역을 마우스로 드래그하여 블록 지정합니다.
2
2. Gemini 채팅창(✦) 열기 또는 인라인 단축키 실행
좌측 Gemini 패널을 열거나, Mac은 Cmd+I / Windows는 Ctrl+I를 눌러 인라인 프롬프트 창을 엽니다.
3
3. 명확한 지시어(프롬프트) 입력 후 Enter
"이 함수의 동작 원리를 초보자 수준으로 설명해줘"처럼 구체적으로 질문을 입력합니다.
초보자 추천 프롬프트 인터랙티브 실습기
버튼을 눌러 추천 템플릿을 선택하고, Gemini가 어떻게 답변하는지 시뮬레이션으로 확인해 보세요.
실습 대상 코드 (Sample Code)
async function fetchUserData(userId) {
try {
const res = await fetch(`/api/users/${userId}`);
if (!res.ok) throw new Error("User not found");
return await res.json();
} catch (err) {
console.error("Fetch failed:", err);
return null;
}
}Gemini에게 보낼 프롬프트 (Prompt)
"이 자바스크립트 비동기 함수의 동작 원리를 초보자가 이해하기 쉽게 단계별로 설명해 줘. 특히 async/await와 에러 처리 부분에 대해 자세히 알려줘."
Gemini AI의 실시간 답변 결과:gemini-2.5-flash
이 함수는 특정 사용자 ID를 전달받아 서버에서 정보를 가져오는 비동기 함수입니다:
1. `async` 키워드: 함수 내부에서 `await`를 사용하여 네트워크 요청이 끝날 때까지 순차적으로 기다릴 수 있게 만듭니다.
2. `try...catch` 블록: 오류 발생 시 앱이 중단되지 않고 안전하게 예외를 포착(catch)합니다.
3. `fetch` & `res.ok`: 서버 응답 상태 코드가 200번대가 아니면 즉시 에러를 발생시킵니다.
4. 초보자 팁: `return null`로 처리했으므로, 이 함수를 호출하는 쪽에서는 결과가 null인지 확인하는 코드를 반드시 작성해야 안전합니다!
Prompt Tips
AI에게 좋은 답변을 받는 3가지 프롬프트 비법
1. 배경 맥락(Context)을 함께 알려주세요
"이 함수 고쳐줘" 대신 "React 19에서 상태가 업데이트될 때 무한 루프가 발생하는 것 같아. 이유를 찾아줘"처럼 상황을 구체화하세요.
2. 원하는 출력 형식(Format)을 지정하세요
"수정된 전체 코드와 함께 왜 고쳐야 하는지 3가지 이유를 한 줄씩 요약해줘"와 같이 형식의 틀을 정해주세요.
3. 코딩 실습 보안 주의사항
실제 회사의 기밀 데이터나 개인정보(주민번호, 패스워드 등)가 포함된 코드는 AI 질의창에 붙여넣지 마세요.
🎉 모든 튜토리얼을 완주하셨습니다!
이제 여러분은 VS Code에서 Gemini AI의 보조를 받으며 수월하게 코딩을 학습할 준비를 마쳤습니다. 계속해서 더 깊이 있는 코딩 훈련을 원하시면 캔들시스터 스터디를 방문해보세요.