cannot read properties of undefined (reading '_normalized')

개요

이런 에러가 나서 디버깅 했던 과정을 기록

원인

nuxt-link에 to를 지정 안한게 원인이었다..

해결과정

해결과정을 말하기 전에 나의 상황은 이러했다.

페이지 컴포넌트에서 asyncData를 이용해 배열데이터를 가져와서 그 배열데이터중 첫번째 요소를 자식 컴포넌트에 넘긴다.

넘겨받은 데이터는 객체이며 배열데이터가 들어있는 데이터이다.

 

처음에는 비동기통신을 통하여 데이터를 전달하기 때문에 제대로 default value를 설정 안해줘서 reference error의 한 종류라고 생각해서 asyncData를 사용시 default 값들을 어떻게 셋팅해왔는지 되짚어 보았지만 굳이 nested 부분들까지? default값을 셋팅한적은 없었다. (vuex store에서의 값들은 state를 선언할 때 밑의 사진처럼 nested 부분까지 default값을 넣어주는데 그렇게 안하면 이중 중첩의 경우에는 reference error가 발생하며 반응성에도 문제가 생길 수 있다.) 

하지만 결국 default값을 셋팅 안해준게 문제가 아니라 자식 컴포넌트에게 넘겨준 데이터 안에 link라는 속성이

자식컴포넌트의 nuxt-link의 to props로 되는데 link라는 속성이 없었던게 원인이었다.

여담

프로젝트에 따라 다르겠지만, 어떤 프로젝트에선 api를 통해 취득하는 데이터들은 전부 store에서 관리하게 하는 프로젝트가 있고,

또 다른 프로젝트 에서는 필요한 부분만 store에서 관리하고 나머지는 로컬데이터로 관리하도록 하는 프로젝트도 있다.

나는 전자의 프로젝트를 많이 경험해와서 asyncData로 api로 받은 데이터들을 자식 컴포넌트에 뿌려주는 방법보다는 store의 action과getters로 뿌려주는 방법을 많이 이용해 왔기 때문에 이번에 원인을 찾을 때 default value가 문제라는 선입견이 되게 강했던거 같다.

 

물론 후자의 경우가 더욱 좋은 아키텍쳐라고 생각하지만, 언제나 어려운 부분인것 같다.