도전! JavaScript TDD – 2. TDD 리듬

  우선 이야기를 시작하기에 앞서, 이전에 작성했던 코드를 다시 한 번 살펴보자. 아래는 모델 코드다. 모델 코드는 테스트 코드에 대응하는 실제 구현 코드를 말한다. function VendingMachine() {}; VendingMachine.prototype = { _htProducts : { “Coke” : “Coke”, “Sprite” : “Sprite”, “Orange Juice” : “Orange Juice”, “Apple Juice” : “Apple Juice” }, 더보기…

Javascript Mobile Events의 이해

W3C의 터치 이벤트 지금까지 HTML 및 Javascript 등의 웹 표준 기술은 마우스와 키보드만 고려한 사용자 인터페이스 이벤트만 지원했습니다. 그러나 스마트폰이나 태블릿 등의 보급으로 화면을 손가락이나 펜으로 조작하는 일이 많아지면서 멀티 터치 조작과 같은 마우스 및 키보드와는 다른 형식의 조작을 감지 할 수 있도록 하는 새로운 이벤트 사양을 책정 할 필요가 더보기…

글쓴이 UYEONG,

speech Input

speech Input은 현재 Chrome(Google)에서 제공하고 있는, Input의 새로운 방법으로 Mic를 사용할 수 있도록 하는 Input이다. 사용법은 하기와 같다. <input type=”text” x-webkit-speech> Speech Input은 Chrome 브라우저에서만 작동하는데, 그 이유가 궁금했다. 관련된 내용을 찾다가, Android 개발자 페이지에서 재미있는 내용을 찾았는데, (이게 웹 관련 이슈는 아니지만 Speech 공통 이슈로 파악된다) Google’s servers currently 더보기…

[번역] ECMA-262-3 in detail. Chapter 5. Functions.

원문 출처 : ECMA-262-3 in detail. Chapter 5.Functions. by Dmitry Soshnikov       소개(Introduction) 이번 글에서는 ECMAscript의 객체 중에 하나인 함수(Function)를 알아보고, 함수에는 어떠한 것들이 있는지 설명한다. 함수가 콘텍스트의 변수 객체(Variables object)에 어떠한 영향을 미치며, 각 함수의 스코프 체인에는 무엇이 들어가는지도 알아볼 계획이다. 다음과 같은 질문을 자주 받는다.   첫 더보기…

도전! 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 더보기…