<div class="type-placeholder" style="font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! <br />- 먼저 유사한 질문이 있었는지 검색해보세요. <br />- 서로 예의를 지키며 존중하는 문화를 만들어가요. <br />- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.</div>
<div class="type-placeholder" style="font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">&nbsp;</div>
<div class="type-placeholder" style="font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">html 페이지에 react library 를 추가 하기 위해 다음의 코드를 작성하게 되는데요.</div>
<div class="type-placeholder" style="font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">&nbsp;</div>
<div class="type-placeholder" style="font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">
<div style="color: #d4d4d4; background-color: #1e1e1e; font-family: Menlo, Monaco, 'Courier New', monospace; font-size: 12px; line-height: 18px; white-space: pre;">
<div><span style="color: #808080;">&lt;</span><span style="color: #569cd6;">script</span></div>
<div><span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"https://unpkg.com/react@17/umd/react.development.js"</span></div>
<div><span style="color: #9cdcfe;">crossorigin</span></div>
<div><span style="color: #808080;">&gt;&lt;/</span><span style="color: #569cd6;">script</span><span style="color: #808080;">&gt;</span></div>
<div><span style="color: #808080;">&lt;</span><span style="color: #569cd6;">script</span></div>
<div><span style="color: #9cdcfe;">src</span>=<span style="color: #ce9178;">"https://unpkg.com/react-dom@17/umd/react-dom.development.js"</span></div>
<div><span style="color: #9cdcfe;">crossorigin</span></div>
<div><span style="color: #808080;">&gt;&lt;/</span><span style="color: #569cd6;">script</span><span style="color: #808080;">&gt;</span></div>
</div>
</div>
<div class="type-placeholder" style="font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">&nbsp;</div>
<div class="type-placeholder" style="font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">js 호출 시 crossorigin 을 붙여 주는 이유는 무엇인가요??</div>
<div class="type-placeholder" style="font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">&nbsp;</div>
<div class="type-placeholder" style="font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">&nbsp;</div>
<div class="type-placeholder" style="font-size: 15px; letter-spacing: -0.3px; color: #abb0b5; white-space: pre-wrap;">&nbsp;</div>

<p>좋은 질문입니다~</p>
<p>원래 브라우저에서 자원(js, 이미지 등)을 요청할 땐 같은 도메인에서 받아오는게 일반적입니다.</p>
<p>하지만 우리는 https://unpkg.com이란 도메인에서 react.js 자바스크립트를 받아오기 때문에</p>
<p>crossorigin 속성을 넣어주면서 다른 도메인이라도 받아올 수 있도록 하는거예요~</p>
<p>&nbsp;</p>
<p>이 문서도 참고하면 좋겠네요 ㅎㅎ</p>
<p>https://ko.reactjs.org/docs/cross-origin-errors.html</p>

인프런 커뮤니티 질문&답변

script tag 의 crossorigin 문의 드립니다