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 확장 프로그램 사용을 권장
'개발' 카테고리의 다른 글
Figma에서 MCP와 커서 활용하기 (0) | 2025.09.18 |
---|---|
Next.js로 내 소개 웹사이트 만들기 (0) | 2025.06.03 |
프론트엔드 디자인 패턴 (0) | 2025.05.25 |
요즘 쓰는 최고의 개발 도구: Cursor (0) | 2025.05.22 |
SPA에서 SEO 적용을 위해 시도했던 것들 (0) | 2025.05.21 |