인프런 커뮤니티 질문&답변

id 값 타입에 대한 오류입니다.

강의에서 id 오류에 대한 부분은 추후에 해결하고 있어요 🙂

결론적으로 id 값이 숫자(Number) 라면

컴포넌트 등 에서 Number 로 받으시면 되고요

문자(String)라면 String 으로 받으시면 됩니다.

https://inf.run/VZgwE

위 소스 64line 을 보면 id 를 [String, Number] 모두 받을 수 있도록 수정된 걸 확인할 수 있어요

<script setup>
import { toRefs } from 'vue';
import { onBeforeRouteLeave, onBeforeRouteUpdate, useRouter } from 'vue-router';
import { useAlert } from '@/composables/alert';
import { useAxios } from '@/hooks/useAxios';
import { computed } from '@vue/reactivity';
import { useNumber } from '@/composables/number';

const props = defineProps({
	id: [String, Number], // <-- 이 부분
});

안녕하세요, 인프런 AI 인턴입니다. 이은혜님.

질문하신 내용을 기반으로, Vue.js 애플리케이션 내에서 발생한 두 가지 주요 이슈에 대해 설명드리겠습니다.

1. Invalid Prop 타입 경고

[Vue warn]: Invalid prop: type check failed for prop "id". Expected String with value "1", got Number with value 1.

이 경고 메시지는 PostDetailView 컴포넌트에 id라는 props가 전달될 때, 해당 props의 타입이 Vue에서 예상하는 타입과 일치하지 않을 때 발생합니다. Vue가 예상하는 타입은 String인데, 현재 Number 타입을 전달하고 있는 상황입니다.

해결 방법: props로 Number 대신 String 타입을 전달하거나, Vue 컴포넌트의 prop 타입 설정을 [String, Number]와 같이 두 타입을 모두 허용하도록 수정할 수 있습니다.

const props = defineProps({
    id: [String, Number]
});

또는, 전달할 때 String으로 변환하여 넘겨줍니다:

<PostDetailView :id="String(1)"></PostDetailView>

2. TypeError: relativeURL.replace is not a function

이 오류는 axios에서 요청을 보낼 때 발생하는 것으로, 잘못된 URL 형식이나 잘못된 함수 사용으로 인해 발생합니다. 주로 URL을 조합하는 부분에서 문제가 생길 수 있습니다. 이는 상대 URL(relativeURL)를 문자열 대신 호출하여 발생하는 경우가 있습니다.

해결 방법은 axios에 요청을 보낼 때 URL 형식을 점검하고, 실제로 올바르게 구성되었는지 확인해야 합니다.

export function getPostById(id) {
    return posts.get(`/${id}`); // URL을 올바르게 설정
}

• URL 형식 확인: axios 요청의 URL 형식에 문제가 없는지 확인하세요.
  
• 타겟 URL이 문자열로 정의되었는지 확인하고, String이 아닌 Object가 전해지지 않도록 주의합니다.
  

유사한 질문들

이와 유사한 문제들이 언급된 링크들이 있습니다. 이를 통해 문제 해결에 대한 추가적인 도움을 얻을 수 있을 것입니다.
- 무슨 에러인지…ㅡㅡ에서는 비슷한 Vue.js prop 관련 문제를 다루고 있습니다.
- PostListView 에서 PostDetailView (미리보기) 사용하는곳..는 props 타입 불일치와 관련된 사항을 다루고 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.