React iframe 강제 주입

개인 포트폴리오 페이지를 작업하면서 문제가 발생했다.
React로 작업을 진행하고 있었는데..
코드를 저장하면 페이지를 새로고침하기 전까지는 클릭이 아무것도 되지 않는 이상한 현상이 발생하기 시작한다..

문제의 화면

결론부터 말하자면

"react-scriptscreate-react-app에서 사용되는 알려진 버그" 다.

해결방법

• package.json에 다음의 코드를 추가한다.

"resolutions": {
  "react-error-overlay": "6.0.9"
}

• package.json의 코드는 다음과 같아야 한다.

{
  "name": "whatever",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    ...
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "resolutions": {
    "react-error-overlay": "6.0.9"
  },
  ...
}

그리고 node_modules 및 package-lock.json 또는 yarn.lock을 삭제하고 패키지를 다시 설치한다!

참고사이트

https://stackoverflow.com/questions/69051008/react-injecting-iframe-with-max-z-index-on-reload-after-changes-development