본문 바로가기

전체 글

일주일간 모은 링크 #4 UX MYTHS 사용자 경험에 대한 오해를 수집하고 틀린 이유에 대해 설명해주는 사이트입니다. 이런 글은 대체로 영어로만 되어 있는 경우가 많으나 이 페이지의 경우 한글로 번역되어 있습니다. 이제까지 알고 있는 정보들이 정말 올바른 정보인지 이 페이지를 보면서 한 번 검토해보면 어떨까요? JavaScript에서 메모리 정보를 검색하는 방법 제목 그대로 JavaScript에서 메모리 정보를 얻는 방법입니다. 일본어 페이지이지만 구글에서 제공하는 번역 기능을 이용하면 이해하는데 큰 문제는 없을 것입니다. (저는 구글 크롬의 번역 기능을 사용) 좀 아쉬운 점이 있다면 Webkit 계열의 브라우저와 Firefox에서 사용 가능한 방법만을 알려주고 있습니다. 국내에서는 IE의 비율이 높은데 이에 대한 방법이 없는.. 더보기
일주일간 모은 링크 #3 Tangram - 바이두에서 만든 자바스크립트 라이브러리 바이두에서 만든 자바스크립트 라이브러리로 65KB (gzip 압축시 17.7 KB)인 매우 작은 사이즈를 자랑합니다. Cheat Sheet를 봐서는 많은 기능보다는 핵심적인 기능으로만 구성했다는 느낌이 듭니다. 핵심적인 라이브러리 외에도 효과, 버튼, 날짜 선택기 등 기본적인 그러나 빈번하게 사용되는 컴포넌트를 같이 제공하고 있습니다. 자바스크립트로 .tar.gz 파일 로드 & 자바스크립트로 ID3 tag 읽기 자바스크립트를 이용하여 .tag.gz 파일을 읽고 MP3의 ID3 tag를 읽는 라이브러리입니다. 기본적으로 작지 않은 크기의 파일을 읽어야 하므로 실제 서비스에 적용하는 일은 그렇게 많지 않을 것으로 생각합니다. 하지만 자바스크립트를 사용.. 더보기
자바스크립트 프레임웍 제대로 알고 사용하기 jQuery라는 것을 많이 들어보셨을 것 같습니다. 자바스크립트 프레임웍이라고 하는 것인데요, 자바스크립트 라이브러리라고도 합니다. 이번엔 자바스크립트 프레임웍이 어떤 특징을 가지고 있고, 어떤 장점을 가지고 있는지 한번 확인하겠습니다. 자바스크립트 프레임웍의 올바른 이해를 통해 100% 제대로 활용할 수 있는 계기가 되면 좋겠습니다. 자바스크립트 개발은 서버사이드 개발과 비교할 수는 없지만 결코 더 쉽지 않은 이유가 많습니다. 어디에서 명세화 되어 있지 않은 브라우저 호환성(compatibility) 문제의 경우 개발자의 디버깅으로 하나하나 해결해야 합니다. 또한 자바스크립트의 구현은 어찌나 어렵고 귀찮은지, 특히 OOP개념으로 구현된 코드를 수수정하거나 읽는 것만으로도 힘이 듭니다. 이 뿐만이 아닙니.. 더보기
일주일간 모은 링크 #2 Code Guidelines for Rich Internet Application JavaScript로 Rich Internet Application(이하 RIA)을 만들 때 따르면 좋을 가이드라인입니다. 일반적으로 RIA의 경우 대부분의 기능이 JavaScript로 구현되고 매우 복잡해지는 경향이 있습니다. 이럴 때 프로그램 전체를 관통하는 가이드라인이 있다면 프로그램의 성능도 개선되고 이후 관리가 편해지는 장점도 있습니다. 아직 특별한 가이드라인이 없는 상황이라면 이 페이지를 기본으로 삼아도 좋을 것 같습니다. 또한 내용 중에는 빠른 실행을 위한 코드 작성 방법도 많이 언급되어 있으므로 실행 속도가 느려 고민하고 있는 경우라면 이 페이지의 내용을 바탕으로 소스코드를 검토해봐도 좋을 것으로 생각합니다... 더보기
일주일간 모은 링크 #1 10 Javascript Performance Boosting Tips from Nicholas Zakas 자바스크립트의 성능을 향상시키는 10가지 방법에 대한 글입니다. 로컬 변수를 활용하라, with()구문을 사용하지 말라 등 속도를 높이기 위한 방법을 설명해두었습니다. 최근 자바스크립트 엔진의 속도가 빨라지면서 코드가 느리게 짜여진 경우에도 문제가 발생하는 일은 많지 않지만 어딘가에 있을 자바스크립트의 실행 속도가 느려 고민하는 분들은 이 글을 읽고 한 번쯤 코드를 살펴보면 좋을 것 같습니다. 45 most useful guidelines for mobile web design & development iOS, android, nokia & symbian, blackBerry 등 다양한 기기에서 모.. 더보기
HTML5 어떻게 대응해야 하는 것일까요? HTML5 가 2010년 웹세상의 핫 키워드 중 하나였던 것 같습니다. 여기저기서 세미나가 열리고, 웹에는 지금 제가 쓸 내용과 비슷한 포스트가 잔뜩 쌓여 있습니다. 서점에서는 책도 벌써 여러권 전시되어 있더군요. HTML5이라는 것이 나왔는데, 도대체 어떻게 대응해야 하는가? 에 대한 이야기를 할까 합니다. 먼저 HTML5가 무엇인지 짧게 정리를 해볼까요? HTML5는 웹 개발자가 원하는 욕구에 의하여 출발하여, 공식적인 웹표준을 담당하고 있는 W3C라는 곳에서 표준을 인정하여 워킹그룹으로 진행되고 있는 개선된 웹UI 기술이라고 할 수 있습니다. HTML5하면 HTML의 히스토리나 역사 이야기가 꼭 나오는데요, 이런 부분은 다른 글에서 쉽게 찾을 수 있을것 같아서 생략합니다. 누구를 위한것인가? 매우 .. 더보기
Twitter의 로그인 기능으로 살펴보는 unobtrusive JavaScript 최근 많이 사용하고 있는 트위터의 경우 웹페이지를 통해 사용하는 사람보다 별도의 프로그램을 이용하여 사용하는 사람이 많은 서비스입니다. 저같은 경우도 데스크탑에서는 트윗덱을 아이폰에서는 트위터 공식앱을 사용하여 트위터를 이용합니다. 이렇게 별도의 앱을 사용하여 서비스를 이용하다 보면 특별히 웹페이지로 오게 되는 일이 별로 없습니다. 최근에는 좀 나아졌을지도 모르겠지만 트위터 웹페이지가 그렇게 안정성이 좋지도 않습니다. 몇 달 전만해도 한국 시간으로 밤 - 미국 시간으로 아침에서 낮이 되는 시간 - 이 되면 로그인도 하기 어려웠고 정상적으로 트위터를 사용하기가 어려웠으니까요. 오늘 적어보려 하는 것은 JavaScript를 사용하여 개발을 할 때 중요하게 생각해야 할 Unobtrusive JavaScript.. 더보기
Google Docs 모바일 에디팅 지원 우선 다음의 동영상부터 먼저 보시겠습니다. 위 동영상은 모바일 폰에서 Google Docs의 문서를 편집하는 기능에 대한 것입니다. 동영상을 본 느낌은 어떠신가요? 웹에서의 WYSIWYG 에디터에 대한 이야기를 하려면 먼저 에디터가 기본적으로 동작하는 방식에 대해 이해할 필요가 있습니다. 대부분의 리치 웹 에디터는 브라우저에서 제공하는 contenteditable (IE인 경우 designmode를 사용하는 경우도 있음) 프로퍼티를 설정하여 브라우저에서 특정 엘리먼트를 수정할 수 있는 상태로 만든 후 여기에 JavaScript등을 이용하여 고급 기능을 제공하는 형태로 만들어져 있습니다. contenteditable을 설정하더라도 기본적으로 제공해주는 기능에는 한계가 있기 때문에 이런 한계를 뛰어넘고자 J.. 더보기