106. React 공부 트러블슈팅 TIL 23.01.03

 

---

 

오류 해결
Uncaught TypeError: this.setstate is not a function

리액트로 todolist 만들던 중 버튼 만드는 함수에서 아래와 같은 오류가 발생했다.

Uncaught TypeError: this.setstate is not a function

 

오류가 발생한 코드는 아래와 같다.

handleIncrement = () => {
        this.setstate({ count: this.state.count + 1});
    }

 

구글링을 검색도 해봤는데 코드는 이상이 없었다. 문제 되는 부분은 카멜표기법을 사용하지 않은 것이다.

리액트를 배우면서 알게 된 것은 리액트에선 카멜표기법을 사용한다는 것이다. 내가 익숙하지 않아서

setState라고 적어야 할 것을 setstate라고 적어서 오류가 난 것이다. 

다음부턴 조심해야겠다.

 

 

오류 해결
Module not found: Error: Can't resolve './reportWebVitals'

리액트를 실행하던 중 아래와 같은 오류가 발생했다.

구글링 해봤는데도 해결이 안 되길래 index.js에서 reportWebVitals가 해당하는 부분들을 주석처리했더니 정상적으로 실행되길래 잘 사용 중~

아래코드는 reportWebVitals가 해당하는 부분들을 주석처리한 코드

 

 

reportWebVitals가 뭔지 궁금해서 구글링 해봤다.

reportWebVitals는 React의 성능을 측정하기 위한 것

위에 사진에 주석처리된 예처럼 console.log를 찍어보면 콘솔창에 

퍼포먼스시간들을 분석하여 객체 형태로 보여준다.

  

name: 'CLS' | 'FCP' | 'FID' | 'INP' | 'LCP' | 'TTFB';

> 측정된 현재값 (값이 작을수록 빠른 성능을 뜻함)

 

value: number;

> 현재 측정값(current value)과 최신 측정값(last-reported value)차이

> 첫 번째 리포트에서 위 둘값은 항상 같다.

 

delta: number;

> 특정 측정도구를 나타내는 유니크한 ID 값으로 중복되는 값들을 관리할 때 사용

 

id: string;

> 계산된 측정값들의 내용들이 배열로 나열됨

 

entries: (PerformanceEntry | FirstInputPolyfillEntry | NavigationTimingPolyfillEntry)[];

 

참고:https://github.com/GoogleChrome/web-vitals/#types

GitHub - GoogleChrome/web-vitals: Essential metrics for a healthy site.