[
  {
    "courseSlug": "tool-devtools",
    "question": "화면에서 지금 보고 있는 특정 버튼의 코드가 궁금할 때, 그 요소로 바로 이동하는 가장 빠른 방법은 무엇인가요?",
    "option1": "F12를 눌러 Elements 탭에서 트리를 하나씩 펼쳐 찾는다",
    "option2": "Ctrl + Shift + M을 눌러 기기 프리셋을 고른다",
    "option3": "그 요소를 우클릭한 뒤 \"검사\"를 클릭한다",
    "option4": "Console 탭에 document.title을 입력한다",
    "answerIndex": 2,
    "explanation": "코스의 '여는 법 3가지' 중 우클릭 → \"검사\"는 클릭한 그 요소로 바로 점프하는 지름길로 소개됩니다. F12는 도구를 열 뿐 특정 요소로 직행하지는 않아요."
  },
  {
    "courseSlug": "tool-devtools",
    "question": "Elements 탭에서 뉴스 사이트 헤드라인을 \"우리 반 급식 최고\"로 바꾼 뒤 새로고침(F5)을 하면 어떻게 되나요?",
    "option1": "서버 파일도 함께 바뀌어 다른 사람에게도 바뀐 화면이 보인다",
    "option2": "수정 내용이 전부 사라지고 원래 화면으로 돌아온다",
    "option3": "브라우저에 저장되어 내 컴퓨터에서는 계속 바뀐 채로 보인다",
    "option4": "개발자도구를 닫기 전까지는 수정한 내용이 그대로 유지된다",
    "answerIndex": 1,
    "explanation": "Elements에서의 수정은 '내 브라우저의 복사본'에만 적용되고 서버의 진짜 파일은 전혀 바뀌지 않아요. 그래서 새로고침 한 번이면 전부 원상복구됩니다."
  },
  {
    "courseSlug": "tool-devtools",
    "question": "Network 탭에서 어떤 API 요청의 Status가 401로 표시되었습니다. 코스의 '빠른 판독법'에 따르면 이 상황의 의미는 무엇인가요?",
    "option1": "서버 내부에서 오류가 발생했다는 뜻이다",
    "option2": "요청이 성공적으로 처리되었다는 뜻이다",
    "option3": "요청한 주소가 존재하지 않는다는 뜻이다",
    "option4": "로그인이 안 된 상태로 요청을 보냈다는 뜻이다",
    "answerIndex": 3,
    "explanation": "코스에서 401은 \"로그인 안 됨\"을 뜻하는 단골 상태 코드로 소개됩니다. 4xx는 내(요청) 잘못, 5xx는 서버 잘못, 404는 \"그런 주소 없음\"이에요."
  },
  {
    "courseSlug": "tool-devtools",
    "question": "Lighthouse 검사 결과에서 점수 아래에 나오는 'Opportunities' 항목이 알려 주는 것은 무엇인가요?",
    "option1": "어떤 부분을 어떻게 고치면 좋아지는지에 대한 개선 제안",
    "option2": "페이지에서 발생한 자바스크립트 에러의 전체 목록",
    "option3": "서버와 주고받은 모든 요청과 응답의 기록",
    "option4": "다른 사이트와 비교한 우리 페이지의 점수 순위",
    "answerIndex": 0,
    "explanation": "Opportunities에는 \"이미지가 너무 커요, 이만큼 줄이면 몇 초 빨라져요\" 같은 구체적인 개선 방법이 적혀 있어요. 그래서 코스는 Lighthouse를 브라우저에 내장된 무료 컨설턴트에 비유합니다."
  },
  {
    "courseSlug": "tool-devtools",
    "question": "수습 개발자가 만든 게시글 목록 페이지에 목록이 안 나옵니다. Network 탭에서 해당 요청을 확인하니 Status는 200이고 Response에는 게시글 JSON이 제대로 들어 있었어요. 코스의 판별법에 따르면 어디를 먼저 의심해야 하나요?",
    "option1": "Spring Boot 서버 쪽 코드",
    "option2": "데이터베이스 연결 설정",
    "option3": "React 화면 쪽 코드",
    "option4": "네트워크 회선 상태",
    "answerIndex": 2,
    "explanation": "코스의 판별법대로 Response에 데이터가 멀쩡히 있는데 화면에 안 나오면 React(화면) 쪽 문제예요. Status가 4xx/5xx일 때가 요청이나 서버 쪽 문제입니다."
  }
]
