서론
HTML 페이지에 react 어떻게 불러올까
react 프로젝트를 외부 웹 사이트와 통합 시켜야하는 프로젝트 진행 중에 있다.
react가 아닌 다른 프레임 워크로 작성된 웹사이트의 상위 HTML에 접목 시켜야하는데 어떻게 할까
리액트 공식 문서에는 이렇게 적혀있다.
웹 사이트에 React 추가하기선생님... 이게 아닌것 같기도 한데요???
공식 문서 선생님이 알려준대로 한번 해봤지만 react모듈을 HTML태그에 넣어도 잘 나오지 않았다.
하는게 힘들것 같다는 생각이 들었다.
음... 어떻게 해야할까
차라리 외부 URL링크를 넣어볼까?
💻iframe으로 해보자
iframe이란 Inline Frame의 약자로, 웹 브라우저 내에 HTML페이지를 삽입 할 수 있는 기능을 제공한다.
<iframe src="삽입할 페이지 URL" width="너비" height="높이" ></iframe>iframe에서 width와 height를 설정할 수 있지만 공식 문서에서는 style시트를 이용하기를 권장하고 있다.
[실험] iframe 간단하게 사용해보기
유튜브의 동영상 퍼가기도 iframe으로 가져오도록 하고 있다.
그대로 복사해서 html<body>안에 붙여넣기 하면위와 같이 바로 동영상이 임베딩되어 나온다.<body> <iframe width="560" height="315" src="https://www.youtube.com/embed/raTLMxyop6w?si=Lj3U51n5fXZNuVuW" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> </body>
iframe 사용해도 될까
iframe을 HTML5에서는 권장하고 있지 않다고 한다. 왜 그런지 알아보자
장점
- 간단한 코드
HTML에 iframe을 사용하여 url만 넣어주기만 한다면 바로 불러올 수 있다.
단점
- XSS(cross site scripting)에 취약하다.
악의적인 사용자가 다른 도메인에서 스크립트를 통해 플러그인을 실행하거나 입력을 가로채는 등의 행위를 할 수 있다. - 사용성이 떨어진다.
브라우저의 뒤로가기 버튼이 간헐적으로 작동되지 않을 수 있다. - 웹 크롤링에 문제를 끼칠 수 있다.
- 검색엔진 (SEO)에 문제를 일으킬 수 있다.
이렇게 iframe에 대해 알아보았다.
사용하기에 따라 유용할 수도 있는 iframe은 조심해서 쓰도록 하는게 중요하겠다.
참고한 문서
mdn docs:<object> 로부터 <iframe>까지 — 기타 임베딩 기술
코딩팩토리:[Html] iframe 태그 사용법 & 예제 총정리
bummy💖 열정💖