발생일: 2011.1.13 문제: 언제였더라? 프렌드 홍이 얘기해줬던가? 어떤 면접에서 면접관이 JVM 을 죽이는 한 줄짜리 코드를 작성해보라고 했다는 이야기가 생각났다. 그럼 브라우저를 죽이는 한 줄짜리 자바스크립트 코드는 어떤 게 있을까? 해결책: 며칠 전 정규식의 중첩 수량자(nested quantifier)와 역추적 폭주(runaway backtracking)에 관한 부분을 보고, 위에서 얘기했던 한 줄짜리 코드 이야기가 생각나서 재밌는 부제(?)를 달아봤다.^^; 아래 코드는 대상문자열인 "AAAAA..." 가 /(A+A+)+B/ 에 매치되는지 테스트하는 정규식 구문이다. /(A+A+)+B/.test("AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"); 위 코드는 중첩 수량자에..
발생일: 2011.01.03 문제: 마크업의 클래스 값을 구분해 탭의 인덱스를 가져오는 스크립트를 작성했다. 탭의 클래스 이름은 각각 "tab", "tab2", "tab3" 와 같은 식으로 구성되어 있으며 아래와 같이 가져와서 사용했다. function getTabIndex(className) { var reg = /tab(\d)?/; var index = reg.exec(className)[1]; return index - 1 || 0; // 값이 없을 경우, index - 1 이 NaN 을 기대함. } 헌데, 클래스명이 "tab" 일 경우, FF 에서는 기대했던 대로 결과값이 0이 리턴되었지만, IE 에서는 -1 이 리턴된다. 해결책: 정규식에서 그룹에 대한 정규식 매칭 결과가 없을 때 브라우저 별 ..
발생일: 2010.12.03 문제: 외부 코드와 연동 작업을 하다가 아래와 같은 스크립트 오류가 발생했다. Permission denied Location.toString 오류가 발생하는 원인이 무엇이고, 해결할 수 있는 방법은 무엇일까? 해결책: Permission denied 나 Location.toString 문구가 포함된 오류는 1) 다른 도메인으로 Ajax 요청을 보내려고 시도하거나, 2) 도메인이 서로 다른 프레임에서 스크립트로 접근을 시도하는 경우 에 발생한다. 이는 브라우저의 동일 근원 정책(Same origin policy)를 위배했기 때문이다. 브라우저는 아래의 경우에만 접근을 허용한다. 1) 같은 프로토콜. 2) 같은 포트. 3) 같은 호스트(도메인 포함). 예를 들어, 아래의 경우는..
Yahoo Developer Network 의 Best Practices for Speeding Up Your Web Site 를 가볍게 정리한 내용입니다~ 자세한 내용은 위 사이트에서 참고하세요~~ [컨텐츠/마크업] HTML 에서 이미지 사이즈를 변경하지 마라. 컴포넌트 사이즈를 25K 이하로 유지하라. (for iphone) img 태그에 빈 이미지를 넣지 말라.(empty src) iframe 을 최소화하라. DOM 엘리먼트를 최소화하라. (대신 CSS 로) [스크립트] HTTP Request 최소화하라. 스크립트는 하단에 넣어라. 스크립트 및 CSS 는 외부에 둬라. (캐시 이득) 스크립트, css 를 최소화하라. Ajax 응답이 캐시 가능하도록 하라. Ajax 요청에 GET 메서드를 사용하라. ..
발생일: 2010.11.29 문제: 작업한 페이지를 응답 시간 별로 테스트 해보고자 합니다. 타임아웃이 발생하는 경우 등을 테스트 하기 위한 목적입니다. 서버에서 테스트를 위한 지연 응답을 몇 개 만들어주면 편하겠지만, (예: /responseAfter3Seconds) 테스트 서버를 구축할 환경이 되지는 않습니다. 해결책: 패킷 캡처 프로그램인 Fiddler 를 사용해서 요청/응답 시간을 조작할 수 있습니다. (Fiddler 는 패킷 추적 뿐 아니라 요청/응답 내용도 조작할 수 있어 굉장히 유용하니 아직 사용해보지 않으셨다면 꼭 한 번 돌려보세요~) #1. Fiddler 로 응답 시간 조작하기 Fiddler 를 이용해 응답시간을 조작하는 방법은, 옷장수님의 블로그 Fiddler 로 다운로드 지연시간 시뮬..
발생일: 2009.12.24 문제: 독립적인 기능을 하는 자바스크립트 클래스를 하나 만들었다. 이 클래스를 싱글턴으로 사용하고 싶다. 또한, 일반적인 getInstance() 라는 스태틱 메서드를 사용하는 대신, 바로 생성자를 호출해서 객체를 만들도록(내부적으로 싱글턴 인스턴스를 리턴) 하려고 한다. 어떻게 하면 자바스크립트에서 생성자만으로 싱글턴을 구현할 수 있을까? 해결책: 한참을 고민해봤다. 이런 방법으로 구현해보면 어떨까? 클래스의 생성자에 대한 유효범위를 제한해두고, 그 유효범위 안에서 window 속성의 클래스 생성자(래퍼)를 다시 정의한다. (일종의 프록시 패턴이라고 할 수도 있겠다) window 속성의 클래스 생성자에서는 클래스의 유일한 인스턴스를 만들어 리턴하도록 싱글턴을 구현한다. 즉,..
발생일: 2009.12.17 문제: 이번 연구회 때 발표할 주제는 AJAX 다. 대부분 신입 사원들이라 XMLHttpRequest 객체 생성부터 다뤄보려고 한다. 얼마 전 읽은 John Resig 의 Pro Javascript Techniques 책에서 생성하는 방식으로 설명할까 하다가, 신입사원들이 알기에는 좀 어려울 것 같다는 생각이 들어 다른 튜토리얼이나 라이브러리 소스를 좀 열어봤다. 대부분 비슷하긴 한데, 다들 구현하는 방식이 조금씩 다르다. 그렇다면 어떤 방법으로 구현하는 게 가장 좋을까? 해결책: 일단 XMLHttpRequest 객체에 대해 간단하게 히스토리를 정리해보자. 비동기 통신 수단인 XMLHttp 는 인터넷 익스플로러에서 제일 먼저 제안하였으며, 최초 ActiveXObject 를 사..
발생일: 2009.12.06 문제: 자바스크립트에서 다음과 같은 구문을 많이 사용한다. var result = a || b; a 의 값이 true 이면 result 를 a 로 설정하고, 아닐 경우 b 로 설정하라는 이야기다. 예를 들어, 크로스 브라우징을 위해 이벤트 객체를 가져올 때에도 이와 같이 설정한다. function test(e) { e = e || window.event; // e 가 존재할 경우, e로 설정하고 없을 경우 window 속성의 event 로 설정한다 ...(중략) } 헌데, 몇몇 코드를 보다 보니, var result = a && b; 와 같은 형태도 있더란 말이다. 이건 왠지 true 만 리턴되야 할 것 같은데,.. 음... 갑자기 헷갈린다. 해결책: a && b 도 a ||..