안녕하세요, 강사님. 어제와 같은 일이 있어서 문의드립니다.
결론부터 말씀드리면, 일단 문제 해결은 했습니다.
강의 진행 정도는 인스타그램 클론 코딩 시작쪽이구요.
App. vue → Container.vue → Post.vue 로 포스트 데이터를 옮기는 과정에서 발생했습니다.
마지막 Post 에서 props 받아온 데이터를 오브젝트를 통째로 받아오는 식으로는 잘됐었습니다.
코드로는 아래와 같습니다.
<div class="profile">{{PostContents}}</div>
그런데 희한하게 <div class="profile">{{PostContents.name}}</div> 이라고 쓰니 브라우저에서 name 을 찾을 수 없다고 에러가 뜨더군요...
혹시나 제가 props 자료형을 Array 로 했나 싶어서 봤는데 Object 로 잘되어있었습니다.
chatGPT 에 제 코드 전체를 올려주고, 문제 현상을 설명해주니 아래와 같이 답변을 주더군요.
<div class="post" v-if="PostContents"> 이 코드를 넣으라구요.
대충 설명을 들어보니 window.onload 랑 같은 느낌인거 같긴한데요..
설득력 있어보이나 혹시나 해서 강사님께 질문드려봅니다.
1. 데이터가 올라오는 시점이 브라우저가 렌더링하는 시점보다 느려서, 렌더링 할때 ' 얼레? 데이터가 없는뎁쇼, 에러 펑 ' 하기 때문에
<div class="post" v-if="PostContents"> 이 코드를 써서 데이터가 다 올라왔을때만 렌더링하셈
으로 만들어주라고 하는데, 요게 실제로 맞는 개념인가요?
2. 만약 맞다면 이걸 매번 vue 파일에다가 작성하는게 번거로울 것 같은데, 파일 전체에 window.onload 처럼 사용할 수 있는 문법은 읍을까요?