발생일: 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.31 문제: HTTP 패킷 확인 툴로 찰스(Charles)를 주로 사용하고 있다. 이번에 HTTPS 요청을 테스트할 게 있어서 모니터링을 시도했으나, 자꾸 Fail이 난다. 브라우저는 크롬을 사용하고 있다. 왜 그런 걸까. 해결책: 혹시나 해서 익스플로러에서 HTTPS 모니터링을 시도해보니, 신뢰할 수 있는 인증서냐고 물어본다. 신뢰할 수 있다고 체크하고 진행하니, IE에서는 정상적으로 보인다. 아무래도 크롬에서 인증서를 신뢰할 수 없어 튕겨내는 것 같다. 혹시나 해서, 찰스 가이드를 찾아보니 찰스가 SSL Proxying을 처리하는 방법에 대해 나와있다. 찰스는 브라우저와 SSL 웹 서버의 중간자(man-in-the-middle HTTPS Proxy)가 되는 방법으로 이를 처리한..
발생일: 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.16 문제: 담당하고 있는 서비스에서는 버전 관리 도구로 SVN을 사용하고 있다. 배포는 서버 개발팀에서 담당하고 있는데, 매 배포에 대한 버전 관리는 어떻게 관리하는 지 궁금해서 물어봤더니 각 릴리스에 대한 버전을 브랜치로 따서 관리한다고 한다. 예를 들어, v.1.0을 배포하고자 할 경우, Release Branch의 약어를 써서 RB-1.0 과 같은 이름의 브랜치를 따고, 해당 브랜치를 배포하는 식이다. 요새 Git으로 관리하고 있는 개인 프로젝트에서도 브랜치로 배포 버전을 따면 되겠구나~하고 생각하고 있었는데, 이것저것 알아보다 보니 실제로 브랜치보다는 태그(Tag)를 더 많이 사용하는 모양이다. 태그는 뭐고, Git에선 어떻게 사용하는 걸까? 해결책: 버전 관리 시스템에서..
발생일: 2012.01.15 문제: git에서 커밋할 때엔 항상 git add . 명령어로 커밋할 대상을 골라놓은 후, git commit -m [message] 명령으로 커밋했다. git add 가 정확히 어떤 것인지 모르고 습관적으로 실행했었는데, 이번에 책을 읽다가 알게된 내용을 메모해둔다. 해결책: Git 프로젝트의 세 가지 단계 가장 먼저 Git 프로젝트의 세 가지 단계에 대해 이해해야 한다. Git 프로젝트에는 Git Directory, Working Directory, Stating Area 세 가지 단계가 있다. Git Directory는 Git이 프로젝트의 모든 정보를 저장하는 곳이다. Git의 핵심이라 할 수 있고, Git을 새로 구축하거나 다른 저장소에서 Clone할 때 Git Dir..
발생일: 2012.01.10 문제: 아이폰이나 아이패드와 같은 터치 디바이스에서는 PC와 다르게 hover(마우스 롤오버) 효과가 적용되지 않는다. '마우스' 개념이 없기 때문이다. 실제로 모바일 웹 페이지를 작성하는 경우, 마크업 단계부터 hover 효과를 고려하지 않는다. 하지만 기존 서비스를 모바일에서도 그대로 제공해야 하는 경우라면, 서비스에 적용된 여러 가지 hover 효과 때문에 사용자가 불편을 겪을 수 있다. 예를 들어, 마우스를 오버했을 때 가이드가 표시되는 버튼을 구현했다면, 터치 디바이스에서는 한 번 클릭 시 마우스 오버 효과가 발생하고, 다시 클릭했을 때 클릭 이벤트가 발생한다. PC에서는 한 번 클릭으로 실행 가능했던 버튼이 터치 디바이스에서는 두 번을 클릭해야 한다. 진행하고 있는..
발생일: 2012.01.08 문제: 구글 클로저 컴파일러로 여러 개의 자바스크립트 파일을 압축하려고 한다. 컴파일러는 jar 형태로 되어 있고, --js 와 --js_output_file 옵션으로 입출력 파일을 구분할 수 있다. $ java -jar compier.jar --js one.js --js two.js --js three.js --js_output_file output.js 이런 식이다. 파일 개수가 많아져서 가독성 좋게 옵션을 라인 단위로 작성하고 싶다. 우째야 하나. 해결책: 기초 중의 기초란다. ㅎㅎ 라인으로 구분되어 있지만, 명령이 한 줄이라는 것을 알려주기 위해 백슬래쉬(\)를 사용하면 된다. $ java -jar compier.jar \ --js one.js \ --js two.js..
발생일: 2012.01.06 문제: 여러 대의 PC에서 마우스와 키보드를 공유하려고 시너지(synergy)를 사용하고 있다. Windows를 호스트로, 맥을 클라이언트로 잡아놓고 사용하고 있는데, Windows의 Ctrl, Alt, window 키가 기대했던 대로 맥에서 매핑되지 않는다. 윈도우의 Ctrl 키는 맥에서도 Ctrl 키를, 윈도우의 Alt 키는 맥의 Command 키에 매핑되도록 하고 싶다. 어떻게 수정해야 할까? 해결책: 디폴트로 사용하는 경우, 아래와 같이 매핑된다. Windows :: Mac Ctrl --> Ctrl WinKey --> Command Alt --> Alt/Option 편하게 변경하기 위해선, 스크린을 추가할 때 키보드 매핑 정보를 아래와 같이 변경하면 된다. Window..