VS Code를 이용한 Nuxt.js(Vue.js, TypeScript) 프로젝트 디버깅 가이드:

Nuxt.js 프로젝트를 개발하다 보면 예상치 못한 오류에 직면하게 됩니다. 이러한 오류를 효과적으로 찾아 해결하기 위해서는 디버깅 도구를 활용하는 것이 필수적입니다. Visual Studio Code(VS Code)는 강력한 디버깅 기능을 제공하며, 특히 TypeScript 프로젝트와의 연동이 뛰어납니다. 본 가이드에서는 VS Code를 활용하여 Nuxt.js 프로젝트를 디버깅하는 방법을 단계별로 상세히 설명하고, 예제 코드를 통해 이해를 돕겠습니다.

준비물

• Node.js 및 npm (또는 yarn) 설치: Nuxt.js 프로젝트를 실행하기 위한 필수 환경입니다.
• Visual Studio Code 설치: 코드 편집 및 디버깅을 위한 도구입니다.
• Nuxt.js 프로젝트: 디버깅할 프로젝트가 준비되어 있어야 합니다.

1단계: Google Chrome 디버거 확장 프로그램 설치

VS Code에서 Chrome 브라우저를 디버깅하기 위해서는 Chrome 개발자 도구 확장 프로그램이 필요합니다. VS Code 확장 프로그램 마켓플레이스에서 "Debugger for Chrome"을 검색하여 설치합니다.

2단계: nuxt.config.ts 파일 수정

Nuxt.config.ts 파일은 프로젝트 설정을 담당하는 파일입니다. 디버깅을 위해 다음과 같이 devTools 옵션을 추가합니다.

// nuxt.config.ts

export default defineNuxtConfig({
  // ... 기존 설정
  devtools: { enabled: true },
});

devTools 옵션을 true로 설정하면 개발자 도구가 활성화되어 브라우저에서 Vue 개발자 도구를 사용할 수 있습니다.

728x90

3단계: launch.json 파일 생성 또는 수정

VS Code에서 디버깅 설정을 관리하는 파일은 launch.json입니다. .vscode 폴더 내에 해당 파일이 없다면 새로 생성하고, 있다면 다음과 같이 내용을 수정합니다.

// launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true
    }
  ]
}

• type: 디버거 유형을 지정합니다. Chrome 디버거를 사용하므로 chrome으로 설정합니다.
• request: 디버깅 요청 유형을 지정합니다. launch는 브라우저를 새로 실행하여 디버깅을 시작합니다.
• name: 디버깅 구성 이름을 지정합니다.
• url: 디버깅할 웹 애플리케이션의 URL을 지정합니다.
• webRoot: 소스맵을 매핑할 프로젝트의 루트 디렉토리를 지정합니다.
• sourceMaps: 소스맵을 사용할지 여부를 지정합니다. true로 설정하면 TypeScript 코드를 디버깅할 수 있습니다.

4단계: Chrome 실행 (선택 사항)

만약 Chrome이 이미 실행 중이라면 별도의 작업이 필요하지 않습니다. 하지만 Chrome을 새로 실행하거나 특정 포트로 디버깅을 설정해야 하는 경우에는 다음과 같은 명령어를 사용하여 Chrome을 실행합니다.

google-chrome --remote-debugging-port=9222

위 명령어는 9222 포트로 원격 디버깅을 활성화합니다. launch.json 파일의 url 설정에 맞춰 포트 번호를 변경할 수 있습니다.

5단계: 디버깅 시작

VS Code의 디버깅 탭에서 생성한 launch.json 파일의 구성을 선택하고 디버깅 버튼을 클릭합니다. 브라우저가 실행되고 중단점을 설정하여 코드를 한 줄씩 실행하며 디버깅할 수 있습니다.

추가 팁

• 소스맵: TypeScript 코드를 디버깅하기 위해서는 소스맵이 생성되어야 합니다. Nuxt.js는 기본적으로 소스맵을 생성하지만, 필요에 따라 nuxt.config.ts 파일에서 소스맵 관련 설정을 추가할 수 있습니다.
• Vue 개발자 도구: 브라우저에서 Vue 개발자 도구를 사용하여 Vue 컴포넌트의 상태를 검사하고, 데이터 흐름을 추적할 수 있습니다.
• 디버깅 단축키: VS Code는 다양한 디버깅 단축키를 제공합니다. 자주 사용하는 단축키를 숙달하면 디버깅 효율을 높일 수 있습니다.

728x90

VS Code를 이용하면 Nuxt.js 프로젝트를 효과적으로 디버깅할 수 있습니다. 위에서 설명한 단계를 따라 설정하면 TypeScript 코드를 포함한 모든 코드를 디버깅하고, 오류를 빠르게 찾아 해결할 수 있습니다.

주의:

• 위 예제는 간단한 설정을 위한 것이며, 프로젝트의 복잡도에 따라 추가적인 설정이 필요할 수 있습니다.
• Nuxt.js 버전 및 VS Code 확장 프로그램 버전에 따라 설정 방법이 약간 다를 수 있습니다.

자세한 내용은 다음 문서를 참고하세요:

• Visual Studio에서 JavaScript 또는 TypeScript 앱 디버그: https://learn.microsoft.com/ko-kr/visualstudio/javascript/debug-nodejs?view=vs-2022

궁금한 점이 있다면 언제든지 질문해주세요.

핵심 기능:

• Nuxt.js 프로젝트 디버깅 환경 설정
• VS Code와 Chrome 디버거 연동
• TypeScript 소스맵 활용
• 디버깅 단계별 가이드
• 추가 팁 및 참고 자료