인프런 커뮤니티 질문&답변
작성한 질문수
코드에서 $i18n, $route 등 provide로 제공된 객체가 템플릿에서 붉은색으로 표시됩니다.
작성
·
107
0
안녕하세요. 좋은 강의 잘보고 있습니다.
강의를 진행하면서 한가지 문제가 있어서 문의드립니다.
아래 스크린 샷과 같이 nuxtApp.provide 또는 Auto-Import 된 모듈을 Template 영역에서 사용하면 아래와 같이 속성을 찾을 수 없다는 에러가 발생합니다.
index.d.ts 또는 타입을 추가하면 해결될 것으로 보이긴 하지만, 강의에서는 딱히 타입을 추가로 정의하지 않은 것으로 보이는데 어떤 설정을 추가해야 정상적으로 타입스크립트가 속성을 인식할 수 있는지 궁금합니다.
감사합니다.
답변 2
0
안녕하세요 🙂
강의때와 라이브러리 버전이 다를 경우 스펙이 동일하게 동작하지 않을 수 있습니다. (스펙 업그레이드 또는 버그(드문확률))
만약 동일한데 이슈가 발생한다면 강의코드와 한 번 비교해 보는 것을 권장드립니다.
0
안녕하세요, 인프런 AI 인턴입니다.
hj님, 문의하신 내용에 대해 답변드립니다.
스크린 샷에서 보인 것처럼 nuxtApp.provide 또는 Auto-Import 된 모듈을 Template 영역에서 사용 시 발생하는 속성을 찾을 수 없다는 에러는 Vue와 TypeScript를 함께 사용할 때 발생하는 일반적인 문제 중 하나입니다. 이 경우, Vue 컴포넌트 내에서 TypeScript의 타입 정의가 필요 없는 일반 JavaScript 객체와 함수를 다루는 경우와 달리, TypeScript의 타입 체크 기능 때문에 해당 객체나 모듈의 타입을 명시해줘야 할 때가 있습니다.
강의에서 딱히 타입을 추가로 정의하지 않았다면, 아마도 강의에서 사용하는 프로젝트 설정이나 라이브러리 버전 등이 달라 생기는 문제일 수 있습니다. 혹은 강의에서는 타입 정의에 대한 부분이 생략되었을 가능성도 있습니다.
타입스크립트가 해당 속성을 인식할 수 있도록 하기 위해, 먼저 nuxtApp이나 다른 Auto-Import된 모듈에 대한 타입 정의가 포함된 파일(index.d.ts 등)을 프로젝트 내 적절한 위치에 추가하거나 수정해야 합니다. 이 때, 해당 모듈이나 라이브러리의 공식 문서를 참조하여 필요한 타입을 정확히 정의하는 것이 중요합니다.
예를 들어, Vue와 Nuxt를 사용하는 프로젝트에서 nuxtApp의 타입을 정의하려면, 프로젝트의 타입 정의 파일(가령 types/vue.d.ts 등) 내에 아래와 같은 방식으로 타입을 확장할 수 있습니다.
import Vue from 'vue';
declare module 'vue/types/vue' {
interface Vue {
$myProperty: string;
}
}
여기에서 $myProperty는 예시이며 실제 사용하시는 속성 이름으로 교체하셔야 합니다.
더욱 구체적인 해결책을 제공받고 싶다면, 사용 중인 Nuxt 및 Vue 버전, 그리고 필요한 타입 정의에 대한 더 자세한 정보가 담긴 공식 문서나 커뮤니티를 참조하시길 바랍니다.
감사합니다.