도전! JavaScript TDD – 1. 시작

  얼마 전에 끝난 프로젝트를 통해서, 느낀 점 하나가 테스트 코드의 필요성이다. 솔직하게 말하자면 단위 테스트를 하나도 작성하지 않았다. 프로토타이핑이나 해 볼 생각이었는데 일정(물리적 일정보다는 심리적 일정에 더 가까웠음)에 쫓겨서 이 코드가 바로 제품이 되어버리는 바람에 그랬어요 라고 말하고 싶지만, 어디까지나 나의 게으름이 가장 큰 이유다. 바빠 죽겠는데 무슨 테스트냐 더보기…

[번역] CSS Lint 규칙

CSS LINT? CSS Lint는 오픈 소스 기반의 CSS 코드 성능 도구(CSS code quality tool)로 Nicholas C. Zakas와 Nicole Sullivan에 의해 작성되었다고 합니다. 소스 코드의 정적분석(static analysis)을 실행하고, 개발자에게 문제를 일으킬만한 패턴이나 오류를 찾아냅니다. 기본적인 문법 오류 확인부터 문제가 있는 패턴이나 성능면에서 좋지 않은 부분들을 잡아내기도 합니다. 세부적으로 어떤 부분을 확인하는지는 아래 더보기…

HTML5 transform:translate 와 top/left 성능 비교

참고 : “Myth busting the HTML5 performance of transform:translate vs. top/left”   개요 HTML5에서 애니메이션 효과를 내는 여러가지 방법들이 있습니다. 그 중에서 가장 성능이 좋은 방법이 무엇인지 조사하던 중에 발견한 포스팅 내용을 요약하였습니다.   테스트 범위 transform:translate vs. position:absolute and top/left CSS Transitions vs. custom JavaScript requestAnimationFrame() Graphics acceleration on vs. 더보기…

글쓴이 김 현미,

모바일 웹에서 동적 그리드 리스트(Dynamic Grid List) 구현시, 기울기 전환 성능 이슈

    동적 그리드 리스트(Dynamic Grid List) UI   이번 프로젝트를 진행하면서 pinterest.com 스타일의 동적 그리드 리스트를 모바일에 적용하기 위한 모듈을 만들었다. 타일 리스트(Tile List), 동적 그리드 뷰(Dynamic Grid View) 등.. 다양한 이름으로 불리는 UI인데 공식적인 명칭이 무엇인지는 잘 모르겠다. 프로젝트를 진행하면서 명칭을 통일해야 할 것 같아서, 임의로 동적 그리그 더보기…

[번역] ECMA-262-3 in detail. Chapter 4. Scope chain.

원문 출처 : ECMA-262-3 in detail. Chapter 4. Scope chain.. by Dmitry Soshnikov       소개(Introduction) 변수 객체를 살펴보았던 두 번째 챕터에서 보았듯이, 실행 콘텍스트의 데이터(변수, 함수 선언 그리고 함수의 형식 매개변수)는 변수 객체의 프로퍼티로 저장된다. 그리고 콘텍스트로 진입할 때 매번 초기값을 갖는 변수 객체를 생성하며, 코드 실행 단계에서 값을 더보기…

W3C 표준화 제정 단계

W3C 기술문서의 표준화 제정 단계는 웹 기술을 표준화 하기 위해서 W3C의 워킹그룹이 따라야 하는 여러 절차와 요구사항이다. 그리고 각 단계들은 공개된 문서가 최종 권고안으로 발전하기까지 어느 상태에 있는지 알려준다. “Working Draft:초안”과 “Working Group Note:노트”는 표준화 단계 중 시작 단계이고, “Recommendation:권고”, “Working Group Note:노트”, “Rescinded Recommendation:철회 권고”는 작업이 종료되었음을 나타낸다. (“Working 더보기…

[번역] The race for speed part 3: JavaScript compiler strategies

원문 출처 : http://creativejs.com/2013/06/the-race-for-speed-part-3-javascript-compiler-strategies/     JavaScript는 많은 이유로 큰 인기를 누리고 있다. 폭 넓은 사용 범위를 가지고 있고, 개발자의 관점에서 볼 때 아주 빠르고 유연하다.  언어의 모든 것이 객체여서 즉각적으로 구조를 만드는 것이 아주 쉽고 어떠한 데이터 타입도 필요 없다. 데이터 타입을 모두 추론하기 때문이다. 그러나 분명 이러한 다양성은 더보기…

[번역] The race for speed part 2: How JavaScript compilers work

The race for speed part 2: How JavaScript compilers work         우리는 자바스크립트 엔진에 대해 이야기할때 일반적으로 컴파일러를 말한다. 인간이 읽을수 있는 소드 코드(자바스크립트의 경우)를 만들면 컴파일러는 컴퓨터를 위해 이를 기계가 읽을 수 있는 명령어를 생성하는 프로그램이다. 컴파일러가 실행될 때 우리의 코드가 어떤일이 발생하는지 고려하지 않는다면 신비하고 더보기…

글쓴이 julia,

[번역] The race for speed part 1: The JavaScript engine family tree

  The race for speed part 1: The JavaScript engine family tree     요즘에는 브라우저가 js를 빨리 실행하는 일이 자연스럽다. creativejs.com에는 이런 빠른 실행 속도를 실제로 구현할 수 있는 반짝이는 예제가 가득 – 늘 그렇진 않다 – 하다.   웹 브라우저는 더 빠르고 효과적인 웹 브라우징 경험을 제공하기 위해 다양한 컴포넌트를 더보기…

글쓴이 julia,

Flash addCallback으로 인한 IE8 Javascript error

AS3.0은 ExternalInterface라는 클래스의 addCallback 함수를 이용해 javascript에서 호출 가능한 flash 함수를 등록할 수 있습니다.   addCallback을 이용해 함수를 등록하면  플래시는 동적으로 __flash__addCallback(){} 이라는 javascript 함수를 생성하는데요, 이때 함수명을 특정 단어로 등록하면 IE8과 IE6에서 javascript error가 발생합니다.   위 화면처럼 디버깅시 오류화면을 볼 수 있으며, IE8에서 예약어로 지정된 단어를 사용하여 발생하는 더보기…