📒 ERROR NOTE

• 개발 중 마주했던 🚨에러🚨들을 어떻게 해결했는지 간단히 기록하는 공간입니다.

• 해결 과정이 비교적 길었던 애러는 블로그 포스트로 따로 작성하여 링크를 올렸습니다.

React (+ JS/TS)

2022년 11~12월

• DOM에 직접 접근하여 classList 메소드를 통해 클래스를 추가하고 제거했더니 정상적으로 동작하지 않는다.

• React에서 특정 요소에 이벤트를 연결하고, event 객체를 매개변수로 받아 활용하는 코드를 작성했는데, event is deprecated 에러가 발생했다.

• setState를 통해 상태값을 변경하니 원하는 값이 하나씩 밀린 채 변경되는 바람에, 상태값을 활용한 로직이 내 의도대로 동작하지 않는다.

• (Router를 활용한) React 프로젝트를 초기 세팅 완료하고 실행(npm start)해보았는데, 화면에 아무것도 나타나지 않는다.

• 아래와 같이 코드를 작성했는데 화면에 아무것도 출력되지 않는다. (상위 컴포넌트는 생략)

• 슬라이더를 리엑트로 구현하였는데, 처음에 시간 간격에 따라 페이지가 이동할 때 화면에 사진이 사라져버렸다.

• useEffect를 통해 백엔드에서 데이터를 받아 화면에 출력하려 했으나 (useEffect의 렌더링 특성으로 인해) 오류가 발생했다.

• (위와 동일한 문제) 백엔드에서 데이터를 받아 화면에 출력하려 했으나 아무것도 표시되지 않는다. 해당 데이터는 undefined로 출력된다.

• 컴포넌트 함수 안에 아래처럼 useState의 Modifier 함수 (set으로 시작하는 함수)를 주었다니 무한 렌더링이 발생

• React 프로젝트의 특정 컴포넌트에서 <h3> 태그가 인식이 되지 않는다.

• 백에서 받아온 데이터를 구조 분해 할당할 때 값이 읽혀지지 않는 문제 - Uncaught TypeError: Cannot read properties of undefined (reading '0')

• 토스 페이먼츠 api를 활용한 결제 기능 구현 중 axios를 읽지 못하는 문제가 발생했다.

• React-Router를 사용하여 CRA 배포한 페이지에서 새로고침 시 cannot GET /URL 에러가 발생하고 화면엔 아무것도 표시되지 않는다.

• React-Router를 사용하여 github page에 CRA 배포 시, 홈페이지(도메인) 경로를 참조하지 못하는 문제가 발생한다.

• CRA + JS에서 CRA + TS로 변환하는 중, Cannot use JSX unless the '--jsx' flag is provided.ts(17004) 에러가 발생했다.

• CRA + JS에서 CRA + TS로 변환하는 중, TypeScript로 React를 불러올 때 import 구문에서 에러가 났다.

• CRA + JS에서 CRA + TS로 변환하는 중, index.tsx 파일의 App 파일을 import 하는 코드에서 알 수 없는 오류가 발생했다.

2023년

• PWA 개발 환경 세팅 후, 파일 구조를 어느 정도 짠 후 브라우저에서 잘 동작하는 지 실행해보니 'ERR_OSSL_EVP_UNSUPPORTED' 오류가 발생했다. (해결 ❌)

• reportWebVital 관련 문제

Git

• (깃으로 관리되는) 로컬 저장소에서 파일명을 수정한 후 커밋, 푸쉬 시 원격 저장소에 이 수정 사항이 반영되지 않는다.

2023년

• 커밋 시 로컬 저장소 상태와 원격 저장소 상태가 달라 충돌이 발생했다. (Git merge is not possible because I have unmerged files)

• 로컬 폴더와 (비어있는) 원격 저장소를 처음으로 연결하고 푸쉬했는데, 튕겼다.

• Fork를 하지 않고 원격 저장소로 push 했더니 403 에러가 발생했다.

• error: pathspec did not match any file(s) known to git 에러 (특정 디렉토리 뿐만 아니라 모든 디렉토리에서 해당 에러 발생)

2024년

• git push permission denied 403 에러 - 로컬 깃에서 권한이 다른 계정으로 설정되었음

💡 공통적인 에러 해결 방법

• 에러의 원인을 도저히 알 수 없을 때 아래의 시도를 통해 해결했던 적이 꽤 있었다. 한 번 참고해보자.

  • VS Code를 재실행한다.

  • 클라이언트를 재부팅한다.

  • 관련 패키지의 버전이 잘 맞는지 확인한다. (패키지를 다운그레이딩 해야할 수도 있다)