iframe에 Jupyter 노트북 배치 2023년 03월 27일 by issue Jupyter Notebook을 열고 iframe에 붙여넣기 내 서비스 페이지에 iframe으로 Jupyter Notebook을 첨부하려면: 당신은 태그 할 수 있습니다 아래와 같이 사용합니다.<br><br></p><div class='code-block code-block-4' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1311878797193990" crossorigin="anonymous"></script> <!-- 디스플레이3 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1311878797193990" data-ad-slot="1850295845" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <div> <pre class="shell" data-ke-language="shell"><code> ..생략.. </b-card> <iframe src="http://localhost:8888/" width="100%" height="500px"></iframe> </div> ..생략..</code></pre> </div> <p data-ke-size="size16"> <p data-ke-size="size16">하지만 아래와 같은 오류가 발생합니다.<br><br></p><div class="crp_related crp-rounded-thumbs"><b><span style="font-size:2em;color: green"> '추천 관련글, </span></b><ul><li><a href="https://last.eternals.kr/media-literacy-self-test-chatgpt-%ec%a0%9c%eb%8c%80%eb%a1%9c-%ec%82%ac%ec%9a%a9%ed%95%98%eb%8a%94-%eb%b0%a9%eb%b2%95/" class="crp_link post-1326"><figure><img width="150" height="150" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3C/svg%3E" class="crp_thumb crp_first" alt="(Media Literacy Self-Test) ChatGPT 제대로 사용하는 방법" title="(Media Literacy Self-Test) ChatGPT 제대로 사용하는 방법" data-lazy-src="http:http:http:http:http:http:http: this.srcset=" /><noscript><img width="150" height="150" src=" http:http:http:http:http:http:http: this.srcset=" class="crp_thumb crp_first" alt="(Media Literacy Self-Test) ChatGPT 제대로 사용하는 방법" title="(Media Literacy Self-Test) ChatGPT 제대로 사용하는 방법" /></noscript></figure><span class="crp_title">(Media Literacy Self-Test) ChatGPT 제대로 사용하는 방법</span></a></li><li><a href="https://last.eternals.kr/%ec%a7%81%ec%9e%a5%ec%9d%b8-%ec%b2%ab-%ec%82%ac%ec%9d%b4%eb%93%9c%ed%94%84%eb%a1%9c%ec%a0%9d%ed%8a%b8-%eb%82%98%ed%98%bc%ec%9e%90%eb%8f%84%ec%a0%84%ea%b8%b0/" class="crp_link post-1240"><figure><img width="150" height="150" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3C/svg%3E" class="crp_thumb crp_first" alt="직장인 첫 사이드프로젝트 나혼자도전기" title="직장인 첫 사이드프로젝트 나혼자도전기" data-lazy-src="http:http:http:http: this.srcset=" /><noscript><img width="150" height="150" src=" http:http:http:http: this.srcset=" class="crp_thumb crp_first" alt="직장인 첫 사이드프로젝트 나혼자도전기" title="직장인 첫 사이드프로젝트 나혼자도전기" /></noscript></figure><span class="crp_title">직장인 첫 사이드프로젝트 나혼자도전기</span></a></li><li><a href="https://last.eternals.kr/ai-math-1-%eb%b2%a1%ed%84%b0%ea%b0%80/" class="crp_link post-1276"><figure><img width="150" height="150" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3C/svg%3E" class="crp_thumb crp_first" alt="Ai math. 1. 벡터가" title="Ai math. 1. 벡터가" data-lazy-src="http:http:http:http:http:http:http:http: this.srcset=" /><noscript><img width="150" height="150" src=" http:http:http:http:http:http:http:http: this.srcset=" class="crp_thumb crp_first" alt="Ai math. 1. 벡터가" title="Ai math. 1. 벡터가" /></noscript></figure><span class="crp_title">Ai math. 1. 벡터가</span></a></li><li><a href="https://last.eternals.kr/%ec%9e%ac%eb%af%b8%ec%9e%88%eb%8a%94-gif-%eb%aa%a8%ec%9d%8c/" class="crp_link post-1494"><figure><img width="150" height="150" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20150%20150'%3E%3C/svg%3E" class="crp_thumb crp_first" alt="재미있는 GIF 모음" title="재미있는 GIF 모음" data-lazy-src="https://mblogthumb-phinf.pstatic.net/MjAyMzA0MTJfMTEy/MDAxNjgxMjY5ODcyMjE1.z7sXy8B8qRVPi2QfZvRAp2SfJ_FaeRCJQmLUP42kBlAg.Q-UnVSvD8aQ9O92FB2xsKOCIpfc8XHEWCtG9AhlY5jUg.GIF.cuhouse1/1681269791747%EF%BC%8D1.gif?type=w800" /><noscript><img width="150" height="150" src="https://mblogthumb-phinf.pstatic.net/MjAyMzA0MTJfMTEy/MDAxNjgxMjY5ODcyMjE1.z7sXy8B8qRVPi2QfZvRAp2SfJ_FaeRCJQmLUP42kBlAg.Q-UnVSvD8aQ9O92FB2xsKOCIpfc8XHEWCtG9AhlY5jUg.GIF.cuhouse1/1681269791747%EF%BC%8D1.gif?type=w800" class="crp_thumb crp_first" alt="재미있는 GIF 모음" title="재미있는 GIF 모음" /></noscript></figure><span class="crp_title">재미있는 GIF 모음</span></a></li></ul><div class="crp_clear"></div></div> <p><figure class="imageblock alignCenter" data-ke-mobilestyle="widthOrigin" data-origin-width="337" data-origin-height="254"><span data-url="https://blog.kakaocdn.net/dn/cuOloB/btr6bu3bllL/u4F69xzOYLT0AA3tWNpdlk/img.png" data-lightbox="lightbox"><br /> <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" onerror="this.onerror=null; this.src=" http:http:http:http: this.srcset="http:http:http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png" data-lazy-srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcuOloB%2Fbtr6bu3bllL%2Fu4F69xzOYLT0AA3tWNpdlk%2Fimg.png" data-origin-width="337" data-origin-height="254" data-lazy-src="https://blog.kakaocdn.net/dn/cuOloB/btr6bu3bllL/u4F69xzOYLT0AA3tWNpdlk/img.png"><noscript><img decoding="async" src="https://blog.kakaocdn.net/dn/cuOloB/btr6bu3bllL/u4F69xzOYLT0AA3tWNpdlk/img.png" onerror="this.onerror=null; this.src=" http:http:http:http: this.srcset="http:http:http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcuOloB%2Fbtr6bu3bllL%2Fu4F69xzOYLT0AA3tWNpdlk%2Fimg.png" data-origin-width="337" data-origin-height="254"></noscript></span></p> </figure><div class='code-block code-block-3' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1311878797193990" crossorigin="anonymous"></script> <!-- 디스플레이2 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1311878797193990" data-ad-slot="5179043054" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <figure class="imageblock alignCenter" data-ke-mobilestyle="widthOrigin" data-origin-width="389" data-origin-height="59"><span data-url="https://blog.kakaocdn.net/dn/bAq4FZ/btr6oJETl3b/FkJUAbLKzTikTyVyk0LGF1/img.png" data-lightbox="lightbox"><br /> <img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" onerror="this.onerror=null; this.src=" http:http:http:http: this.srcset="http:http:http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png" data-lazy-srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbAq4FZ%2Fbtr6oJETl3b%2FFkJUAbLKzTikTyVyk0LGF1%2Fimg.png" data-origin-width="389" data-origin-height="59" data-lazy-src="https://blog.kakaocdn.net/dn/bAq4FZ/btr6oJETl3b/FkJUAbLKzTikTyVyk0LGF1/img.png"><noscript><img decoding="async" src="https://blog.kakaocdn.net/dn/bAq4FZ/btr6oJETl3b/FkJUAbLKzTikTyVyk0LGF1/img.png" onerror="this.onerror=null; this.src=" http:http:http:http: this.srcset="http:http:http://t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png" srcset="https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbAq4FZ%2Fbtr6oJETl3b%2FFkJUAbLKzTikTyVyk0LGF1%2Fimg.png" data-origin-width="389" data-origin-height="59"></noscript></span></p> </figure> <p data-ke-size="size16"> <p data-ke-size="size16">Jupyter의 설정을 변경합니다.<br><br></p> <blockquote data-ke-style="style3"><p>vi ~/.jupyter/jupyter_notebook_config.py</p></blockquote> <p data-ke-size="size16">아래에서 설정 섹션을 찾으십시오.</p> <blockquote data-ke-style="style2"><p>/ tornado_settings를 누르고 n을 눌러 검색합니다.<br><br></p></blockquote> <p data-ke-size="size16"><span>Jupyter 노트북을 포함하려면 아래에 도메인과 IP 주소를 입력하세요.</span></p> <blockquote data-ke-style="style3"><p>c.NotebookApp.tornado_settings = {<br /> ‘헤드라인’: {<br /> ‘Content-Security-Policy’: ‘frame-ancestors self http://localhost:9000’,<br /> }<br />} </p></blockquote> <p data-ke-size="size16">여기서 localhost:9000 프레임<span style="background-color: #fcfcfc; color: #666666;">선조</span> 의미 허용</p> <p data-ke-size="size16"> <p data-ke-size="size16">그리고 다시 Jupyter Notebook을 실행하면,</p><div class='code-block code-block-4' style='margin: 8px auto; text-align: center; display: block; clear: both;'> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1311878797193990" crossorigin="anonymous"></script> <!-- 디스플레이3 --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1311878797193990" data-ad-slot="1850295845" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> <p data-ke-size="size16">localhost:9000의 아무 페이지에서나 붙여넣기만 하면 됩니다.<br><br></p> <p data-ke-size="size16"><iframe loading="lazy" src="about:blank" width="100%" height="500px" data-rocket-lazyload="fitvidscompatible" data-lazy-src="http://localhost:8888/"> 더.
