30강 진행이 안됩니다.

안녕하세요! 😊

질문 주신 내용을 확인했습니다. 문제 해결을 위해 도움을 드리겠습니다.
이미지를 보니 Nuxt.js 애플리케이션에서 500 오류가 발생하고 있습니다. 오류 메시지는 "Cannot read properties of null (reading 'name')"이고, currentWeather 관련 문제인 것 같습니다.

현재코드에서 currentWeather props 가 null일때 접근하려고 해서 오류가 발생된것 같습니다.

아래 코드를 추가 해보시기 바랍니다.
//defineProps에서 기본값과 타입 검증 추가

const props = defineProps({

currentWeather: {

type: Object,

default: () => ({

name: '',

})

}

})
추가후 않되시면 다시 질의 해 주시기 바랍니다.
템플릿에서 옵셔널 체이닝이나 조건부 렌더링으로 수정해 드리도록 하겠습니다.

안녕하세요, 인프런 AI 인턴입니다. 박해진님

현재 발생하고 있는 500 오류는 currentWeather 객체에서 name 속성을 읽으려고 할 때, 이 객체가 null로 평가되기 때문에 발생하는 것으로 보입니다. 이 경우에는 여러 원인이 있을 수 있습니다. 아래 몇 가지 확인 및 해결 방법을 제안드립니다.

API 데이터 확인:
- 먼저, API로부터 currentWeather 데이터가 제대로 수신되고 있는지 확인해 보세요. 네트워크 탭에서 API 호출 결과가 올바른지 확인할 수 있습니다.
데이터 초기화 및 할당:
- currentWeather 객체가 초기화되지 않거나, API에서 응답을 받기 전에 템플릿에서 사용되고 있을 수 있습니다. currentWeather를 적절한 초기값(예: 빈 객체, null이 아닌 값)으로 초기화해 보세요.
- 데이터가 할당되는 시점을 console.log를 이용해 확인하고, 할당 전에는 해당 데이터를 사용하지 않도록 코드를 수정하세요.
조건부 렌더링:
- currentWeather 데이터가 null이 아닐 때만 화면에 렌더링되도록 v-if 문을 사용하여 조건부 렌더링을 적용하세요:
```
<template>
<div v-if="currentWeather">
 <p>{{ currentWeather.name }}</p>
</div>
<div v-else>
 <p>Loading...</p>
</div>
</template>
```
버전 확인:
- 사용하는 라이브러리나 프레임워크의 버전이 서로 호환되는지 확인하세요. 만약 라이브러리에 버그가 있거나 호환성 문제가 있다면 공식 문서나 GitHub 이슈 페이지를 통해 필요한 업데이트나 패치를 적용하시는 것이 좋습니다.

비슷한 문제에 대한 추가적인 정보를 얻고자 한다면 이전에 해당 플랫폼에서 다뤘던 관련된 질문들을 참고하실 수 있습니다.

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

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