느린 개발자

Devtools란?

Nuxt.js의 개발 도구를 활성화하는 옵션입니다. Nuxt.js는 개발 중에 개발자 도구를 사용하여 애플리케이션을 디버깅하고 모니터링하는 데 도움을 주는 내장된 개발 도구를 제공합니다. 해당 옵션을 true로 설정하면 개발 도구가 활성화되어 개발자 도구를 사용할 수 있습니다. 사용되는 예로는 주로 개발 중에 디버깅에 활용합니다.

 

• Vuex 또는 Pinia 상태 확인을 모니터링 가능
• 컴포넌트 구조 트리를 시각적으로 확인 가능
• 현재 활성화된 라우터 및 라우터 히스토리 확인 가능

개발 도구의 기능은 Nuxt.js 버전에 따라 다소 다를 수 있습니다. 또한, 개발 도구를 사용하기 위해서는 브라우저의 개발자 도구를 열어야 합니다. 주로 개발 환경에서만 사용하며, 프로덕션 환경에서는 비활성화하는 것이 좋습니다. 이를 위해 devtools: { enabled: false }로 설정하여 프로덕션 빌드에서 개발 도구를 사용하지 않도록 할 수 있습니다. 기본값은 false이므로 따로 설정하지 않으면 개발 도구는 비활성화됩니다.

 

사용법은 nuxt.config.ts에 아래와 같이 적용하면 됩니다.

 

//nuxt.config.ts

export default defineNuxtConfig({
 devtools: { enabled: true },
 modules: ['@nuxt/devtools']
})

 

---

CompilerOptions Error

Nuxt3에서 프로젝트를 진행할때 nuxt.config.ts에 아래처럼 옵션을 설정하여 개발도구를 사용할 때 콘솔에 경고문이 나와서 해결방법을 찾아봤습니다.

//nuxt.config.ts

export default defineNuxtConfig({

 devtools: { enabled: false },

})

 

nuxt devtools

아래와 같은 경고문이 나오는데 뭐 대충 설명하자면 compilerOptions`를 `@vue/compiler-dom`으로 전달해야 한다고 나오네요

[Vue warn]: The `compilerOptions` config option is only respected when using a build of Vue.js that includes the runtime compiler (aka "full build"). Since you are using the runtime-only build, `compilerOptions` must be passed to `@vue/compiler-dom` in the build setup instead.

 

 

아래 공식 문서에서 참고해서 옵션을 적용해봤습니다.

Nuxt Configuration Reference · Nuxt

 

---

 

해결방안

아래 옵션을 적용하면, 위에 에러문이 사라지는 것을 확인할 수 있습니다. devtools 같은 경우 개발할 때만 사용하므로 배포할 때는 꼭 false로 바꿔주시길 바랍니다. 

// nuxt.config.ts
export default defineNuxtConfig({
  // 생략
  devtools: { enabled: false },
  vue: {
    runtimeCompiler: true  //추가
  },
})