IT/Error
IT 및 일상을 공유합니다.
[Nuxt3] devtools compilerOptions 에러 해결하기
Devtools란? Nuxt.js의 개발 도구를 활성화하는 옵션입니다. Nuxt.js는 개발 중에 개발자 도구를 사용하여 애플리케이션을 디버깅하고 모니터링하는 데 도움을 주는 내장된 개발 도구를 제공합니다. 해당 옵션을 true로 설정하면 개발 도구가 활성화되어 개발자 도구를 사용할 수 있습니다. 사용되는 예로는 주로 개발 중에 디버깅에 활용합니다. Vuex 또는 Pinia 상태 확인을 모니터링 가능 컴포넌트 구조 트리를 시각적으로 확인 가능 현재 활성화된 라우터 및 라우터 히스토리 확인 가능 개발 도구의 기능은 Nuxt.js 버전에 따라 다소 다를 수 있습니다. 또한, 개발 도구를 사용하기 위해서는 브라우저의 개발자 도구를 열어야 합니다. 주로 개발 환경에서만 사용하며, 프로덕션 환경에서는 비활성화하는..
[Error] Typescript Cannot find module 'xxx.svg?inline'
Typescript로 프로젝트를 진행하던 도중 svg, png 파일에 대해 에러가 발생하였습니다. 이것저것 검색해 보고 알아본 결과로 Nuxt와 React에서 이런 에러가 발생했을 때 해결 방안을 알아보겠습니다. Nuxt , Vue에서 해결 방안 루트 경로에 custom.d.ts를 생성합니다. declare module '*.svg?inline' { const content: any export default content } declare module '*.svg' { const content: any export default content } declare module "*.png" { const content: any export default content } tsconfig.json 에서 cu..
[Nuxt] PostCSS Warning 문구 해결하기
Nuxt 2.15.8 버전으로 설치하여 진행하던 와중 구동에는 문제가 없지만 Warning 문구로 인해 불편한 감이 있었습니다. postcss 8 버전으로 업데이트되면서 webpack이랑 관련해서 뭔가 문제가 있는 걸로 보입니다. 아무튼 Warning 문구에 대해서 해결하는 방법을 간단하게 알아봅니다. 에러문구 WARN You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js. 앱 구동은 되지만 이런 문구가 나와서 불편합니다. PostCss8 설치 ..
[Prettier] eslint: delete `␍`(prettier/prettier) 에러
회사에서 프로젝트 환경을 구성하는 도중 맥 OS 환경에서 또는 윈도우 환경에서 협업을 할 때 맥북에서 작업하던 코드는 분명 이상이 없었는데, 윈도우 환경에서 Pull 받아 작성하니 코드 끝마다 에러를 발생하는 문제가 생겼습니다. eslint를 적용했을때 이런 문제가 생겨서 발생한 원인과 에러를 정리해 봤습니다. 원인 eslintrc.js 에서 설정한 부분 중. endOfLine에서 설정한 LF에 문제였습니다. LF: Line Feed(\n) CR: Carriage Return(\r) 설명하자면 각각 새로운 줄 바꿈을 바꾸는 방식에 대한 설정값입니다. LF에 경우 현재 커서의 위치에서 한 줄을 커서의 위치 변화 없이 아래로 내리는 방식이고, CR은 현재 줄에서 커서의 위치를 맨 앞으로 옮기는 방식입니다....