프론트엔드 디버깅 테스트 가이드

1. launch.json 파일이란?

• 위치: 프로젝트 루트의 .vscode 폴더 안
• 역할: 디버깅을 위한 설정을 저장하는 파일
• 장점:
  • 파일이 없으면 디버깅 할 때마다 수동으로 브라우저/서버를 설정해줘야 함
  • launch.json을 사용하면 F5 한 번으로 바로 디버깅 시작 가능

2. launch.json 예시

{
  "version": "0.2.0", // 0.2.0 이 현재 표준
  "configurations": [
    {
      "name": "Debug", // Node.js 서버 디버깅용
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/next/dist/bin/next",
      "args": ["dev", "--turbopack"],
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal",
      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
      "env": {
        "NODE_ENV": "development"
      }
    },
    {
      "name": "Debug Browser", // 브라우저 디버깅용
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ],
  "compounds": [ // 서버 + 브라우저 동시 디버깅
    {
      "name": "Full Debug",
      "configurations": ["Debug", "Debug Browser"]
    }
  ]
}

설명:

• "version": "0.2.0" → 현재 표준 디버깅 버전
• "configurations" → 각각의 디버깅 환경 설정
• "compounds" → 여러 디버깅 환경을 동시에 실행

 

3. 디버깅 환경 별 사용법

3-1. Node.js 서버 디버깅: Debug

• 용도: 서버 코드 문제(데이터 처리, API 로직 등) 확인
• 장점:
  • variables 에서 현재 라인에서 접근 가능한 모든 변수 확인 가능
  • call stack, watch 등 디버깅 창을 통해 서버를 실행했을 때 흐름을 완전히 추적할 수 있다!
• 예시:
  • 로그인 기능 구현 중 서버에서 사용자 정보가 올바르게 처리되는지 확인

---

3-2. 브라우저 디버깅: Debug Browser

• 용도: 화면과 유저 상호작용 확인
• 특징:
  • 브라우저 코드가 VSCode와 연결되어 디버깅 가능
  • VSCode variables 에서 일부 변수 확인 가능하지만 Node.js만큼 상세하지 않을 수 있음
  • React 상태(state)나 Hook 값 등은 개발자 도구에서 확인하는 것이 더 정확함!
• 예시:
  • 버튼 클릭 시 화면이 제대로 바뀌는지, 이미지가 정상적으로 렌더링되는지 확인

---

3-3. 서버 + 브라우저 동시 확인: Full Debug

• 용도: 전체 흐름 점검 (서버 + 클라이언트)
• 예시:
  • 회원가입 버튼 클릭 → 서버 데이터 처리 → 성공 메시지 화면 표시까지 전체 과정 확인

 

4. 디버깅 팁

• variables와 call stack 등을 확인하며 코드 실행 상황 파악
• 콘솔을 활용하여 서버/브라우저 로그 출력 확인
• 브라우저 디버깅 시에는 개발자 도구와 React DevTools 확장 프로그램 사용을 권장