Bay Area jQuery Conf 2011에서 관심 가는 동영상 몇 개

2011.04.25 23:20
지난 4월 16일부터 17일까지 샌프란시스코에서는 jQuery 컨퍼런스가 열렸습니다. 국내에는 jQuery는 커녕 일반적인 자바스크립트 또는 자바스크립트를 포함한 UI 개발 관련 행사가 하나도 없다는 점을 생각해보면 이런 특정 라이브러리의 컨퍼런스가 열릴 수 있다는 것은 부러운 일입니다.

 jQuery Conf 2011의 세션을 잠시 살펴보면 모바일에 대한 내용, 개발 방법이나 퀄리티 도구를 사용하는 방법, 유닛 테스트, jQuery의 활용, 하이브리드 모바일 앱 등 이제는 단순한 jQuery의 활용을 벗어나 다양한 주제에 대한 내용이 포함되어 있습니다. 점점 대단하다는 생각밖에 들지 않네요.

이 중 몇 개의 세션을 녹화한 동영상이 온라인에 공개되어 있는 것을 우연히 발견했습니다. 동영상 중 제가 관심있는 몇 개에 대한 링크를 걸어봅니다.

Introduction to jQuery Mobile - Raymond Camden

Introduction to jQuery Mobile | Raymond Camden | Bay Area jQuery Conf 2011 from yayQuery on Vimeo.



Mobile Performance - Steve Souders

Mobile Performance | Steve Souders | Bay Area jQuery Conf 2011 from yayQuery on Vimeo.



Integrating Code Quality tools into your jQuery Development Workflow - Anton Kovalyov

Integrating Code Quality tools into your jQuery Development Workflow | Anton Kovalyov | Bay Area jQuery Conf 2011 from yayQuery on Vimeo.



이 외의 동영상에도 관심있는 분들은 이 페이지를 방문해보시기 바랍니다.




 

nundefined HTML5_JS_CSS code quality, JQuery, jquery conf, jquery mobile, mobile, Performance

일주일간 모은 링크 #6

2011.04.25 11:43
Google URL Shortener gets an API
구글의 단축 URL서비스인 goo.gl의 API가 드디어 오픈되었습니다. 이미 bit.ly등 단축 URL 서비스를 제공하는 다른 곳에서도 제공하고 있기 때문에 빠른 시간 내에 오픈될 것으로 기대하던 참입니다. bit.ly같은 경우 이미 많은 서비스에서 사용하고 있기 때문에 굳이 구글을 기다릴 필요는 없었지만 구글이라면 뭔가 다르지 않을까 하는 기대가 있었나 봅니다. 아직 랩에 등록된 API이므로 예고 없이 변경될 수 있다는 부분이 아쉽다면 아쉬운 부분이네요. 

JavaScript에서 네임스페이스를 이용하여 구조적으로 JavaScript를 짤 수 있는 방법에 대해 설명하고 있습니다. 네임스페이스를 사용하면 코드를 다른 코드의 영향을 받지 않도록 작성할 수 있습니다. 또한 전역 변수를 사용할 경우 변수명을 모호하게 지정하거나 변수명이 충돌할 수도 있는데 이런 문제를 근본적으로 해결할 수 있습니다. (전역 변수를 사용할 경우 variable scope으로 인해 실행 속도에 영향을 주기도 합니다.) JavaScript로 복잡한 프로그램을 작성해야 한다면 이 글을 읽고 한 번 적용해보면 어떨까요?

오래된 스타일의 JavaScript에 대한 이야기입니다. 동작하는 데는 문제가 없지만 더이상 추천받지 못하는 코드를 소개하고 있습니다. 유지보수하기 어려운 코드라거나 성능상 문제가 있는 코드 등 몇 가지 피하면 좋을 코드 패턴을 정리해두고 있습니다. 복잡한 공부를 하지 않고도 이 글을 읽고 적용해보는 것만으로도 두고두고 도움이 될 코드를 만들 수 있을 것으로 생각합니다.

작년 Velocity 2010 워스샵에서 Maximiliano Firtman이 발표한 발표자료입니다. High performance라는 제목을 달고 있지만 앞부분에는 모바일 웹 환경에 대한 이야기를 포함하고 있으므로 모바일 웹 환경에 대한 기본적인 이해를 하기에도 적당한 자료입니다. 여기서 소개하고 있는 블로그의 경우 모바일 웹에 대한 좋은 자료가 많이 올라오고 있으므로 모바일 웹에 관심있는 분이라면 이 블로그를 관심있게 살펴보셔도 좋을 것으로 생각합니다.

자바스크립트 코드의 품질을 측정하는 툴로써 유명한 Douglas Crockford의 JSLint가 업데이트 되었습니다. 자바스크립트 코드의 품질을 측정하는 툴이 몇 가지가 더 있는 것으로 알고 있습니다만 JSLint 만한 것이 없죠. 여러분이 작성한 자바스크립트 코드가 얼마나 건강한지 궁금하다면 jslint.com을 방문하여 여러분의 코드를 확인해보기 바랍니다. 단, JSLint를 실행시키고 난 후에는 여러분의 기분이 상할 수 있으니 주의하기 바랍니다. 

정규 표현식을 편집할 수 있는 도구입니다. 정규 표현식과 테스트 대상 코드를 넣으면 실시간으로 선택결과를 표시해줍니다. 페이지에는 간단한 레퍼런스도 제공하고 있으니 정규 표현식에 익숙하지 않은 경우 이 페이지에서 표현식을 수정해가며 원하는 정규 표현식을 만들 수 있을 것입니다.

간단한 북마크 형태로 제공되는 JavaScript performance 도구입니다. 페이지의 DOM과 다른 부분들을 분석하여 어떤 부분을 개선하면 좋을지 안내해줍니다. 여기서 안내해주는 모든 가이드를 적용할 것인지는 각자의 몫이지만 한 번씩 검토해보면 좋을 내용들을 안내해주고 있습니다. 개인적으로는 엘리먼트의 갯수나 노드의 갯수를 알려주는 프로그램이 필요했는데 이 프로그램으로 간단하게 해결할 수 있게 되어 좋네요.

nundefined HTML5_JS_CSS API, bit.ly, dom monster, douglas crockford, goo.gl, Google, javascript, jslint, Mobile Web, Namespace, Performance, regex, Regular Expression, rejex, URL Shortener, variable scope, 자바스크립트

About jsperf.com

2011.03.01 22:42
이번엔  jsperf.com 사이트를 소개할까 합니다. 자바스크립트 코드블럭들(JavaScript Snippets)에 대해서 어떤 코드블럭이 더 성능이 좋은가 테스트하는 것입니다. 자바스크립트 언어의 특성상(다른 언어도 마찬가지지만) 하나의 기능을 구현할 수 있는 코드는 다양합니다. 어떤 코드가 더 성능이 좋은지는 프로파일러를 이용하거나 직접 시작 끝 속도를 측정해서 비교하는 방법 등등 여러가지가 있는데, jsperf.com 을 이용해 보는것도 좋은방법일것 같습니다.


jsperf의 측정방법
  1. 내부적으로 Benchmark JS 라이브러리를 이용하고 있습니다.
  2. jsperf 사이트에서는 사용자가 테스트하고자하는 코드블럭들을 특정 시간동안 수행하면서 얼마나 완료시키는지 측정하는 방법을 사용합니다. 많이 완료하면 할수록 성능이 좋은 코드라고 판단합니다.
  3. 브라우저별 테스트도 가능합니다.
    측정하고자 하는 브라우저에서 수행을 시키면 브라우저를 판별후에 측정을 시작합니다.

사용방법
  1. http://jsperf.com 사이트에 접속합니다.
    미리 다른 개발자들이 어떻게 테스트를 했는지 보려면 http://jsperf.com/browse에 접속해보세요.
  2. Your Detail 작성
    이 영역은 옵션이지만 Name 부분이 중요한것 같습니다.
    자신이 작성한 Test Case들을 RSS Feed로 받아볼때 유용합니다.
    이름을 기준으로 Feed가 생성이 됩니다.
    예를들어 이름을 jkyang으로 적었다면 http://jsperf.com/browse/jkyang.atom 의 형식이 됩니다.
    이 기능은 자신이 관심있어 하는 개발자의 Feed를 볼때도 유용합니다.
  3. Test Case Details
    Slug(가제목) 부분이 중요합니다.
    Slug 부분이 곧 자신이 작성한 Test Case 의 고유 링크가 되는데요.
    이 부분의 중복검사를 해주지는 않으니 Slug를 입력하고 하단 주소를 긁어서 접속해보시기 바랍니다. 404가 나오면 고유 링크라고 생각하시면 됩니다.
  4. Preparation Code
    Test Case를 돌리기 위한 HTML Code와 JS Library 를 입력합니다.
    자바스크립트 부분에는 Test Case를 돌리기 위한 사전코드(전역변수)를 입력합니다.
  5. Code Snippets to Compare
    비교하고자 하는 코드블럭을 입력합니다. 기본은 2개이고 계속 추가가 가능합니다.
    이때 중요한것은 코드블럭내의 루프문을 자제해야 합니다. 왜냐면 테스트 수행시에 해당코드 블럭을 반복적으로 수행하면서 측정을 하기 때문입니다.

결과 보기
 

  1. UserAgent
    해당 Test Case를 수행한 브라우저를 보여줍니다.
  2. #Test
    테스트 수행 횟수 
  3. UserAgent, #Test 부분을 제외한 가운데 영역
    Test Case 등록시에 코드블럭별로 입력한 제목입니다.
    숫자가 클수록 성능이 좋은걸로 판단하시면 됩니다.
  4. 여기서 1차 목적인 코드별 성능을 보실수 있구요. 2차적으로 브라우저별 성능도 차이가 있다는걸 발견할 수 있습니다.
  5. 자신의 Test Case를 공개하면 다른 개발자들도 자유롭게 Test Case를 수행할 수 있어서 도움을 줄수도 있고 자신은 더 많은 테스트 정보를 이용해서 성능을 증명할 수 있습니다.
    (Test Case 공개여부는 등록시에 기본적으로 체크되어 있습니다.)

Tip
  1. 자세한 사용설명이나 취지는 http://jsperf.com/faq 를 참고하세요.
  2. 관심 있는 테스트를 Feed로 보려면 http://jsperf.com/browse/author-name.atom 기능을 이용하세요.
  3. Test Case 수행시에 버튼을 Run Tests 버튼을 클릭하지 않고 바로 수행하고 싶다면 
    http://jsperf.com/stringmerge-plusoperator-vs-arrayjoin#run 처럼 링크 뒤에 #run을 붙여주세요.

다른 예제들도 많지만 이해를 도우려고 쉽게 작성한 예제를 소개 드립니다.
문자열을 합치는 방법중에서 + 연산자를 사용하는 방법고 배열의 Join()함수를 이용하는 방법을 테스트해봤습니다.



jkyang HTML5_JS_CSS jsperf, 성능, 자바스크립트, 테스트

HTML5 - 쿠키 vs. 로컬스토리지 (local storage)

2011.03.01 21:17
일전에 모바일웹에서 사용자의 특정 값을 비로그인 환경에서 보관해야 할 개인화된 정보가 있었습니다.
당연히 쿠키를 사용하면 쉽게 해결 될 수 있는 것이였습니다.
하지만 모바일 환경이라는 점(HTML5를 보다 잘 지원함으로)으로 쿠키를 대체할 수 있는 기술을 검토해 봤습니다. 여기저기 흩어져 있는 자료를 모은 정도이지만 그때 검토하기 위해 정리한 자료를 공유합니다.
(Mindjet이라는 MindMap을 사용해서 그림이미지로 첨부합니다)


다운로드 받아보시면 잘 보이실거에요.

다운로드 받아보시면 잘 보이실거에요.


모바일웹에서는 로컬스토리지 사용이 충분히 가능한 상황임을 알게 되었습니다. 특히나 모바일에서는 성능문제가 PC보다 민감하다고 볼 수 있는데요. 쿠키의 경우 HTTP Header에 매번포함되어야 하는 문제도 있습니다. 물론 쿠키의 얼마 안되는 사이즈가 중요한 문제는 아니긴 합니다 ^^

그래도 모바일이라면 로컬스토리지 사용을 검토해 보시면 좋겠네요

Mindmap자료도 첨부합니다.(Mindjet이라는 프로그램에서 열릴겁니다)



니가요 HTML5_JS_CSS AJAX, cookie, Gmail, html5, local storage, localstorage, web storage, 구글 검색 히스토리, 로컬스토리지, 쿠키

Javascript(Ajax) 개발자에게 필요한 역량

2011.02.27 08:37
제목을 UI 개발자로 하려다가, Javascript 개발자로 변경했습니다.
정확히 Javascript만을 주로 다루는 개발자는 굉장히 드믑니다. 하지만 웹개발의 이동이 Ajax나 Javascript으로 이동함으로써 Javascript만을 주로 다루는 개발자가 많아지고 있으며 그만큼의 전문성이 웹에서 요구되고 있습니다.
Front-End가 무거워지고 복잡해 짐으로써 비 전문가들의 개발로 인해 웹페이지는 사용자들에게 더 좋은 경험을 주지 못하고 있습니다. 이것은 웹의 발전과 사용자의 경험이 비대칭으로 이뤄지는 형태라서 이것에 대한 책임을 웹개발자가 어느정도 책임을 지고 있어야 합니다.

이러한 문제를 해결하기 위해 3가지를 중점적으로 Javascript 개발자의 필수 역량이라고 생각됩니다.

첫째. 마크업과 CSS
마크업 다시 말해 정적인페이지를 디자인하고 개발하는 것은 UI개발자가 가지고 있어야할 필수 항목 입니다.
Javascript와 HTML&CSS를 각각 전문화된 영역으로만 생각하고 서로에 대한 이해가 없다면 UI개발진행중에 많은 비효율과 혼란이 발생합니다. 즉 CSS로 처리할 수 있는 것을 모른채 Javascript로 하거나, Javascript의 동작원리를 이해하지 못한채 HTML을 구현함으로해서 DOM을 제어하고 이벤트를 조작하는데 어려움을 겪을 수 있습니다.
특히 UI Component(위젯)의 개발에서는 두개의 적절한 조화로움이 있어야만 재사용이 가능한 코드를 개발 할 수 있습니다.
Javascript개발자는 마크업과 css를 같이 개발하는 편도 좋습니다.
그런 상황이 아니라면 반드시 마크업과 CSS의 이해를 Javascript의 이해에 앞서 익혀야 합니다.
앞으로 CSS3에서는 정말 많은 기능을 구현할 수 있습니다.(이전에 Javascript로 삽질했던 것들이 점차적으로 브라우저에서 NATIVE하게 해결됩니다)  이런 상황에서 html/css를 별개로만 생각하면 곤란하겠죠?

두번째. 최적화
이것은 앞서서 이미 포스팅을 썻는데요.
http://nundefined.tistory.com/3
http://nundefined.tistory.com/6
http://nundefined.tistory.com/7

다시 말씀드리고 싶은 사항은 한가지 입니다.
웹의 구현방식의 변화와 함께 최적화해야 할 중요한 부분도 Server-Side에서 Front-End로 이동하고 있습니다. 최적화를 해야 하는 대상이 이미지(그래픽),물리적인방법,웹서버,웹스크립팅,스크립트난독화 등 이런 부분을 과거의 성능엔지니어라는 사람들이 처리 할 수 없습니다.
다양한 직군의 개발자가 각각해야할 것들이 있으며, 이를 전체적으로 컨트롤하고 컨설팅할 수 있고 해야하는 사람은 JavaScript개발자이며, 반드시 그래야만 합니다.
최적화를 공부하세요 ^^

세번째. JavaScript CORE영역의 이해
JavaScript는 사실 중요하지 않고 심지어 JAVA의 스크립트언어로 이해되는 경우도 있습니다.(전혀 그렇지 않죠)
JavaScript  OOP개발이 가능하기도 합니다.어떻게 보면 진정한 객체지향 언어 입니다.
하지만 유연함과 자유로운 특징으로 인해, 비 JavaScript전문가도 개발이 가능합니다. 무슨말이냐면 정확하고 언어의 이해가 깊지 않아도 소위 돌아가는 코드 구현이 가능합니다.
사실은 OOP중심의 언어적인 특징을 잘 살린 JavaScript구현결과를 보는 것은 매우 어렵습니다.
(이런 것이 어렵다면 프레임워크를 사용하는 것만으로도 많은 JavaScript장점을 살릴 수 있습니다)

그럼 JavaScript에서 core란 무엇일까요? <core api모 그런건 아닙니다>
  • EcmaScript이 의해
  • NodeJS 와 같은 서버사이드에서의 JavaScript의 활용
  • 자바스크립트 렌더링 엔진의 이해(브라우저에서 사용중인)
  • Ojbect,Function의 이해
  • 브라우저 호환성이슈에 대한 이해(이것은 중요한 경쟁력입니다. 이것을 버리지 마세요!!)
  • Pattern의 이해(잘못된 패턴을 고르고, 좋은 패턴의 장점을 활용한 코딩 기법)

이상 3가지를 다시 한번 정리해보겠습니다.
  • 마크업과 CSS를 이해하자
  • 웹최적화에 대한 이해를하자
  • 자바스크립트 CORE영역을 이해하자

이것이 제가 생각하는 JavaScript 엔지니어(Front -End Engineer)의 스킬셋이자 역량입니다.
하지만 개개인 마다 생각하는 가치는 모두 다르겠죠. 제가 생각하는 부분을 참고하여 스스로의 스킬셋과 역량셋을 만들어 나가시면 좋겠습니다.



니가요 HTML5_JS_CSS AJAX, ECMAScript, Function, javascript, nodejs, Object, UI 개발자, 역량