발생일: 2012.05.08 문제: 배열 데이터를 잘라서 처리하는 로직을 구현해야 했다. 아래와 같이 짧은 코드를 구현했는데,크롬에서는 잘 동작하지만 IE8 이하에서 제대로 동작하지 않는 걸 발견했다. var a = [1, 2, 3, 4, 5]; var result = a.slice(1); 이상하다. 특별히 문제될 부분이 없는데...왜 이런 걸까... 해결책: 음메.slice를 splice로 잘못 썼던 게 문제였다... -_-; splice는 배열에서 특정 인덱스의 아이템을 추가하거나 삭제하는 메서드이고,아래와 같은 형태로 호출한다. splice(index, howmany, itemToAdd, itemToAdd, ...) 표준에는 두 번째 파라미터인 howmany 값이 필수라고 정의해뒀지만,만약 이 값을..
발생일: 2012.04.25 문제: 그냥 오늘 테스트 코드를 짜다가 불쑥 생각해낸, 랜덤 컬러를 생성하는 간단한 코드~짧고 간단해서, 종종 쓰면 편할 것 같아 메모해둔다. 해결책: 코드는 아래, 간단하다~ Math.random().toString(16).replace(/.*(\w{3})/, '#$1'); 랜덤값을 생성해 16진수로 출력한 후,대상 문자열에서 숫자 3개를 찾아 '#fff' 형태의 값을 뽑아온다. 요곤 축약형 hex code를 찾아내는 코드지만,요래저래 활용하면 RGB 값도 한 방에 뽑아올 수 있을 듯 하다. 여튼, 테스트 용도로 적격인 코드.^^
발생일: 2012.03.26 문제: 모바일에서 css 파일을 동적 로딩하고, 로드가 완료되면 특정 작업을 진행하려고 한다. 일전에 동적 로딩 모듈을 만들어봤던 기억으로는, 웹킷 계열은 태그에 onload를 지원하지 않아서 단순히 특정 시간 후에 load 이벤트가 발생하게 작성했었다. 다른 몇몇 라이브러리도 그렇게 했던 걸로 기억하고.... 뭔가 더 좋은 방법이 없을까? 해결책: 좀 검색해보니 웹킷 계열일 경우, 타이머로 document.styleSheets의 length를 체크하는 방법으로 로드 여부를 확인하고 있다. 하지만, 페이지 내 다른 모듈에서 css 파일을 동적 로드하는 경우도 발생할 수 있으니, length 체크만으론 부족해보인다. 좀 더 꼼꼼하게 처리하자면, styleSheets 객체 내 h..
발생일: 2012.03.20 문제: textarea에 기본 문구가 들어가고, 포커스/블러 시 기본 문구를 숨겨주는 스펙이다. HTML5의 placeholder를 적용할 수 있는 전형적인 케이스인데, 마크업 쪽에서 value에 직접 할당을 하는 방법으로 전달해줬다. 혹시나 해서, placeholder로 기본 문구를 넣어봤더니, 아니나 다를까 문구가 길어지자 문구가 잘려보인다~ 왜 이런겨~ 해결책: W3C 스펙에서 placeholder의 word wrap 부분에 대해선 정확히 정의하지 않은 모양이다. 모바일 사파리에서 문구가 길어질 경우, (overflow:hidden 과 같이) 잘려보인다. http://stackoverflow.com/questions/7312623/insert-line-break-insi..
발생일: 2012.03.20 문제: 요새 모바일 프로젝트를 진행하고 있는데, textarea에 포커스를 주는 동시에 키패드를 뿅~하고 나타나게 하는 데서 어려움을 겪은 적이 있다. '쓰기' 버튼을 누르면 textarea가 있는 곳으로 애니메이팅 되어 이동한 후, textarea에 포커스를 주도록 하는 스펙이다. 이상하게도, textarea에 포커스가 들어가긴 하는데, 키패드가 열리지 않는다. 원인이 뭘까? 모바일 사파리에서 발생한다. 해결책: 모바일 사파리에서는, 사용자 이벤에 의해서만 키패드를 열 수 있다. 스크립트만으로는 키패드를 열 수 없고, 다만, 사용자 이벤트 함수 실행 범위 내에서는 가능하다. 예를 들어, onClickButton: function (e) { // 클릭 이벤트 핸들러라 가정한다..
발생일: 2012.02.09 문제: 이번에 모바일 프로젝트를 하나 맡게 됐다. 기획서를 검토하고 구조를 잡던 중에, 예전에 어떤 가이드에서 iOS에서는 스크립트 사이즈가 몇 kb 이상이면 캐시가 되지 않는다고 했던 게 기억났다. 꽤 오래 전이었던 걸로 기억하는데,.. 아직도 유효한가? 해결책: 스티브 사우더스가 모바일 캐시 파일 사이즈에 대해 아주 잘 설명해놓은 포스트가 있다. http://www.stevesouders.com/blog/2010/07/12/mobile-cache-file-sizes/ 요약해보면, 한 세션 당, (여기서 세션은 한 페이지에서 다른 페이지로 이동하는 것을 의미한다) 스크립트 한 개의 파일 당 iOS는 4MB까지, 안드로이드는 2MB까지 캐시가 된다. 물론 버전에 따라 약간씩 ..
발생일: 2012.01.19 문제: 며칠 전 크로미엄 버전을 18.0.1010.1 dev-m 버전으로 업데이트 한 이후로, 잘 작동하던 몇몇 익스텐션이 제대로 작동하지 않는다. 어느 부분에서 오류가 나나 찾아봤더니, 익스텐션에서 document.documentElement 를 찾지 못한다. 뭐가 문젤까? 해결책: 크롬 dev 버전이 18.0.1010.1로 업데이트 되면서 발생한 버그로 추정된다. 검색해보니 같은 문제로 2012.01.11에 버그 리포팅 된 것이 있다. https://groups.google.com/a/chromium.org/group/chromium-bugs/browse_thread/thread/0e668df511f0b381 재현을 위해서는, 1. 익스텐션에서 아래와 같이 content ..
발생일: 2012.01.10 문제: 아이폰이나 아이패드와 같은 터치 디바이스에서는 PC와 다르게 hover(마우스 롤오버) 효과가 적용되지 않는다. '마우스' 개념이 없기 때문이다. 실제로 모바일 웹 페이지를 작성하는 경우, 마크업 단계부터 hover 효과를 고려하지 않는다. 하지만 기존 서비스를 모바일에서도 그대로 제공해야 하는 경우라면, 서비스에 적용된 여러 가지 hover 효과 때문에 사용자가 불편을 겪을 수 있다. 예를 들어, 마우스를 오버했을 때 가이드가 표시되는 버튼을 구현했다면, 터치 디바이스에서는 한 번 클릭 시 마우스 오버 효과가 발생하고, 다시 클릭했을 때 클릭 이벤트가 발생한다. PC에서는 한 번 클릭으로 실행 가능했던 버튼이 터치 디바이스에서는 두 번을 클릭해야 한다. 진행하고 있는..
발생일: 2011.12.30 문제: 엘리먼트에 hover 효과(롤오버)가 적용되어 있는 경우, CSS hover 로 구현된 것인지, mouseover/mouseout 이벤트로 효과를 준 것인지 쉽게 구별할 수 있는 방법이 있을까? 해결책: 마크업 담당자에게 문의하던 과정에서 알게된 방법~ ^^ 별 것 아닌 것 같지만, 요고요고 유용하다.ㅎㅎ 1. 개발자 도구의 엘리먼트 패널에서 대상 엘리먼트를 inspect 한다. 2. 대상 엘리먼트에 마우스 오버/아웃 해본다. 3. 클래스나 스타일의 변경이 직접적으로 보인다면 자바스크립트로 변경한 것. 아닐 경우, CSS에서 :hover 클래스로 호버 효과를 준 것이다. # 기타 참고. - CSS 가상 클래스 우선순위: http://cssdesign.kr/forum/v..
발생일: 2011.12.19 문제: 종종 어떤 서비스들의 Ajax 패킷을 보다보면, X-Requested-With 헤더에 XMLHttpRequest 값이 포함된 걸 볼 수 있다. Ajax로 요청하는 트위터의 타임라인을 예로 들어보면, 아래와 같이 요청 헤더에 X-Requested-With 헤더가 있다. GET /1/statuses/home_timeline.json?... HTTP/1.1 Host: api.twitter.com Connection: keep-alive X-Requested-With: XMLHttpRequest User-Agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/535.11 (KHTML, like Gecko) Chrome/17.0.963.12 Saf..