본문 바로가기

전체 글

About jsperf.com 이번엔 jsperf.com 사이트를 소개할까 합니다. 자바스크립트 코드블럭들(JavaScript Snippets)에 대해서 어떤 코드블럭이 더 성능이 좋은가 테스트하는 것입니다. 자바스크립트 언어의 특성상(다른 언어도 마찬가지지만) 하나의 기능을 구현할 수 있는 코드는 다양합니다. 어떤 코드가 더 성능이 좋은지는 프로파일러를 이용하거나 직접 시작 끝 속도를 측정해서 비교하는 방법 등등 여러가지가 있는데, jsperf.com 을 이용해 보는것도 좋은방법일것 같습니다. jsperf의 측정방법 내부적으로 Benchmark JS 라이브러리를 이용하고 있습니다. jsperf 사이트에서는 사용자가 테스트하고자하는 코드블럭들을 특정 시간동안 수행하면서 얼마나 완료시키는지 측정하는 방법을 사용합니다. 많이 완료하면 .. 더보기
HTML5 - 쿠키 vs. 로컬스토리지 (local storage) 일전에 모바일웹에서 사용자의 특정 값을 비로그인 환경에서 보관해야 할 개인화된 정보가 있었습니다. 당연히 쿠키를 사용하면 쉽게 해결 될 수 있는 것이였습니다. 하지만 모바일 환경이라는 점(HTML5를 보다 잘 지원함으로)으로 쿠키를 대체할 수 있는 기술을 검토해 봤습니다. 여기저기 흩어져 있는 자료를 모은 정도이지만 그때 검토하기 위해 정리한 자료를 공유합니다. (Mindjet이라는 MindMap을 사용해서 그림이미지로 첨부합니다) 모바일웹에서는 로컬스토리지 사용이 충분히 가능한 상황임을 알게 되었습니다. 특히나 모바일에서는 성능문제가 PC보다 민감하다고 볼 수 있는데요. 쿠키의 경우 HTTP Header에 매번포함되어야 하는 문제도 있습니다. 물론 쿠키의 얼마 안되는 사이즈가 중요한 문제는 아니긴 합니.. 더보기
Javascript(Ajax) 개발자에게 필요한 역량 제목을 UI 개발자로 하려다가, Javascript 개발자로 변경했습니다. 정확히 Javascript만을 주로 다루는 개발자는 굉장히 드믑니다. 하지만 웹개발의 이동이 Ajax나 Javascript으로 이동함으로써 Javascript만을 주로 다루는 개발자가 많아지고 있으며 그만큼의 전문성이 웹에서 요구되고 있습니다. Front-End가 무거워지고 복잡해 짐으로써 비 전문가들의 개발로 인해 웹페이지는 사용자들에게 더 좋은 경험을 주지 못하고 있습니다. 이것은 웹의 발전과 사용자의 경험이 비대칭으로 이뤄지는 형태라서 이것에 대한 책임을 웹개발자가 어느정도 책임을 지고 있어야 합니다. 이러한 문제를 해결하기 위해 3가지를 중점적으로 Javascript 개발자의 필수 역량이라고 생각됩니다. 첫째. 마크업과 C.. 더보기
JavaScript 특징의 이해 - JS의 중심 Function 살펴보기(2) Callback Function 먼저 아래의 예제를 살펴봅니다. function execCode(callback){ //함수내용이 어쩌구 저쩌구 callback(); //이러쿵 저러쿵 } function makeToy(){ //이리저리 주절주절 } execCode(makeToy); 위의 예제에서 makeCode함수를 callback함수라고 합니다. 이러한 callback함수는 어디에 사용될까요? 첫번째로 event listener로 사용됩니다. document.addEventListener("click",eventFunction(),false); 이벤트가 실행될때 어떠함수가 실행되도록 지정하는 것도 일종의 callback함수입니다. 두번째로 Timeout()가 있습니다. var testFun=functi.. 더보기
What is a non-blocking script? 최근들어 부쩍 Front-End Optimization에 대한 이슈가 부각되고 있다. 웹서비스는 더욱더 많은 기능을 탑재하고 있으며 노출되는 컨텐츠 또한 정적인 컨텐츠에서 동적인 컨텐츠로 변경되고 있다. 이로인해, 전통적인 최적화의 방법중 캐시를 적용하는 방법이 있는데 이또한 효과가 점점 떨어지고 있는것이 사실이다. 또한, 페이지를 이동하며 컨텐츠를 제공하는 전통적인 방법에서 한 페이지에 머무르면서 사용자 요구사항에 부응해야 하며 더 많은 동적인 컨텐츠를 제공하는 방법으로 변화하고 있다. 그런데, 이런 기능이 많아지면 많아질수록 자바스크립트의 양이 많아 지는데 이는 서비스 진입시 페이지가 하얗게 보이는 시간을 더 길게 하는 주요 원인이 된다. 아래의 문제를 알기쉽게 설명해놓은 글이 있어서 소개하려고 한다.. 더보기
JavaScript 특징의 이해 - JS의 중심 Function 살펴보기(1) JavaScript(이하 JS)라는 언어는 다른 언어와 달리 몇가지 특징을 가지고 있습니다. 그런 특징들은 사실 UI를 개발하는데 매우큰 걸림돌이 되지는 않는것 같습니다. 이는 언어적인 자유도가 상대적으로 높은 JS에서 잘못된 패턴을 허용하기 때문이기도 합니다. 몇가지 언어적인 특징을 이해하기 앞서 가장 중요하다고 생각되는 Function , Object , Scope등을 앞으로 단계적으로 작성해보려고 합니다. 저도 이기회에 몇가지 참고할 수 있는 책과 웹을 탐독한 후 머리속에 정리되는 내용을 적어보려고 합니다. 어쩌면 짜집기식의 내용취합일 수 도 있지만 그래도 몇가지 책에서 이해하기 어려운 부분을 쉽게 작성해보려고 노력해 보겠습니다 ^^ Function - 삼형제 Function의 그 종류부터 알아보겠.. 더보기
[Book Review] JavaScript Patterns 수많은 JavaScript책중에 최근에 살펴보았던 책 한권을 리뷰할까 합니다. 최근에 몇몇 개발자분과 스터디를 하고 있어서 이런 부분을 일부 공유 하고자 합니다. JavaScriptPatterns(Paperback) 카테고리 과학/기술 > 컴퓨터 > 프로그래밍 지은이 Stoyan Stefanov (O'Reilly, 2010년) 상세보기 처음에는 자바스크립트 패턴이라고 해서 디자인패턴을 자바스크립트에 맞게 표현한 책인줄 알았습니다.(실제 이런 책이 있긴 합니다) 하지만 그런책은 아니더군요. 오히려 책제목 그대로의 내용을 담고 있습니다. 아쉽게도 번역서가 없어서 원서 뿐 이지만, 코드위주로 보면 좀 볼만합니다^^ 자바스크립트에서 언어적인 특징만을 설명한 책은 많지 않습니다. 이런 특징을 이해하는 것은 상당히.. 더보기
일주일간 모은 링크 #5 How to develop a HTML5 Image Uploader HTML5를 적용한 이미지 업로더를 만드는 방법에 대한 글입니다. canvas태그를 사용하였으며 Firefox 4.1에서 동작하는 방법입니다. drag & drop을 이용하여 업로드할 파일을 선택하고 canvas에 preview를 보여주고 간단한 수정도 추가합니다. 그리고 ajax를 이용하여 업로드를 합니다. (얼마나 업로드 되었는지도 보여줄 수 있군요!) 로컬 파일을 불러 이미지 preview를 보여주는 부분이 저는 좀 신기합니다. FileReader()를 사용하는데 제가 이 부분에 대해서는 잘 몰라 하는 이야기이긴 합니다만 보안 문제가 발생할 수도 있을 듯 한데요. 아직 IE에서 동작하지 않기 때문에 국내에서 본격적으로 적용하기에는 .. 더보기