Youtube 동영상 추가하기
React 어플리케이션에서 youtube 동영상을 추가하려고 할 때, 나타난 에러 현상을 공유하고자 한다.
Error 01
Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (’<URL>’) does not match the recipient window’s origin (’<URL>’).
보여주고자 하는 동영상 id를 가진 youtube 주소를 입력한 iframe 태그로 동영상을 화면에 나타냈다.
하지만 크롬 F12 개발자 도구를 열어 console를 보게되면, 위와 같은 에러메시지가 나타났다.
화면에 나타나는 것에는 문제가 없으므로 넘어갈까 생각했지만, 계속 신경쓰였고, 구글링을 했습니다.
검색을 하자마자 나왔던 해결방법 !!
위의 문제는 iframe의 주소는 https가 아닌 http로 해석하기 때문에, 앞에 https로 시작한다는 것을 명시해줬어야 했고,
현재 어플리케이션을 돌리는 주소를 매핑 해줘야 오류가 안난다는 것입니다.
전 Visual Studio Code의 에디터로 Create-react-app 프로젝트를 만들어 yarn start를 하여 http://localhost:3000 의 주소를 가지고 있습니다.
<iframe key={video.key} src={`https://www.youtube.com/embed/${video.key}?showinfo=0&enablejsapi=1&origin=http://localhost:3000`} width='100%' height='100%' ></iframe>따라서 이와 같은 코드로 오류를 해결했습니다.
Error2
지금부터 다룰 내용은 에러는 아니지만, 위의 Error1이 나타날때 함께 계속 나타나던 Warning 메시지에 관한 것입니다.
<1>
[Violation] Forced reflow while executing JavaScript took
참고 내용 : Reflow는 DOM Tree 레이아웃을 다시 계산해서 화면에 렌더링 하는 경우를 말합니다. reflow vs repaint 키워드로 검색하여 이해해보는 것이 좋습니다. 이 경우는 js에서 reflow를 강제로 발생시키는 동작이 있는데 그 렌더링 시간이 너무 오래 걸린다는 경고인 것으로 보입니다. DOM 조작 로직이 너무 빈번하거나 무겁지 않은지 살펴보세요.
<2>
[Violation] Added non-passive event listener to a scroll-blocking
이미 scroll-blocking 하고 있는 touchstart event가 있다는 뜻입니다. addEventListener의 세번째 인자로 { passive: true }를 넘겨달라고 요청하고 있네요.
<3>
[Violation] ‘setTimeout’ handler took
이렇게 세 가지 경고메시지가 나타났고, 해결하려고 시도중입니다.
참고
