Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools

ReactJS 개인 개발진행 중에 다음과 같은 알림창이 개발자 콘솔창에 발생했고 특이하게 알림창이라고 느껴진 정도였지만 코드작성했던 내용 자체가 웹페이지 상에서 보여지지 않았다.

그리고 개발자 Elements 요소에도 어떠한 html요소들 조차 확인할 수 없었다.

Download the React DevTools for a better development experience: https://reactjs.org/link/react-devtools

React Developer Tools – React

이에 대한 명확한 에러의 발생 원인을 확인하기 위해

개발자 Network로 이동하여 확인해본 결과

ReactJS에서 JSX를 사용하기 위해 babel을 사용했던 script 자체에서 road를 실패했다는 정보를 얻게 되었다.

Babel은 코드를 변환해 주는 역할을 하는데 JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔주는 역할을 담당하고 있다.

자세히 확인해 보면 Status Code 가 520 발생하고 이는 (Unknown Error) 이며 

Refferer Policy정책에서 strict-origin-when-cross-origin이라는 에러때문에 발생하는 문제라 생각하고 검색을 진행해보았다.

그에 대한 참고자료를 아래에 붙여두었다.

https://americanopeople.tistory.com/358

Chrome의 기본 레퍼러 정책 변화 - strict-origin-when-cross-origin (2020.07 / Chrome v.85)

 

위에서 내가 참고했던 중점 내용은

" 크롬은 85 버전 (2020.07 출시)부터 strict-origin-when-cross-origin 정책의 기본값을 enable으로 설정하기 시작했다. 이 영향으로 referer의 origin이 다른 경우, url path, parameter를 수집할 수 없는 경우가 발생하게 된다."

이 내용이었고 이에 대한 정책에 따른 babel의 script에 대한 대응책이 필요하다 생각했다.

 기존에 내가 사용했던 script는 

https://babeljs.io/docs/babel-standalone

@babel/standalone · Babel

바벨에서 제공하는

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

위와 같은 script 였으나 내가 추가적으로 구글링을 통해 얻었었던 script로 대체하여 사용하였다.

참고자료:

https://stackoverflow.com/questions/65228581/refused-to-execute-jsx-babel

Refused to execute JSX Babel?

여기서 내가 해결책으로 주목했던 점은 

<script crossorigin src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

위 script에서 사용하는 crossorigin에 대한 유효한 속석 CORS에 대한 지원을 제공하고 있는 것을 확인할 수 있었다.

이에 바벨에서 사용하는 아래의 script에

<script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

 

    

crossorigin="anonymous" 이라는 속성을 추가해 해결할 수 있었다.

 

mdn 참고자료:

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin

HTML attribute: crossorigin - HTML: HyperText Markup Language | MDN