일주일간 모은 링크 #6

2011. 4. 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, 자바스크립트

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

2011. 2. 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 개발자, 역량

[Book Review] JavaScript Patterns

2011. 1. 13. 09:41
수많은  JavaScript책중에 최근에 살펴보았던 책 한권을 리뷰할까 합니다. 최근에 몇몇 개발자분과 스터디를 하고 있어서 이런 부분을 일부 공유 하고자 합니다.
JavaScriptPatterns(Paperback)
카테고리 과학/기술 > 컴퓨터 > 프로그래밍
지은이 Stoyan Stefanov (O'Reilly, 2010년)
상세보기
<티스토리 정보첨부 -책 에는 이책의 이미지가 없네요 ^^>

 처음에는 자바스크립트 패턴이라고 해서 디자인패턴을 자바스크립트에 맞게 표현한 책인줄 알았습니다.(실제 이런 책이 있긴 합니다)
하지만 그런책은 아니더군요. 오히려 책제목 그대로의 내용을 담고 있습니다.
아쉽게도 번역서가 없어서 원서 뿐 이지만, 코드위주로 보면 좀 볼만합니다^^
자바스크립트에서 언어적인 특징만을 설명한 책은 많지 않습니다. 이런 특징을 이해하는 것은 상당히 어렵고 곤혹스럽습니다. 많은 개발자들이 이런 부분의 원리를 이해하지 못하고 개발에 임하고 있습니다(이런것은 복잡한 상황에서 더욱 개발자를 어렵게 합니다)
오늘 소개하는 책은 이런부분의 일부분을 해결해 줄 수 있는 책이 확실한것 같습니다.

또한 이책을 읽은 후에 더글라스크랙포드 아저씨의 책을 같이 읽는 것을 권장합니다
자바스크립트핵심가이드
카테고리 미분류
지은이 더글라스 크락포드 (한빛미디어, 2008년)
상세보기
비슷한 내용을 담고 있으면서, 보다 언어적인 특징을 이해하는데 많은 도움이 될것 입니다.


어떤내용이 있는지 줄거리를 말씀해 드릴까 합니다<아래 굵은 글씨는 이책의 몇몇 목차 그대로 입니다>

패턴?
위에서 썻듯이 이책은 디자인패턴뿐만을 담고 있지는 않습니다. 이책의 뒷부분에 디자인패턴도 나오긴 합니다만. 메인내용은 아닙니다.
코딩패턴이 소개되고 있습니다.
구현방식이 비교적 자유로운 언어인 자바스크립트에서는 여러가지 형태의 코딩이 가능합니다. 동일한 동작을 구현하는데 중급개발자 이상의 코드를 보면 모두 다른 코드의 형태로 유지합니다. 이러한 유형중 어떤것이 어떤상황에서 어울리는지에 대한 설명을 코딩패턴이라는 부분에서 다루고 있습니다.
컨벤션은 코딩 규칙입니다. 네이밍설정 하는 것부터  brace( 괄호)를 어떤 위치에 둘지, 공백은 어떻게 처리할지 등 으 방법이 포함되어 있습니다. 하지만 컨벤션이 이책의 메인줄거리는 아닙니다.

 Essentials
자바스크립트 문법을 사용하는 경우 어떤방법이 좋은지, 반대로 어떤패턴이 좋지 않은지 설명합니다.자바스크립트 문법과 함수중에는 쓰는 것을 삼가해야할(사실은 실패했지만 없앨수 없는 현실적인 문제가 있죠)것들이 있습니다. 
 For loops 와  For in loops 에서 주위해야 할점, 변수의 사용(전역/지역)에대한 이야기.그리고 코딩컨벤션,
eval() 함수의 사용에 대한 이야기 등. 자바스크립의 잘못 만들어진 문법의 일부분을 설명해주고 있습니다. 우리는 이러한 패턴을 사용하지 않는것이 좋습니다.

 Literals and Constructors 
리터럴과 생성자는 반대의 개념인것처럼 보이지만 실제로는 유사한 목적을 가지고 있는 것입니다. 다만 어떤 것이 더 좋은가?  어떤 상황에서 리터럴을 쓰지? 왜? 라는 이유를 얻을 수있습니다.
예를 들어,  리터럴은 더 빠르고, 코드의 양을 줄일 수 있다는 이유도 포함됩니다.
 JSON 형태(자바스크립에서 객체를 표현하는 형태)를 사용하는 경우 주의 해야 할점도 포함하고 있습니다.
 Constructors(생성자) 라는 것은  new 키워드를 통한 호출되는 함수라고 할 수 있습니다. 생성자는 뒤에 나오는 함수와 Prototype 의 기초가 되는 부분으로 중요하다고 볼 수 있습니다.

 Functions
자바스크립트는 함수가 가장 중요하다고 생각됩니다. 이 책에서도 함수에 대한 내용이 상대적으로 많으며 중요하게 다루고 있습니다.
자바와 같은 언어와 달리 자바스크립트는 다양한 표현방식을 가지고 함수를 표현할 수 있습니다. 이러한 이유는 본질적으로 자바스크립트 함수가  First-class Object 라고 이책에서 표현합니다.(참 적절한 표현입니다)
이러한 특징은  결국 자바스크립트 함수는  객체이며 그로 인해 다른 함수에  Return 되는 경우도 있고, 다른함수에  arguments로 사용이 가능하다는 점입니다. 또한 변수에 할당도 가능합니다. (어쨋든 이렇게 구현된 코드는 역시 보기는 어렵습니다 ㅎㅎ)
변수에 할당하는 경우는 보통  funtion expression 이라고 하고,  function decalarations 는 일반적인 함수를 정의하는 패턴이라고 합니다.
이외 다양한 함수의 표현방식이 있으며, 이러한 방식은 매우 유용하고 실제 자주사용되는 것임으로 분명히 이해를 하고 있는 편이 좋습니다
- callback 의 정의와 왜 사용하는지?
-  self-defining  함수의 목적은? ( 함수내에서 동일한 함수를 호출하는 형태로 한번의 초기화때 유용하게 사용이 가능합니다)
-  immediate funcitons  는 언제 사용하는지? <()function(){......}()) > 이런 형태로 즉시 실행이 바로 되는 함수 입니다.
이러한 특징을 모두 이해하고 올바른 사용법을 설명하고 있습니다.

 code reuse patterns 
자바스크립트의 중복코드를 방지하고 코드량을 줄이는 방법중 하나는 상속을 하는 것입니다. 그런데 상속을 하는 방법이 자바스크립트는 쉽지 않습니다. 사실은  자바스크립트의  Framework 을 활용해서 상속을 비교적 쉽게 사용할 수는 있습니다.
상속자체를 어떻게 하는것인지 보다,  ptototype 이라는 키워드를 이해하고 이를 통한 상속방법을 이해하는 것이 중요합니다. 실제로 이책에서는  code reuse patterns 이라는 절을 통해  prototype 객체(네 이것은 객체가 맞습니다)를 활용한 상속방법을 설명하고 있습니다.
초보자바스크립트 개발자에게는 쉽지 않은 내용인데요, 전 이부분을 이해하였다면 중급개발자라고 생각합니다
<prototype 에 대한 부분은 요 다음에 포스팅을 할까 생각중입니다>

이외에도   Design Patterns 과  DOM 을 조작하는 내용이 이책에는 있습니다.
초급자에게는 조금 어렵지만 자바스크립트를 조금 다뤄본 분들에게는 중급개발자 이상으로 가는 좋은 길잡이가 될것 같습니다.

다음에는 이책에도 포함이 되었지만 아래내용을 정리해서 글을 올려볼까 합니다.
  • 자바스크립트의 함수
  • 자바스크립트 에서의  Prototype 활용



니가요 HTML5_JS_CSS javascript, patterns, Prototype, 디자인패턴, 상속, 패턴

자바스크립트 프레임웍 제대로 알고 사용하기

2010. 12. 22. 13:57

 

jQuery라는 것을 많이 들어보셨을 것 같습니다. 자바스크립트 프레임웍이라고 하는 것인데요, 자바스크립트 라이브러리라고도 합니다.

이번엔 자바스크립트 프레임웍이 어떤 특징을 가지고 있고, 어떤 장점을 가지고 있는지 한번 확인하겠습니다.

자바스크립트 프레임웍의 올바른 이해를 통해 100% 제대로 활용할 수 있는 계기가 되면 좋겠습니다.
 

자바스크립트 개발은 서버사이드 개발과 비교할 수는 없지만 결코 더 쉽지 않은 이유가 많습니다.

어디에서 명세화 되어 있지 않은 브라우저 호환성(compatibility) 문제의 경우 개발자의 디버깅으로 하나하나 해결해야 합니다. 또한 자바스크립트의 구현은 어찌나 어렵고 귀찮은지, 특히 OOP개념으로 구현된 코드를 수수정하거나 읽는 것만으로도 힘이 듭니다.
이 뿐만이 아닙니다
. 디버깅은 정말 환상적입니다. 최근에서야 각 브라우저 벤더사들이 소위 개발자툴을 함께 제공하고 있긴 합니다만
아직도 디버깅을 어떻게 해야 하고 오류메시지를 어떻게 이해하고 해결해야 할지는 많은 UI개발자들을 지치게 만들고, UI개발을 꺼려하게 되는 가장 큰 이유이기도 합니다.

하지만 이러한 문제를 조금씩 줄여 나가는 노력이 생겼습니다.

호환성 문제를 모아서 라이브러리화 시키고, 자주 쓰는 함수를 재사용할 수 있게 하며, 쉽게 OOP개념의 코드를 구현 할 수 있도록 일정수준의 패턴을 알려주기도 합니다. 본질적인 자바스크립트 개발의 어려움(자바스크립트의 특성을 이해해야 하는 어려움에서 출발)을 해소해주진 못하지만, 정말 편리하게 UI개발을 해주는 것들이 나왔습니다.

JQuery가 대표적인 자바스크립트 프레임웍 입니다. (놀랍게도 최근 1-2년 이야기 입니다)

물론 아직까지 YUI, prototype, dojo, mootools, extJs등이 건재하며 비슷하면서도 툴마다의 특성과 철학을 가지고 유지되고 있습니다.

 

아래 표는 최근의 추세를 보여줍니다. jQuery  사용성 과 속도라는 핵심가치에서 모두 우수한것임에 틀림 없는것 같습니다


<점유율 비교>

 


자바스크립트 프레임웍이 가지고 있는 장점과 특징을 꺼내서 정리해보도록 하겠습니다
.

 

호환성(compatibility) - 가장 어려운 UI개발자의 고민을 해결
브라우저는 절대 표준화되지 않을 것 입니다. 심지어 HTML5라는 스펙은 표준을 위한 것이라기 보다는 브라우저의 native한 성격을 최대한 활용하기 위해서 나온 것일 뿐 입니다. 현재 draft상태의 많은 스펙을 마치 표준인 것처럼 브라우저 사들이 경쟁적으로 도입할 것이며, 새롭고 편리한 기능은 누가 먼저랄 것도 없이 먼저 반영하여 릴리즈 할 것 입니다. 그중에 메이저급 기능이라면 HTML6이라는 이름으로 오픈 될 수도 있으니 놀라지 마시기 바랍니다. 아무튼 이런 과정에서 새우등이 터지는 겪이니 개발자는 인기있는 브라우저가 잘 동작하게 코드를 다듬어야 합니다.

자바스크립트 프레임웍은 이런 짓을 누구보다 빨리 반영해주고 있습니다. 대부분의 호환성 문제를 고민하지 않아도 좋습니다.

 

최신성 - 최신 브라우저와 기기를 지원

새로운 브라우저와 기기가 하루가 멀다고 새로나오고 업그레이드가 되고 있습니다

HTML5 새로운 스펙을 도입하고 싶고, 아이패드와 같은 새로운 기기에서 본인의 코드가 정상적으로 동작하기 위해서는 코드의 수정이 불가피 합니다. 하지만 프레임웍에서는 이런 부분을 가장 빨리 지원해주고 있습니다.  HTML5 input Type에는 datetime이나 email, range등 자바스크립트로 문자열제어를 통해서 어렵게 입력값조정을 했던 것을 기본 type으로 지원해주고 있습니다(대부분의 프레임웍은 form 조작을 쉽게 해줍니다). 이런 부분은 프레임웍을 사용함으로써 보다 쉽게 사용이 가능합니다.

 

안전성 - 버그 없이 빠른 렌더링 보장

자바스크립트의 대부분 작업은 사실 HTML 이나 DOM을 조작하는 것입니다. 이런 부분은 selector라는 native한 속성을 기반으로 브라우저에서 편리하게 다양한 기능을 제공합니다. 이런 것을 사용자가 보다 직관적으로 쉽게 사용할 수 있도록 다양한 selector를 지원하고 있습니다. 이런 부분의 지원없이 DOM API만을 가지고 직접 DOM Tree를 탐색하는 것은 성능에 문제를 일으킬 수 있습니다.

프레임웍의 사용으로 반복적인 코드를 상당히 줄일 수 있습니다. 결국 LOC(Line of code)의 경량화로 네트웍비용까지 감소하게 됩니다.

안정성에서 마지막으로 강조 하고 싶은 것은 축적된 노하우 입니다. 자바스크립트 프레임웍이 나온지는 얼마 되지 않았습니다. 하지만 반면에 자바스크립트라는 언어의 버전이 변경되는 등 큰 변화는 없었습니다. 4-5년된 자바스크립트 프레임웍의 나이는 결코 적지 않습니다. 그 동안에 잠재된 문제점은 모두 발견되어 수정되었다고 볼 수 있습니다. 다만 새로운 브라우저와 기기로 인한 호환성 문제와 새로운 기능의 불완전함등만 있을뿐입니다. 이제 대부분의 프레임웍이 여러분의 서비스를 주요한 이슈를 발생시켜 해치지 않을 것 입니다.

 


 

생산성- 보다 빠르게

프레임웍은 Dom조작뿐 아니라, 특정 Element에 이벤트를 바인딩하는 과정 , Ajax통신의 절차적인 프로세스등 일관전 구조에 따라 동적인 처리를 지원합니다. 결과적으로 이런 규칙으로 인해 협업 개발시(collaboration)에 커뮤니케이션 비용을 줄일 수 있습니다

그리고 단순한 스트링을 조작하는 유틸리티 함수등의 사용으로 중복코드를 줄일 수 있으며, 이벤트 바인등하는 과정에서 매크로를 사용하여 개발하는 것을 활용하면 코드량을 확실히 줄일 수도 있습니다 역시 결국 보다 빠르게 개발할 수 있습니다.

마지막으로 다양한 UI Component(widgets)를 사용할 수 있습니다. 디자인요소에 따라서 코드의 수정이 불가피한 경우가 많지만 대부분의 UI Component 사용은 UI 개발을 매우 빠르게 해주는 것임에 틀림 없습니다. 대부분의 프레임웍은 UI Component를 공식관리해주고 있으니 더욱 믿고 쓸수 있습니다.

 

그외

같은 이야기이지만 코드의 유지보수ㅡ가 용이한점, 일관된 구조로 인해 가독성이 좋아지는 점 등의 장점이 있습니다.

 

대부분의 프레임웍은 이러한 장점을 모두 가지고 있습니다. 적은 부분의 개발 코드에서도 프레임웍을 사용하는 것을 권장해드립니다.

혹시라도 프레임웍 사용을 하지 않는다고 하여도 프레임웍기반의 마이그레이션을 하는 방법은 어렵지 않으며, 선택적인 기능만 프레임웍기반으로 개발할 수 있습니다.

다만 여러 프레임웍을 동시에 사용하는 것은 자제해야 합니다.

일시적인 비용일지라도 하나의 프레임웍기반으로  마이그레이션을 하여 사용하는 것이 좋습니다. 이런 과정이 어렵다면 프레임웍이 제공하는 충돌방지 방법(namespace로 감싸는 방법등)을 사용하시면 됩니다.

 

아직도 프레임웍에 대한 어려움을 느끼셨다면 이번기회에 프레임웍을 사용하여 개발이 힘을 쏟아 보시는것이 어떨까 합니다 ^^

 

 

니가요 HTML5_JS_CSS AJAX, dojo, extjs, framework, javascript, jindo, JQuery, YUI

일주일간 모은 링크 #1

2010. 12. 12. 23:30

자바스크립트의 성능을 향상시키는 10가지 방법에 대한 글입니다. 로컬 변수를 활용하라, with()구문을 사용하지 말라 등 속도를 높이기 위한 방법을 설명해두었습니다. 최근 자바스크립트 엔진의 속도가 빨라지면서 코드가 느리게 짜여진 경우에도 문제가 발생하는 일은 많지 않지만 어딘가에 있을 자바스크립트의 실행 속도가 느려 고민하는 분들은 이 글을 읽고 한 번쯤 코드를 살펴보면 좋을 것 같습니다.

iOS, android, nokia & symbian, blackBerry 등 다양한 기기에서 모바일 웹 개발을 할 때 살펴봐야 할 공식 가이드를 한 곳에 모아둔 곳입니다. 글에서 모아둔 가이드가 완전하지 않고 때로는 틀리는 경우도 있다고 경고하고는 있지만 모바일 웹을 만들 때 가장 먼저 살펴봐야 할 자료들이라고 생각합니다.

HTML의 Canvas와 자바스크립트를 이용하여 누드 사진을 판독하는 자바스크립트 라이브러리입니다. 서버에서 누드 사진을 판독하는 기술은 이미 오래 전에 도입된 것으로 알고 있는데 이제 HTML을 이용한 이미지에 대한 처리가 가능해지면서 이런 재미있는(?) 코드도 나오는 듯 합니다. 현재 이 코드는 IE9, FF3.6 이상, 크롬, 사파리 (아이폰/아이패드 포함), 오페라 브라우저에서 사용할 수 있습니다. <video>를 사용한 동영상에서 누드 사진(동영상이라고 해야할까요?)을 판독하는 데모도 있습니다만 제 네트워크 속도가 문제인지 정상적으로 데모를 확인할 수는 없었습니다.

크롬 웹스토어가 오픈하면서 크롬 브라우저에서 애플리케이션을 실행시킬 수 있게 되었는데요 여기에 발표된 여러 앱들이 iPad의 디자인에서 얼마나 많은 영향을 받았는지에 대한 기사입니다. 저는 아직 설치를 해보지 않았는데 기사에 있는 이미지들을 보면 iPad앱과 거의 동일한 것을 알 수 있습니다. 기사 내에서 iPadification of the web (웹의 아이패드화)이라는 표현을 썼는데요 이런 방향이라면 내년 상반기에는 국내에서도 iPad 앱과 유사한 웹을 만나게 될 가능성이 높을 것 같습니다. 물론 이렇게 된다면 HTML5와 자바스크립트의 활용도가 더 커지겠지요.



nundefined HTML5_JS_CSS canvas, Detection, guideline, IPAD, javascript, Mobile Web, Performance, Web App, 누드사진판독, 모바일웹, 성능, 성능향상, 향상