서버로부터 데이터를 불러오는데 비동기적으로 데이터를 가져오기 때문에 데이터가 없는 상태에서 렌더링이 되어 발생한 에러이다. 옵셔널 체이닝(?.)을 이용하여 프로퍼티가 존재하지 않을 경우 에러를 발생시키지 않고 undefined를 반환할 수 있다. 아래는 옵셔널 체이닝을 적용한 코드이다. dashboardStateTotalTest.batch_total_nowDTO?.count 참고 자료 : https://velog.io/@party3205/React-Cannot-read-properties-of-undefined-reading-%EC%97%90%EB%9F%AC [React] Cannot read properties of undefined (reading) 에러 Cannot read properties of..

computed에 실시간으로 변경되는 데이터를 가공하는 코드를 작성하던 중 자주 만나게 되는 에러였다. 호출한 배열의 값이 없는 상태에서 특정 인덱스를 지정한 경우에 발생했다. 웹 애플리케이션이 작동하지 않는 것은 아니나 콘솔창이 계속 이런 에러를 뱉어 내지 여간 거슬리지 않을 수 없다. 조건문을 사용해 해결했는데 방법은 다음과 같다. if (gidManhole.length === 0) { return } gidManhole는 진행 중인 프로젝트에서 사용한 배열명이다. gidManhole 배열에 값이 없으면 아얘 다음 코드로 진행하지 못하도록 처리한 것이다.

겸상 서비스는 카카오 로그인 API를 이용한다. 로그인 후 프로필 정보를 보려고 하는데 [그림 1]과 같은 현상이 발생했다. 콘솔 창을 보니 [그림 2]와 같은 AxiosError 메시지와 제목의 에러가 떠 있었다. Axios를 이용해 서버에 GET 요청을 하는데 이때 로그인 사용자의 토큰 정보가 함께 전달된다. 이 토큰이 제대로 전달되지 않는 문제로 보였다. F5 키를 눌러 "새로 고침"을 하면 이 문제는 사라진다. 그래서 로그인 코드 안에 아래와 같이 새로 고침 하는 라우터 코드를 추가해 주었다. this.$router.go(); // 새로고침

겸상을 마친 이후에는 겸상을 한 밥장과 숟갈의 매너를 서로가 평가하게 된다. [그림 1]은 해당 기능을 구현하던 중 만나게 된 에러이다. 처음 이 에러를 만났을 때 답답했는데 그 이유는 콘솔에는 에러를 알려주고 있지만 화면은 정상적으로 렌더링 되고 있다는 점이다. 원인은 서버로부터 받아온 데이터의 비동기 처리로 인해 발생한 문제였다. 즉, 데이터가 undefined 상태일 때 렌더링이 이루어지기 때문이다. 구글링 해보니 이 문제에 대한 해결 방법 3가지를 확인할 수 있었다. 나의 경우 아래의 코드와 같이 commonQuestions, babjangQuestions 배열을 초기화하여 해결할 수 있었다. export default { ... data() { return { ... commonQuestions..

[그림 1]의 data 배열의 값을 사용하고자 했다. 그래서 .data 키로 접근하고자 시도하였으나 "undefined"라는 결과만 출력되었다. 여러 차례 시도해 봤으나 결과는 동일했다. 다시 코드를 찬찬히 살펴보고 있는데 헛웃음이 나왔다. async $get(url) { return await axios.get(url).catch((e) => { console.log(e) }).data } 위 코드와 같이 .data를 catch에다 붙였던 것이다. 그러니 백날 시도해도 "undefined"일 수밖에... async $get(url) { return ( await axios.get(url).catch((e) => { console.log(e) }) ).data }, 위와 같이 코드를 수정하자 [그림 2]..