• 컴퓨터/IT > 프로그래밍 > 웹프로그래밍
• 컴퓨터/IT > 컴퓨터 시리즈

2016/11 컴퓨터/IT 37위 | 현재 컴퓨터/IT 55위 |

• [시리즈] 위키북스 오픈소스 & 웹 시리즈 [79]

반디앤루니스 리뷰

『시작하세요! 리액트 프로그래밍』은 웹 개발 관점에서 리액트를 배우는 데 초점을 맞춘다. 처음에는 아무것도 없는 빈 HTML 파일에서 시작해 점차 필요한 요소를 추가한다. 이 방법을 통해 새로운 구문이나 부가적인 툴이 아닌 리액트를 배우는 데 집중할 수 있다.

그러고 나서 일반적으로 리액트와 함께 사용되는 별개의 선택적인 기술인 JSX에 대해 다루며, 실제로 앱을 개발하는 데 필요한 사항과 그 과정에 도움이 되는 부수적인 툴을 살펴본다. 이러한 부수적인 주제로는 자바스크립트 패키징 툴(Browserify), 단위 테스트(Jest), 린팅(ESLint), 형식(Flow), 앱 내 데이터 흐름 조직화(Flux), 그리고 불변 데이터(Immutable.js)가 있다. 이 책의 핵심 주제인 리액트에 초점을 유지하기 위해 이러한 부수적인 기술에 대해서는 최소한으로 소개하지만, 각자 필요로 하는 기술을 선택할 수 있도록 충분한 정보를 담았다.

출판사 리뷰

『시작하세요! 리액트 프로그래밍』은 웹 개발 관점에서 리액트를 배우는 데 초점을 맞춘다. 처음에는 아무것도 없는 빈 HTML 파일에서 시작해 점차 필요한 요소를 추가한다. 이 방법을 통해 새로운 구문이나 부가적인 툴이 아닌 리액트를 배우는 데 집중할 수 있다. 그러고 나서 일반적으로 리액트와 함께 사용되는 별개의 선택적인 기술인 JSX에 대해 다루며, 실제로 앱을 개발하는 데 필요한 사항과 그 과정에 도움이 되는 부수적인 툴을 살펴본다. 이러한 부수적인 주제로는 자바스크립트 패키징 툴(Browserify), 단위 테스트(Jest), 린팅(ESLint), 형식(Flow), 앱 내 데이터 흐름 조직화(Flux), 그리고 불변 데이터(Immutable.js)가 있다. 이 책의 핵심 주제인 리액트에 초점을 유지하기 위해 이러한 부수적인 기술에 대해서는 최소한으로 소개하지만, 각자 필요로 하는 기술을 선택할 수 있도록 충분한 정보를 담았다. 다기능 웹 애플리케이션을 신속하게 개발하기 위한 페이스북의 오픈소스 기술인 리액트를 시작해보자. 야후 웹 개발자인 스토얀 스테파노프는 이 실용적인 안내서에서 리액트의 기본 구성요소인 컴포넌트를 개발하고 이를 바탕으로 유지 관리하기 편리한 대규모 앱으로 구축하는 방법을 설명한다. 기본적인 자바스크립트 구문에 익숙하다면 지금 바로 시작해보자. 리액트의 기본 작동 방식을 배우고 나면 사용자가 와인에 대한 평가를 기록할 수 있는 와인패드라는 앱을 제작한다. 이 과정에서 많은 웹 개발자들이 리액트를 웹 개발의 핵심 기술로 인정하는 이유를 이해할 수 있을 것이다. ★ 이 책에서 다루는 내용 ★ ◎ 리액트 설정과 첫 번째 \"Hello world\" 웹 앱 작성 ◎ 일반 DOM 컴포넌트와 함께 사용할 커스텀 리액트 컴포넌트 개발 ◎ 내용을 편집, 정렬, 검색하고 내보낼 수 있는 데이터 테이블 컴포넌트 개발 ◎ 함수 호출 방식을 대신할 수 있는 JSX 구문 확장 사용 ◎ 리액트에 집중하는 데 도움이 되는 간소한 저수준 빌드 프로세스 설정 ◎ 데이터를 클라이언트에 저장하는 완전한 커스텀 앱 개발 ◎ ESLint, 플로우(Flow), 제스트(Jest) 툴을 이용해 앱 개발 과정에서 코드를 검사하고 테스트 ◎ 플럭스를 이용한 컴포넌트 간의 통신 관리

▣ 01장: Hello World 설정
Hello React World
작동 원리
React.DOM.*
특수한 DOM 속성
리액트 데브툴 브라우저 확장
다음 단계: 커스텀 컴포넌트

▣ 02장: 컴포넌트의 수명
최소 요건
프로퍼티
propTypes
___기본 프로퍼티 값
상태
상태 저장 텍스트 영역 컴포넌트
DOM 이벤트 참고 사항
___기존의 이벤트 처리 방식
___리액트의 이벤트 처리
프로퍼티와 상태
초기 상태의 프로퍼티: 안티 패턴
외부에서 컴포넌트 접근
작동 중 프로퍼티 변경
수명 주기 메서드
수명 주기 예제: 모두 기록하기
수명 주기 예제: 믹스인 사용
수명 주기 예제: 자식 컴포넌트 사용
성능을 위한 컴포넌트 업데이트 방지
PureRenderMixin

▣ 03장: Excel: 멋진 테이블 컴포넌트
데이터 준비
테이블 헤더 루프
콘솔 경고 디버깅
td 내용 추가
___컴포넌트를 개선하는 방법
정렬
___컴포넌트를 개선하는 방법
정렬 UI 표시
데이터 편집
___편집 가능한 셀
___입력 필드 셀
___저장
___가상 DOM의 차이점 비교와 결론
검색
___상태와 UI
___내용 필터링
___검색을 개선하는 방법
빠른 재현
___재현 기능을 개선하는 방법
___다른 구현 방법
테이블 데이터 내려받기

▣ 04장: JSX
Hello JSX
JSX 트랜스파일
바벨
클라이언트 측
JSX 변환
JSX에서 자바스크립트 사용
JSX의 공백
JSX의 주석
HTML 엔터티
___XSS 방지
스프레드 속성
___부모 대 자식 스프레드 속성
JSX에서 여러 노드 반환
JSX와 HTML의 차이점
___className과 htmlFor
___style이 객체로 취급됨
___닫는 태그
___캐멀표기법으로 속성 표기
JSX와 폼
___onChange 핸들러
___value와 defaultValue
___ 와 value <br/>___ <select> 와 value <br/>JSX를 이용한 Excel 컴포넌트 수정 <br/><br/>▣ 05장: 앱 개발을 위한 설정<br/>기본 파트 앱 <br/>___파일과 폴더 <br/>___index.html <br/>___CSS <br/>___자바스크립트 <br/>___자바스크립트: 현대화 <br/>필수 구성 요소 설치 <br/>___Node.js <br/>___브라우저리파이 <br/>___바벨 <br/>___리액트 및 기타 항목 <br/>빌드 시작 <br/>___자바스크립트 트랜스파일 <br/>___자바스크립트 패키징 <br/>___CSS 패키징 <br/>___결과! <br/>___윈도우 버전 <br/>___개발 중 빌드하기 <br/>배포 <br/>앞으로 할 일 <br/><br/>▣ 06장: 앱 구축하기<br/>와인패드 v.0.0.1 <br/>___설정 <br/>___코딩 시작 <br/>컴포넌트 <br/>___설정 <br/>___검색 <br/>___ <Button> 컴포넌트 <br/>___Button.css <br/>___Button.js <br/>___폼 <br/>___<Suggest> <br/>___<Rating> 컴포넌트 <br/>___ “팩터리” <br/>___<br/>___<Actions><br/>___대화상자 <br/>앱 구성 <br/>새로 개선된 <Excel>><br/>Whinepad <br/>마무리 <br/><br/>▣ 07장: 린트, 플로우, 테스트, 반복<br/>package.json <br/>___바벨 구성 <br/>___스크립트 <br/>ESLint <br/>___설정 <br/>___실행 <br/>___전체 규칙 <br/>플로우 <br/>___설정 <br/>___실행 <br/>___형식 검사 사용하기 <br/>___<Button> 수정하기 <br/>___app.js <br/>___프로퍼티와 상태의 형식 검사 <br/>___형식 내보내기/가져오기 <br/>___형변환 <br/>___불변항(Invariant) <br/>테스트 <br/>___설정 <br/>___첫 번째 테스트 <br/>___첫 번째 리액트 테스트 <br/>___<Button> 컴포넌트의 테스트 <br/>___<Actions> 테스트 <br/>___전체 상호작용 테스트 <br/>___적용 범위(coverage) <br/>기본 개념 <br/><br/>▣ 08장: 플럭스<br/>와인패드 다시 살펴보기 <br/>저장소 <br/>___저장소 이벤트 <br/>___<Whinepad>에서 저장소 사용 <br/>___<Excel>에서 저장소 사용 <br/>___에서 저장소 사용 <br/>___선긋기 <br/>액션 <br/>___CRUD 액션 <br/>___검색과 정렬 <br/>___<Whinepad>에서 액션 사용 <br/>___<Excel>에서 액션 사용 <br/>플럭스 정리 <br/>불변 <br/>불변 저장소 데이터 <br/>___불변 데이터 조작 </p> </div> <div id="indexDescBtn" class="bookInfo_more alt"></div> <!-- //목차 --> <!-- 간단평 --> <a name="sub11"></a> <iframe id="simpleReview" src="" height="" class="iframe_review" style="margin-left:0" frameborder="0" scrolling="no"></iframe> <!-- //간단평 --> <!-- 태그 --> <a name="sub08"></a> <iframe id="iframe_tag" src="" width="730" frameborder="0" scrolling="no"></iframe> <!-- //태그 --> <!-- 고객이 테마북을 통해 같이 묶은 다른 상품 --> <div class="usNone"> <div id="DTL_THEMA" class="bookInfo_subCon" style="display:none;"></div> </div> <!-- 이 책이 속한 테마 --> <a name="sub09"></a> <iframe id="iframe_theme" src="" width="730" frameborder="0" scrolling="no"></iframe> <!-- //이 책이 속한 테마 --> <!-- 리뷰 <a name="sub10"></a> <div class="bookInfo_subCon"> iframe src="/global/iframe_review.html" height="370" class="iframe_review" frameborder="0" scrolling="no"></iframe <iframe id="blogReview" src="" height="370" class="iframe_review" frameborder="0" scrolling="no"></iframe> </div> //리뷰 --> <!-- 페이퍼 --> <iframe id="blogPaper" src="" height="370" class="iframe_review" frameborder="0" scrolling="no"></iframe> <!-- //페이퍼 --> <!-- 다음 view --> <a name="sub12"></a> <iframe id="daumReview" src="" height="" class="iframe_review" style="margin-left:0" frameborder="0" scrolling="no"></iframe> <!-- //다음 view--> <div class="lineGr mb15"></div> <!-- 책 정보 sub list --> <ul class="bookInfo_sublist"> <li class="alt"><a href="#sub01"><img src="https://www.bandibookus.com/images/global/bookInfo_sublist_01.gif" alt="분야"></a></li> <li><a href="#sub02"><img src="https://www.bandibookus.com/images/global/bookInfo_sublist_02.gif" alt="발자취"></a></li> <li><a href="#sub03"><img src="https://www.bandibookus.com/images/global/bookInfo_sublist_03.gif" alt="책소개"></a></li> <li><a href="#sub04"><img src="https://www.bandibookus.com/images/global/bookInfo_sublist_04.gif" alt="저자,역자소개"></a></li> <li><a href="#sub07"><img src="https://www.bandibookus.com/images/global/bookInfo_sublist_07.gif" alt="목차"></a></li> <li><a href="#sub08"><img src="https://www.bandibookus.com/images/global/bookInfo_sublist_08.gif" alt="태그"> <span class="t_11br3">[<strong>2</strong>]</span></a></li> <li><a href="#sub11"><img src="https://www.bandibookus.com/images/global/bookInfo_sublist_10.gif" alt="리뷰"> <span class="t_11br3">[<strong class="evalCntTab" data-prodid="4001512">0</strong>]</span></a></li> </ul> <!-- //책 정보 sub list --> </div> <script type="text/javascript"> /* ------------------------------------------------------------------ 서평/저자소개 본문에 딸려온 빈 <a> 태그 제거 (2026-07) 출판사에서 받은 원본에 <A>...</A> 가 섞여 들어오는 경우가 있다. href 가 없어 링크로 동작하지도 않으면서 사이트의 a 스타일만 먹어 본문 글자가 다르게 보인다. href 도 name 도 없는 <a> 만 껍데기를 벗기고 글은 그대로 둔다. ( name 만 있는 <a name="sub04"> 는 위쪽 바로가기 링크의 목적지라 건드리면 안 된다 ) ------------------------------------------------------------------ */ (function() { function unwrap(el) { var p = el.parentNode; if (!p) { return; } while (el.firstChild) { p.insertBefore(el.firstChild, el); } p.removeChild(el); } /* 본문 글자크기 통일 (2026-07) 출판사 원본에 첫 항목만 <FONT size=3> 이 붙어 혼자 커지는 경우가 많다. 크기 지정만 걷어내고 굵게(<b> <strong>)는 그대로 둬서 소제목 구분은 살린다. 사이트가 쓰는 <h3> <h4> 제목은 건드리지 않는다. */ function normalizeFontSize(root) { if (!root || !root.getElementsByTagName) { return; } var fonts = root.getElementsByTagName("font"); for (var i = fonts.length - 1; i >= 0; i--) { var f = fonts[i]; f.removeAttribute("size"); // 크기 말고 남은 것이 없으면 태그째 벗긴다 if (!f.getAttribute("color") && !f.getAttribute("face") && !f.getAttribute("style") && !f.getAttribute("class")) { unwrap(f); } } var bigs = root.getElementsByTagName("big"); for (var j = bigs.length - 1; j >= 0; j--) { unwrap(bigs[j]); } var all = root.getElementsByTagName("*"); for (var k = 0; k < all.length; k++) { var st = all[k].getAttribute("style"); if (!st || st.indexOf("font-size") < 0) { continue; } all[k].setAttribute("style", st.replace(/font-size\s*:[^;]*;?/gi, "")); } } function unwrapEmptyAnchors(root) { if (!root || !root.getElementsByTagName) { return; } var list = root.getElementsByTagName("a"); for (var i = list.length - 1; i >= 0; i--) { var a = list[i]; if (a.getAttribute("href") || a.getAttribute("name")) { continue; } unwrap(a); } } function run() { try { var ids = ["cutBookDesc", "cutIndexDesc"]; for (var i = 0; i < ids.length; i++) { var el = document.getElementById(ids[i]); unwrapEmptyAnchors(el); normalizeFontSize(el); } if (document.getElementsByClassName) { var au = document.getElementsByClassName("bookInfo_author"); for (var j = 0; j < au.length; j++) { unwrapEmptyAnchors(au[j]); normalizeFontSize(au[j]); } } } catch (e) { } } if (window.jQuery) { jQuery(document).ready(run); } else if (window.addEventListener) { window.addEventListener("load", run, false); } else if (window.attachEvent) { window.attachEvent("onload", run); } })(); </script> </div> </div> <!-- //left contents --> <div id="conSmall"> <iframe id="iframe_rightList" src="" width="210" frameborder="0" scrolling="no"></iframe> </div> </div> </div> </div> <!-- //body --> <script type="text/javascript"> function snsSend(type, prodName, prodId, tag) { var wp; var url = "http://www.bandibookus.com/front/product/detailProduct.do?prodId="+prodId; if(type == 'tw') { wp = window.open("http://twitter.com/home?status=" + encodeURIComponent(prodName) + " " + encodeURIComponent(url), 'twitter', ''); } else if(type == 'fb') { url= "http://www.bandibookus.com/front/product/faceBookView.do?prodId="+prodId; wp = window.open("http://www.facebook.com/sharer.php?u=" + url, 'facebook', ''); } else if(type == 'm2') { wp = window.open("http://me2day.net/posts/new?new_post[body]=" + encodeURIComponent(prodName) + " " + encodeURIComponent(url) + "&new_post[tags]=" + encodeURIComponent(tag), 'me2Day', ''); } else if(type == 'ym') { wp = window.open("http://yozm.daum.net/api/popup/prePost?link=" + encodeURIComponent(url) + "&prefix=" + encodeURIComponent(prodName) + "¶meter=" + encodeURIComponent(tag), 'yozmSend', 'width=466, height=356'); } else { return; } if ( wp ) { wp.focus(); } } </script> <!-- 로그 분석 변수 (footer 에서 사용) --> <script type="text/javascript"> _n_p1 = "컴퓨터/IT"; //대카테고리 _n_p2 = "프로그래밍"; //중카테고리 _n_p3 = "웹프로그래밍"; //소카테고리 _n_p4 = "시작하세요! 리액트 프로그래밍"; //상품명 </script> <!-- //로그 분석 변수 --> <!-- 키워드 광고 분석 변수 (footer 에서 사용) --> <script type="text/javascript"> var LOG_PC = "4001512"; var LOG_PT = "22"; var LOG_PS = "24.2"; </script> <!-- //키워드광고 변수 --> <script type="text/javascript"> // 상세페이지: 간단평 iframe·리뷰수를 onload 안 기다리고 즉시 로드 (function(){ // 1) 간단평 iframe 즉시 로드 var f = document.getElementById('simpleReview'); if(f && !f.getAttribute('src')){ f.src = '/front/product/iframeSimpleReview.do?prodId=4001512'; } // 2) 리뷰수 즉시 채움 var els = document.querySelectorAll('.evalCntTab'); if(els.length){ var xhr = new XMLHttpRequest(); xhr.open('GET','/front/product/iframeSimpleReview.do?prodId=4001512',true); if(xhr.overrideMimeType) xhr.overrideMimeType('text/html; charset=euc-kr'); xhr.onreadystatechange=function(){ if(xhr.readyState!=4 || xhr.status!=200) return; var mc=xhr.responseText.match(/\[<strong>([\d,]+)<\/strong>\]/); var n = mc?mc[1]:'0'; for(var i=0;i<els.length;i++){ els[i].innerHTML = n; } }; xhr.send(); } })(); </script> <div id="footer"> <div class="copyright"> <p class="logo"><img src="https://www.bandibookus.com/images/common/bandius_logo_2026.png"></p> <div class="copyC"> <ul class="bMenu"> <!-- <li><a href="/front/product/musicMain.do">음반</a> |</li> --> <!-- <li><a href="/front/product/dvdMain.do">DVD</a> |</li> --> <li><a href="/front/help/helpMain.do">고객센터</a> |</li> <li><a href="/front/aboutBandi/aboutBandiMain.do?key=130">이용약관</a> |</li> <li><a href="/front/aboutBandi/aboutBandiMain.do?key=140"><strong class="t_br1">개인정보 처리방침</strong></a> |</li> <li><a href="/pages/front/aboutBandi/usTerms.jsp">Terms and Condition</a></li> </ul> <div class="bCopy"> <div style="font:bolder 14px 돋움;">2777 W. Olympic Blvd Los Angeles CA 90006</div> <div class="mt5" style="font:bolder 14px 돋움;">Tel : 고객센터 888-880-8622(Toll Free)</div> <div style="font:normal 8px verdana;color:#888;margin-top:12px">COPYRIGHT 2015 BANDI&LUNI'S ALL RIGHT RESERVED</div> </div> </div> </div> </div> </div> <!-- floatArea --> <div id="message1"> <div class="toplayer"> <span id="wiseCartNewMemoInfo"></span> <div class="alt_btm"><img src="https://www.bandibookus.com/images/common/alt_toplayer.gif" alt=""></div> </div> </div> <div id="message2"> <div class="toplayer2"> <span id="wiseCartNewOrderInfo"></span> <div class="alt_btm"><img src="https://www.bandibookus.com/images/common/alt_toplayer.gif" alt=""></div> </div> </div> <div id="floatArea"><div id="floatArea_box" class="acHeight1"><iframe src="" frameborder="0" scrolling="no" width="960" height="292" name="iframeBox" id="iframeBox"></iframe></div></div> <div id="topBtn"><p><a href="#" onClick="topLink();"><img src="https://www.bandibookus.com/images/common/btn_top.gif" alt="top"></a></p></div> <script type="text/javascript" src="/common/js/inc_float.js"></script> <!-- //floatArea --> <script type="text/javascript" src="/js/dwr.js" charset="euc-kr"></script> <script type="text/javascript" src="/dwr/interface/OrderDwr.js"></script> <script type="text/javascript" src="/dwr/engine.js"></script> <script type="text/javascript" src="/dwr/util.js"></script> <script language="javascript" src="/js/konan/pagenav.js"></script> <img id="RECOMMEND_LOGGING" style="display:none;"> <script type="text/javascript"> (function () { var OE_MIN_W = 500; // ?? °¡·???±? ??????¸? ??¹? ?æºÐ??´?°? º¸°? °???¸®?? ¾?´?´? var OE_ONLY_BIG_BOX = false; // true ¸? ?­¸?¿¡ ??°? º¸??´? ??¹???(°¡·? 100px ????)¸¸ ¹?²?´? var OE_BOX_MIN = 100; // /upload/product/4793/4793096.jpg ¶?´? ..._s.jpg var RE = /(\/upload\/product\/\d+\/\d+)(_s|_b|_t)?\.(jpg|jpeg|png|gif)(\?[^\s]*)?$/i; function bigUrlOf(src) { var m = RE.exec(src); if (!m) { return null; } if (m[2] === "_b") { return null; } // ??¹? ?? °? return m[1] + "_b." + m[3] + (m[4] || ""); } function upgrade(img) { if (!img || img.getAttribute("data-oebig")) { return; } var src = img.getAttribute("src"); if (!src) { return; } var big = bigUrlOf(src); if (!big) { return; } var w = img.naturalWidth || 0; var h = img.naturalHeight || 0; if (w === 0 || h === 0) { return; } // ¾Æ?÷ ¾? º?·?¿?´?. load ¶§ ´?½? º?´?. if (w >= OE_MIN_W) { img.setAttribute("data-oebig", "skip"); return; } if (OE_ONLY_BIG_BOX) { var box = img.width || img.offsetWidth || 0; if (box > 0 && box < OE_BOX_MIN) { img.setAttribute("data-oebig", "skip"); return; } } img.setAttribute("data-oebig", "1"); var ratio = h / w; // ¸??? ¹Þ¾Æº¸°?, ´? ??°? º??²?? °°?? ¶§¸¸ ¹?²? ³?¿?´? var probe = new Image(); probe.onload = function () { var pw = probe.naturalWidth, ph = probe.naturalHeight; if (!pw || !ph) { return; } if (pw <= w) { return; } // ´? ???? ¾??¸¸? ±×´?·? if (Math.abs((ph / pw) - ratio) / ratio > 0.12) { return; } // º??²?? ´?¸?¸? ±×´?·? img.src = big; }; probe.onerror = function () { }; // ¾ø?¸¸? ±×´?·? probe.src = big; } function watch(img) { if (img.complete && img.naturalWidth) { upgrade(img); return; } if (img.getAttribute("data-oewatch")) { return; } img.setAttribute("data-oewatch", "1"); var fn = function () { upgrade(img); }; if (img.addEventListener) { img.addEventListener("load", fn, false); } else if (img.attachEvent) { img.attachEvent("onload", fn); } } function scan() { try { var a = document.getElementsByTagName("img"); for (var i = 0; i < a.length; i++) { watch(a[i]); } } catch (e) { } } function boot() { scan(); // ³ª?ß¿¡ ±×·???´? ¸?·?(´?º¸±?, ·?¸?¹?³? ??)?? ??´?´? setTimeout(scan, 600); setTimeout(scan, 2000); setTimeout(scan, 5000); try { if (window.MutationObserver) { new MutationObserver(function () { scan(); }) .observe(document.body, { childList: true, subtree: true }); } } catch (e) { } } if (window.jQuery) { jQuery(document).ready(boot); } else if (window.addEventListener) { window.addEventListener("load", boot, false); } else if (window.attachEvent) { window.attachEvent("onload", boot); } })(); </script> <script type="text/javascript"> (function () { // ¿?¸® ??¹???°¡ ¿?¶?°¡´? °÷. ¿?±? °??º ¹?½¼ ???? ??¾??? °¨?ß?? ¾?´?´?. var OURS = ["bandinlunis.com", "bandibookus.com", "minibandi.com", "bandibook.com", "booklink.com"]; function hostOf(src) { var m = /^(?:https?:)?\/\/([^\/?#]+)/i.exec(src); return m ? m[1].toLowerCase() : ""; // ??´?°æ·?¸? º? °ª = ¿?¸® °? } function isOurs(host) { if (!host) { return true; } for (var i = 0; i < OURS.length; i++) { if (host === OURS[i] || host.indexOf("." + OURS[i]) > -1) { return true; } } return false; } function hide(img) { if (img.getAttribute("data-oehide")) { return; } img.setAttribute("data-oehide", "1"); img.style.display = "none"; } function check(img) { if (!img || img.getAttribute("data-oebrk")) { return; } var src = img.getAttribute("src"); if (!src) { return; } if (isOurs(hostOf(src))) { return; } // ¿?¸® ¼­¹? ??¹???´? °???¸®?? ¾?´?´? img.setAttribute("data-oebrk", "1"); if (img.complete) { // ??¹? °?·Ð?? ³­ ??¹???. °¡·?°¡ 0??¸? ¸ø º?·?¿? °???´?. if (!img.naturalWidth) { hide(img); } return; } // ¾Æ?÷ ¹Þ´? ?ß??¸? °?°?¸? º¸°? Æ?´???´? var onErr = function () { hide(img); }; if (img.addEventListener) { img.addEventListener("error", onErr, false); } else if (img.attachEvent) { img.attachEvent("onerror", onErr); } } function scan() { try { var a = document.getElementsByTagName("img"); for (var i = 0; i < a.length; i++) { check(a[i]); } } catch (e) { } } function boot() { scan(); // ¼­Æ?¡¤??¼¼¼³¸??º ³ª?ß¿¡ ±×·???°?³ª 'Æ???º¸±?' ·? ??´?°? ³ª?¸³­´? setTimeout(scan, 500); setTimeout(scan, 1500); setTimeout(scan, 4000); try { if (window.MutationObserver) { new MutationObserver(function () { scan(); }) .observe(document.body, { childList: true, subtree: true }); } } catch (e) { } } if (window.jQuery) { jQuery(document).ready(boot); } else if (window.addEventListener) { window.addEventListener("load", boot, false); } else if (window.attachEvent) { window.attachEvent("onload", boot); } })(); </script> </body> </html>