진동 API의 기본 생각은 게임이나 기타 필요한 경우에 기기를 진동시킴으로써 사용자에게 특정한 내용을 알릴 수 있도록 하는 것입니다. 이 API는 기기에 장착된 진동 장치를 접근하며, 얼마나 오랫동안 진동해야 하는 지를 지정합니다.

예제

기기를 진동시키는 방법은 매우 간단한데, 예제에서 볼 수 있는 것처럼 얼마동안 진동해야하는지를 인수로 지정하면 됩니다. 수치는 100분의 1초 단위입니다.

navigator.mozVibrate(1000);

진동을 제어하는 또 다른 방법은 진동과 멈춤을 번갈아 지정하여 진동 패턴을 지정하는 것입니다. 아래 예제에서 홀수번째 인수가 진동시간이고, 짝수번째 인수는 진동을 멈추는 시간입니다.

navigator.mozVibrate([200, 100, 200, 100]);

그리고, 진동을 멈추고 싶은 경우 다음과 같이 mozVibrate 메소드에 0이나 빈 패턴을 넘기면서 호출하면 됩니다.

navigator.mozVibrate(0);
navigator.mozVibrate([]);

직접 해보기!

진동 API를 지금 테스트 해 보고 싶다면, Firefox 11이 될 예정인 Firefox Aurora에서 해 볼 수 있습니다. 현재, 진동 API는 (당연히) 진동 기능을 지원하는 기기에서만 동작하는데, (대부분의) 안드로이드 폰의 Firefox에서 동작합니다.

주의사항: 안드로이드 기기에서 햅틱 반응 기능을 켜 놓은 상태일 경우 진동 요청이 취소될 수 있습니다.

데모

다음에 나오는 간단한 데모에 테스트를 위해 필요한 코드들을 한데 모아놨습니다. 테스트 해 보시기를 부탁드리며, 아울러 여러분이 생각하는 바를 알려 주시면 고맙겠습니다.

부가설명: 잠시 진동기(Vibrator) API라는 이름을 붙인적이 있습니다. 하지만, 어감이 좋지 않았기 때문에 현재는 진동(Viration) API라고 부르고 있으며, 이는 W3C 진동(Vibration) API 초안과 부합됩니다.

원저자: Robert Nyman – 원문으로 가기

먼저, 아래에 있는 호환성 표를 확인하시기 바랍니다

• Firefox 4.0: Firebug 1.7.3
• Firefox 5.0 – 11.0 : Firebug 1.9
• Firefox 12.0 (nightly) : Firebug 1.10

Firebug 1.10 알파 1이 다음주에 나옵니다. 그 전까지는 Firefox nightly를 위해 Firebug 1.9b6을 사용하면 됩니다.

이번에 추가된 새로운 기능들을 정리해 보면 다음과 같습니다

• Firebug UI 위치 설정
• JSON 응답을 클립보드에 복사하기
• 구문 오류가 난 위치 표시
• 네트워크(Net) 판넬에 새로운 항목 추가: 프로토콜(Protocol)
• 페이지 내에 엘리먼트를 빠르게 제거하는 기능
• 함수 객체의 displayName 속성
• 모든 콘솔 로그에 출처 정보 표시
• HTTP 요청 재전송
• 조건적 중단점을 위한 툴팁
• DOM 판넬의 "Add Watch"
• 브라우저 캐시로부터의 응답 헤더
• 폰트 뷰어
• 폰트 툴팁
• 배열 항목에 대한 툴팁

Firebug UI 위치 설정

Firebug UI를 브라우저 창의 상하좌우 네 곳 모두 중 어느 한 곳에 위치할 수 있게 됐습니다. 단지, 시작 버튼의 팝업 메뉴를 열고 Firebug UI Location(Firebug UI 위치)을 선택한 후 원하는 위치를 선택하면 됩니다.

JSON 응답을 클립보드에 복사하기

AJAX와 JSON을 다루고 계신가요? Firebug는 JSON 응답을 살펴볼 수 있게 해 주고, JSON 트리의 일부를 클립보드로 복사할 수 있게 해 줍니다. 단지 (콘솔이나 네트워크(Net) 판넬이 있는)HTTP 요청을 확장하고, JSON 탭을 선택한 후에 트리의 한 항목을 우클릭하여 문맥 메뉴에서 선택하면 됩니다.

구문 오류가 난 위치 표시

오류가 발생했울 때, 콘솔 판넬에서 구문 오류가 발생한 줄의 정확한 위치를 화살표로 표시합니다.

네트워크(Net) 판넬에 새로운 항목 추가: 프로토콜(Protocol)

네트워크(Net) 판넬에 모든 요청에 대한 HTTP 프로토콜을 보여주는 Protocol 칼럼이 추가됐습니다. 이 칼럼을 사용하면 모든 요청을 프로토콜로 정렬해서 볼수 있습니다. 예를 들어, https 요청만 볼 수 있습니다. 이 칼럼은 기본적으로 보이지는 않습니다. 상단 부분을 우클릭하여 나오도록 설정해야 합니다.

페이지 내에 엘리먼트를 빠르게 제거하는 기능

잘 알려진 요소 검사(Inspector) 기능은 페이지 내에서 선택된 항목을 빠르게 제거할 수 있게 해 줍니다. 특정 요소를 선택한 후 Delete키를 누르면 페이지에서 현재 선택된 항목을 제거할 수 있습니다.

함수 객체의 displayName 속성

Firebug also supports a displayName function object property. You can use this property to specify custom function name for anonymous functions. Firebug is consequently using that property to display stack traces.

Firebug는 또한 displayName이라는 함수 객체의 속성을 지원합니다. 이 속성은 익명 함수의 이름을 지정할 때 사용할 수 있습니다. 그로 인해 Firebug는 스택 추적을 보여줄때 이 속성의 이름을 사용합니다.

모든 콘솔 로그에 출처 정보 표시

이 부분은 간단한 새로운 기능입니다. 콘솔에 보여지는 모든 로그는 자신의 출처를 갖습니다(파일 url과 줄 번호). 당연히 Firebug는 출처 링크를 클릭하면 바로 소스틀 보여줍니다.

HTTP 요청 재전송

네트워크(Net) 판넬에 있는 HTTP 요청을 재전송할 수 있습니다. 원하는 항목을 우클릭한 후 메뉴에서 Resend을 선택하면 됩니다. 쉽고 멋집니다!

조건적 중단점을 위한 툴팁

스크립트(Script) 판넬은 조건적 중단점을 위한 툴팁을 표시합니다. 중단점에 대한 조건을 보기 위해서 조건 편집기를 열 필요가 없습니다.

DOM 판넬의 "Add Watch"

DOM 판넬의 문맥 메뉴에 Add Watch 명령이 새롭게 추가됐습니다. 이 명령은 개발자가 특정한 객체나 필드(구조상 서너 단계 깊이도 가능)를 찾아 바로 스크립트(Script) 판넬의 Watch 창에 추가하여 해당 객체나 필드를 자세히 보거나 계속 관찰할 수 있게 해 줍니다.

브라우저 캐시로부터의 응답 헤더

네트워크(Net) 판넬은 이제 브라우저 캐시로부터 온 응답에 대해서도 HTTP 헤더를 보여줍니다. HTTP 요청을 클릭하여 확장한 후 헤더 탭을 클릭하면 (캐시로부터 온 응답인 경우)아래 쪽에 새로운 섹션이 있습니다

폰트 뷰어

Firebug는 이번에 네트워크(Net) 판넬과 결합된 (*.woff 파일들을 위한)폰트 뷰어를 추가했습니다. 웹 페이지가 폰트 파일을 로딩하는 경우 해당 페이지 요청을 확장하면 다운로드된 폰트에 대한 모든 메타 데이터를 볼 수 있습니다. 멋지죠!

폰트 툴팁

디자이너를 위한 또하나의 좋은 지원이 있습니다. CSS 판넬(또는 스타일 사이드 판넬)에서 폰트에 마우스 커서를 올리면 폰트를 미리볼 수 있는 툴팁을 볼 수 있습니다.

배열 항목에 대한 툴팁

또 하나의 실용적인 기능 향상은 툴팁을 이용하여 배열을 살펴보고 디버깅하는 것도 관련돼 있습니다. 배열의 대괄호에 마우스 커서를 가져가면 캡쳐 화면처럼 배열에 들어 있는 실제 값을 볼 수 있습니다.

지금 만나보세요!

Honza

원저자: Jan Odvarko – 원문으로 가기

이를 통해 얻은 형태 정보는 보다 효율적인 코드를 생성하기 위해 JIT 컴파일 중에 이용됩니다. Firefox 9 에서는 추론된 형태 정보를 JagerMonkey JIT 컴파일러로 활용하도록 개발되었습니다. Firefox 9 에서는 기본으로 형태 추론을 이용한 컴파일 모드를 사용하여 Kraken 나 V8 등 주요한 벤치마크에서는 30%이상 속도가 빨라져 JavaScript 처리가 무거운 웹 사이트에서의 엄청난 속도 증가가 예상됩니다.

JavaScript는 동적형 언어이며, 값의 형태를 모르면 JIT 컴파일러는 그 값이 모든 형태의 경우를 고려한 코드를 생성할 필요가 있습니다.이 때문에 Java 등의 정적형 언어에 비하면 프로그램의 실행 속도가 꽤 늦어집니다. JagerMonkey에 형태 추론을 도입함으로서 성능 향상이 상당히 제공될 수 있습니다.

추론된 형태 정보를 pool 형태로 활용하기 위해 현재 다수의 프로젝트가 진행중입니다. 그 중에서도 특히 Mozilla 의 차세대 JIT 컴파일러 IonMonkey 프로젝트에서는 Java와 퍼포먼스의 차이를 완전하게 없애는 일을 목표로 하고 있습니다. 형태 추론으로 이용되고 있는 내부의 알고리즘이나 테크닉에 대해서는 아래 논문을 살펴봐 주시기 바랍니다.

Fast and Precise Hybrid Type Inference for JavaScript

원문: Type Inference brings JS improvements to Firefox Beta
by Brian Bondy, Firefox Engineer

분명히 얘기하지만, 이 글은 변경에 관한 정식 목록이 아니고 단지 주요 변화를 언급하는 글입니다. 언제나 그렇듯이 우리는 웹 개발자들이 내용을 알 수 있도록 변경된 사항을 확인할 수 있는 페이지를 만들었습니다. 전체 목록은 Firefox 7 for developers page를 보기 바랍니다.

Firefox에서 text-overflow: ellipsis를 지원합니다.

Firefox는 이제 text-overflow 속성에 ellipsis모드를 지원합니다. 이 속성은 다른 브라우저들에서도 지원하고 있기 때문에 개발자들은 이제 실무에서 이 속성을 사용할 수 있습니다. 다음은 text-overflow: ellipsis가 어떻게 동작하는지 보여주는 예입니다.

HTML:

<html>
<body>
      <div class="inner">I am some very long text!</div>
</body>
</html>

CSS:

div.inner {
    width: 120px;
    text-overflow: ellipsis;

    white-space:nowrap;
    overflow:hidden;
 
    color: red;

    border: 1px dashed #333;
    margin: 20px;

    padding: 10px;
}

결과:

결과에서 볼 수 있는 것처럼, 이 새로운 속성을 사용하여 텍스트를 적절히 잘라 표시하는 것은 매우 쉽습니다. 속성들을 설명하는개발자 페이지에는 다른 브라우저들을 위한 예제 구문이 포함돼 있습니다.

웹소켓: 프로토콜이 갱신되었고 모바일에서 사용 가능합니다.

먼저, Firfox 모바일 버전에서 웹소켓을 기본으로 사용할 수 있게 됐습니다. 지연 시간이 길고 초기 연결 설정 비용이 큰 모바일 네트워크를 위해, 웹소켓은 HTTP 폴링보다 훨씬 나은 경험을 갖게할 수 있는 기회를 제공합니다.

두 번째로 IETF의 웹소켓 프로토콜 초안 가장 최신 버전을 적용했습니다. 다소 혼란스럽게도, 프로토콜의 버전은 8인데 반해 초안의 버전은 10입니다. 이 내용은 웹 소켓과 툴 상에서 애플리케이션을 개발하는 사람들에게는 촉각을 세우게 하는 소식일 것입니다. 하지만, 하위 호환성(backwards compatibility)을 유지하기 때문에 크게 염려하지 않아도 됩니다.

웹소켓 개발은 계속 진행중이기 때문에, 웹소켓을 위한 이름공간(namespace)에는 아직 최종본이 아니라는 의미로 moz- 가 앞에 붙습니다.

훨씬 더 빨리진 캔버스(Canvas) 엘리먼트

Firefox 7에서 canvas 엘리먼트는 보다 더 빨라졌습니다. 우리는 이전 버전의 Firefox와 사람들이 실제로 캔버를 어떻게 사용하는지 알게된 것을 토대로 캔버스를 위한 코드를 변경했습니다. 캔버스 엘리먼트를 사용하여 그릴때, 다양한 데모를 통해서 보다 멋진 성능을 내도록 할 수 있습니다. 예를 들어, Runfield 데모를 보시기 바랍니다.

웹 사이트가 더 이상 주 브라우저 창의 크기를 조정할 수 없습니다.

다음에 나오는 규칙 따라 브라우저에서 웹사이트를 위해 더 이상 기본 창 크기를 변경할 수 없습니다.

1. 창(window)이나 window.open으로 생성되지 않은 탭은 크기를 변경할 수 없습니다.
2. 하나 이상의 탭을 가진 창 안에 있는 경우 창이나 탭의 크기를 변경할 수 없습니다.

새로운 네비게이션 웹 타이밍(Navigation Web Timing) 명세 지원

Firefox 7은 이제 네비게이션 타이밍 명세를 지원합니다. 이 명세는 웹 페이지를 만든 사람이 페이지 자체 내에서 웹 페이지 성능을 관찰할 수 있게 해 줍니다. 페이지의 적재 및 이동 성능에 대해 관심 있는 사람들을 위해, 실제 성능을 향상 시킬 수 있는 정보를 서버로 전송할 수도 있습니다.

이 영역에 대해서는 두 가지 정도의 다른 명세 – 사용자 타이밍과 자원 타이밍 – 가 더 있습니다만, 아직 워킹그룹에서 논의 중에 있고, 그에 따라 우리도 아직 구현하지 않았습니다.

원저자: Christopher Blizzard – 원문으로 가기

현재 상황

현재 우리가 있는 지점은, 웹과 네이티브 API간에 명확한 차이가 있다는 것과 장착될 기능들을 어떻게 구현되야 하는가 알고 있는 것입니다. 많은 개발자들이 인지하고 있는 것처럼, 우리는 단지 특정 기기나 제조사에 국한된 것이 아니라, 여러 브라우저와 운영체제 그리고, 단말기에서 일관되게 동작하는 API가 필요합니다. 웹을 다음 단계로 이끌 방법이 필요합니다.

WebAPI?

WebAPI는 웹과 네이티브 API를 연결하기 위한 모질라의 노력이며, 운영체제에 상관없이 모든 브라우저에서 동작하는 일관된 API를 갖고 있습니다. 명세 초안과 구현 프로토타입이 곧 사용가능하며, 표준화를 위해 W3C에 제출될 것입니다. WebAPI에서 보안은 매우 중요한 요소입니다. 이를 위해 현재의 보안 수준에 준하는 기능들을 채용하거나(예, 지오로케이션처럼 사용자에게 권한 요청), 새로운 대안이 적용될 것입니다.

근 시일내에 개발될 기능들은 다음과 같습니다.

• Dialer: Telephony & Messaging API, Contacts API
• Address Book: Contacts API
• SMS: Telephony & Messaging API, Contacts API
• Clock
• Camera: Camera API, Filesystem API
• Gallery: Filesystem API (could possibly be FileReader & FileWriter in conjunction)
• Calculator
• Settings: Device Status API, Settings API
• Games: Accelerometer API, Mouse Lock API
• Maps: Geolocation API, Contacts API

참여

우리는 외부에 참여를 원하는 재능 있는 분들이 매운 많다는 것을 알고 있습니다. 그러므로, 다음과 같은 방법들로 즐겁게 참여해 주시기 바랍니다.

• WebAPI 프로젝트 페이지를 계속 주시
• WebAPI 메일링 리스트.
• IRC: #webapi 방의 irc.mozilla.org
• bug 67392로 가서 도움이 필요한 의존적인 버그를 살피기

개발자 채용

우리는 또한 WebAPI를 작업할 몇 명의 전시간 개발자를 채용하고 있습니다.채용 정보를 읽어보시고 지원해 주세요.

원저자: Robert Nyman – 원문으로 가기

Set-Cookie 헤더 처리 버그 수정

Set-Cookie 헤더의 path에 대해 이중 인용부호를 포함한 경우의 해석 처리가 수정됩니다.

지금까지 Set-Cookie 헤더로 path 를 지정할 때 값에 이중 인용부호(“)가 포함되어 있었을 경우, 그것은 리터럴의 path 값의 일부로서 해석되고 있었습니다. 그러나, RFC표준에서는 이중 인용부호는 quoted-string 를 딜리미터로서 정의되고 있어 Firefox 6 에서는 사양 그대로의 해석을 따라갑니다.

document.width/height 폐지

document.width 및 document.height 프로퍼티는 폐지됩니다.향후 body 요소의 width/height 스타일 값을 이용하시기 바랍니다.

document.width/height 프로퍼티는 표준이 아니며 Opera 나 IE 등의 브라우저에서는 지원 되지 않습니다. 브라우저와의 호환성 때문에 DOM 0 프로퍼티 지원은 중단됩니다.

아래와 같이 body 요소에 대해서 getComputedStyle()를 사용해 주시기 바랍니다.


var body = document.getElementsByTagName('body')[0];
var width = window.getComputedStyle(body, null).width);


window.top 읽기 전용

지금까지 글로벌 변수 top (windows.top)은 읽기 전용 프로퍼티가 아니라 임의 변수를 대입 되어 있었으나, Firefox 6 에서는 오류 처리됩니다.

글로벌 변수 top (window.top)은 window.open() 메소드로 열리는 윈도우 계층의 최상위 윈도우를 나타내는 것이고, Firefox 5 까지는 이것에 임의의 값이 대입도어 있었습니다.(윈도우 계층에는 영향을 주지 않음)

다른 많은 브라우저에서는 window.top에 임의의 값을 대입하지 못하고, 다음과 같이 잘못하여 var를 쓰지 않고 코드를 만들면, Firefox 만으로 동작하는 호환성 문제가 생기는 코드가 됩니다.


top = document.body.offsetTop;
top +=5;
myDiv.style.top = top + "px";


이 때문에 Firefox 6 에서는 window.top은 읽기 전용 프로퍼티로서 값을 대입할 수 없게 됩니다.

호환 모드 .classname:hover 유효함

지금까지 호환 모드에서 무효였던 클래스 선택자 :hover 유사 클래스가 유효하게 됩니다.

이전에는 호환 모드(Quirks Mode)에서는 .classname:hover와 같이 클래스 선택자에 :hover 유사 클래스를 사용한 선택자는 사용하지 않습니다. 하지만, 최근 다른 브라우저의 Quirks Mode가 삭제되고 있기 때문에 호환성이기 때문에 Firefox 6 이후 호환 모드에서는 이 유사 클래스가 유효합니다.

편입 함수로서 new 사용 불가능

일부 편입 함수에 대해서 new eval()와 같이 new 연산자가 사용할 수 없게 됩니다.

지금까지 표준 사양에서는 허가되어 있지 않았지만, 실제로는 eval, parseInt, Date.parse 등의 함수에 대해서 new 연산자를 사용할 수 있었으나, 앞으로는 불가능하게 됩니다. 공식적으로 이를 주로 사용하지 않았기 때문에 호환성의 문제를 일으킬 것은 없을 것입니다.

addEventListener()의 제 3 인수 생략 가능

addEventListener()나 removeEventListener()에서는 지금까지 필수로 되어 있던 제 3 인수 useCapture는 생략 가능합니다.

addEventListener() 이벤트 useCapture의 제 3 인수는 지금까지 사양에서도 Firefox 구현에서도 필수로 되어 있었으나, 웹킷(WebKit)에서는 이를 생략 가능하게 하고 있어 호환성 문제가 발생하고 있었습니다. Firefox 6 이후의 구현을 고쳐 useCapture 속성을 생략 가능하게 하게 되었습니다.

기존 Firefox 지원 웹 페이지에서는 문제가 없지만 웹킷에서만 되던 홈페이지들 일부가 Firefox 에서도 동작하게 됩니다.

canvas내 width/height를 0px 로 설정 가능

canvas의 width/heigth에 0px 는 지정할 수 없었으나 Firefox 6 에서는 설정 가능합니다. 지금까지는 0px 를 지정하면 무시되어 300px 로서 처리되고 있었습니다.

textarea 포커스 시 커서 선두로 위치

Firefox 6에서는 textarea에 포커스 했을 때 기본 커서 위치가 입력 끝난 텍스트의 끝이 아니고 선두가 됩니다

다른 브라우저와의 호환성이기 때문에 변경되었습니다. 커서의 기본 위치에 의존하고 있는 코드를 이용하고 있는 경우는 수정이 필요합니다.

input 텍스트 maxwidth 속성 폐지

input 요소로 입력 텍스트를 제한하는 size 속성 뿐만이 아니라 maxwidth도 이용할 수 있었으나 앞으로 size 속성 밖에 사용할 수 없게 됩니다.

이는 XUL 요소 속성이 HTML 요소에도 같이 구현되면서 생긴 문제이고, HTML 사양에도 반하는 것이라 maxwidth 속성은 폐지됩니다. (물론 HTML은 아니고 XUL에서는 계속해 사용할 수 있습니다).

비지원 속성과 프로퍼티 대개 폐지

구현되지 않거나 완성되지 않은 상태에 있던 속성과 프로퍼티를 폐지합니다.

• navigator.securityPolicy 프로퍼티
• CSS 의 azimuth 프로퍼티
• DocumentType 객체의 entities, notations 프로퍼티
• document.domConfig 프로퍼티
• document.strictErrorChecking

더 자세한 것은 https://developer.mozilla.org/En/Firefox_6_for_developers (영문)을 참고하시기 바랍니다.

가장 최근에 “오~!!”하면서 놀란 것은 아모스 웽거와 젠스 노커트, 매티아스 조지가 만든 jsmad(GitHub에 있는 소스)입니다. JSMad는 자바스크립트로 만든 MP3 디코더입니다!

“그게 뭐?”라고 말하실지 모르겠는데요, JSMad가 만들어졌다는 의미는 Firefox가 플래시 없이 MP3를 플레이할 수 있다는 뜻입니다. 또한, 리눅스 상에서 64bit 문제 없이 브라우저로 MP3를 들을 수 있다는 얘기입니다. JSMad와 함께하면 MP3 형식을 좀 더 깊게 살펴볼 수 있고, 음악을 플레이할 뿐만 아니라 MP3에 대한 정보도 얻을 수 있습니다. 아마, 머지않은 장래에 순수하게 브라우저에서 동작하는 DJ 믹서나, 샘플러, 시퀀스 프로그램들을 만들 수 있을 것입니다.

현재, JSMad는 Firefox 4 이상의 버전과 about:flags를 통해 웹 오디오 API를 활성화한 크롬 13버전 이상에서 동작합니다.

MP3가 처음 나왔을 때가 기억나네요. 그 당시에 제 컴퓨터는 너무 느려서 윈앰프만 하나만 실행시켜야 겨우 MP3 인코딩을 할 수 있었습니다. 당시에, 씬 플레이어(a scene player)가 저를 구출해줬던 기억이납니다. 이제, 우리는 같은 작업을 데스크톱 애플리케이션이 아닌 브라우저 내에서 할 수 있습니다.

원저자: Chris Heilmann – 원문으로 가기

Firefox 4 이후 부터 빠른 출시 주기로 인해 새로운 버전이 6주마다 정식 출시됩니다. 대부분 웹 페이지 호환성이 유지하도록 개발하고 있으나 최신 웹 표준 대응 및 다른 웹 브라우저와 호환성 확보를 위해 세부적인 부분이 조금식 변경됩니다. Firefox 5에서 바뀌는 부분을 간단하게 요약하였습니다.

더 자세한 것은 https://developer.mozilla.org/En/Firefox_5_for_developers (영문)을 참고하시기 바랍니다.

JavaScript 예약어 (다시) 추가
Firefox 5에서 차세대 다음의 키워드를 예약어로 추가됩니다 : class, enum, export, extends, import, super

Firefox 4에서는 strict 모드 이용 때만 이들을 예약어로 간주하나, Firefox 5는 strict 모드를 해제 시에도 예약어로 되고 따라서 이 키워드는 변수 이름으로 사용할 수 없습니다. (참고 문서)

엄격해진 JSON.parse () 구문
Firefox 5에서 JSON 문자열로 8진수 리터럴 (예 : JSON.parse (’0123 ‘)), 소수점 이하 생략 숫자 (예 : JSON.parse (’1′))는 허용되지 않습니다

ECMAScript 5th 사양에 JSON 지원이 추가되고, JSON.parse ()로 JSON 문자열 구문 해석이 이전보다 RFC 사양에 맞추어 바뀌게 됩니다. 그 결과 지금까지 사용 위반을 허용한 것을 오류로 처리합니다.

또한, 문자열에 직접 탭 문자를 포함(예 : JSON.parse ( ‘ “… \ t …”‘))는 Firefox 4 허용되지 않게되어 있습니다. 물론, 데이터 탭 문자로 취급할 수없는 것은 없습니다. JSON.parse ( ‘ “… \ \ t …”‘)와 같이하십시오. 또는 JSON으로 전달할 문자열 값 데이터에 다른 제어 문자를 포함하려면 Unicode 이스케이프를 사용합니다. 예를 들어 탭 문자이면 JSON.parse ( ‘ “… \ \ u0009 …”‘)처럼 \ u 뒤에 4 자리의 16 진수 코드를 지정합니다.
setTimeout ()의 최소 시간이 변경됩니다

setTimeout () 최소 시간 변경
Firefox 5에서 setTimeout ()에서 지정하는 최소 시간이 10ms에서 4ms로 단축됩니다. 한편 백그라운드 탭에서는 최대 1 초 1 회까지 밖에 호출되지 않습니다.

setTimeout () 및 setInterval ()로 지정하는 최소 시간은 HTML5에서 4ms로 규정 되었기 때문에 이에 맞추었습니다. JavaScript에서는 다수의 타이머를 사용하면 처리가 무거워되는 것으로 알려져 있습니다. 초당 수백 번 타이머 호출하는 페이지도 드물지 않아서 웹 페이지 낭비를 줄이기 위해 호출 간격에 제한이 있습니다.

애니메이션 타이머를 이용하는 경우, 빠른 애니메이션이 가능한 Request Animation Frame의 사용을 권장합니다 (Chrome도 동참하여 비슷한 기능을 지원 중임).

참고 : 다른 브라우저에서 타이머 사양 변경이 행해지고 있습니다. IE9에서는 일반적 4ms (배터리 동작 시에는 10 ~ 15ms, Canvas 렌더링 처리를 수반하는 경우는 약 3ms (사양 위반), Chrome 11 이후 Firefox 5 마찬가지로 백그라운드 탭에서 최대 1 초 1 시간까지 제한됩니다.

Blob의 slice () 메소드 제거
Firefox 5에서 Blob (및 파생된 File) 인터페이스에서 slice () 메소드가 제거되고 대신 인수의 취하는 방법이 다른 mozSlice () 메소드 추가를 통해 해결합니다.

기존의 Blob 인터페이스는 Array.slice ()와 String.slice ()와 인수의 취하는 방법이 다르게 표준 변경이 진행될 전망에서 그것에 맞게 구현을 변경했습니다.

Canvas 예외 처리 변경
Canvas 2D API 기능 중 translate (), transform (), rect (), clearRect () fillRect () strokeRect (), lineTo (), moveTo (), quadraticCurveTo (), arc () 메서드 호출 또는 globalAlpha 속성 잘못된 값을 준 경우 예외를 발생했지만, Firefox 5에서 아무것도하지 않고 그냥 무시됩니다.

WebGL 외부 도메인 리소스 사용 중단
Firefox 5에서 WebGL 텍스처 이미지에도 같은 도메인에서만 사용 가능하고, 다른 사이트의 이미지를 가져오려면 CORS를 사용해야합니다.

WebGL에서 텍스처 이미지 처리 시간을 측정하여 JavaScript에서 크로스 도메인 이미지 읽기가 가능하다 등의 보안 문제가 지적 되었기 때문에 그 문제를 해결하기 위해 현재 규격보다 엄격한 제한을 도입하게 했습니다. 자세한 내용은 다음 페이지를 참조하십시오 :

정규 표현식 함수로 호출 금지
Firefox 5에서 /RegExp/( “string”)와 같은 정규식 개체를 함수로 호출해서 사용할 수 없게됩니다. 원래 표준 사양도 없고 문서화되지도 않은 기능이었습니다. Firefox의 구현에 따라 WebKit에서도 지원되고 있었지만, 이번에 지원 중단합니다.

UTF-7, UTF-32 지원이 폐지
문자 인코딩 UTF-7 및 UTF-32는 HTML5 스펙에서는 지원되지 않습니다. 실제로 사용되고있는 것도 거의없고, 표준 준수를 위해 이러한 인코딩 지원은 폐지됩니다.

Keep-Alive 헤더 전송 안함
지금까지 Kee-Alive 요청 헤더를 보내 왔지만 형식이 잘못 된데다 원래 Connection 또는 Proxy-Connection 요청 헤더의 값으로 keep-alive를 지정하고 있었기 때문에 중복 트래픽이라 판단 하여 제거합니다.

경과
Firefox는 현재 모든 데스크톱 플랫폼에서 WebGL라는 기술을 지원하고 있습니다. Web 개발자는 WebGL은 텍스처와 쉐이더를 이용한 빠른 3D 그래픽을 사용할 수있게됩니다. 향후 Doom 3 혹은 World of Warcraft, 실질적으로는 iPhone, OS X, Android, Linux에서 실행되는 모든 게임과 같은 기능을 제공하는 것입니다.

Context IS사를 포함한 보안 전문가 (크로스 도메인 이미지 로드에 대한) WebGL 사양에서 Firefox 특정 구현에 대한 보안 문제를 발견했습니다. 다른 보안 문제 마찬가지로 바로 수정하고, WebGL의 본질적인 보안 이슈에 대해 논의할 예정입니다.

적용

본 문제로 인해 WebGL 스펙이 바로 업데이트되어 Mozilla에서도 Firefox 5 에서 바로 구현되었습니다.

이 문제를 피하는 방법으로 COPS를 이용하는 방법이 명시되어 있으나, Firefox의 주요 관심사는 보안 이슈에 적극적이고 빠르게 대응하는 것입니다. 이 때문에 일부 WebGL 사이트의 기능이 동작하지 않을 수 있습니다.

이번 글은 사이먼이 파일 API와 Firefox 4에서 새롭게 소개된 slice() 메소드를 가지고 실험한 내용입니다. 여기에 사이먼이 구현한 파일 업로드를 재개방법이 설명돼 있습니다.

XHR 레벨 2 객체를 사용하면 파일을 업로드 할 수 있습니다. 이 객체는 요청(예: 파일 전송, 전송 과정 확인)과 응답(예: 업로드가 성공했는지 아니면 오류가 발생했는지)을 다루는 서로 다른 이벤트와 메소드를 제공합니다. 더 자세한 정보는 HTML5 이미지 업로더 개발 방법을 읽어보시기 바랍니다.

아쉽게도, XHR 객체는 업로드를 중단하거나 재개하는 메소드를 제공하지 않습니다. 하지만, 새로운 File API의 slice() 메소드와 XHR의 abort() 메소를 조합하면 이를 구현할 수 있습니다. 그 방법을 함께 알아 봅시다.

라이브 데모

파일 업로드 라이브 데모를 여기에서 확인하거나, github.com에서 자바스크립트와 PHP 코드를 다운로드 할 수 있습니다.

업로드 중단과 재개

기본적인 생각은 사용자에게 진행중인 업로드를 중단하고 후에 다시 재개할 수 있는 버튼을 제공하는 것입니다. 요청을 중단하는 것은 간단합니다. 간단히, abort()를 메소를 통해 요청을 중단합니다. 다만, 주의할 점은 요청을 중단할 때, 사용자 인터페이스에서 이를 오류로 표시하지 않아야 한다는 것입니다.

더 어려운 부분은 요청이 중단 되고 연결이 닫힌 후에 업로드를 재개하는 부분입니다. 파일 전체를 다시 전송하는 대신에 blob의 slice() 메소를 사용하여 파일의 나머지 부분을 포함하는 덩어리(chunk)를 만들 것입니다. 그런 후에 새로운 요청을 만들고, 그 덩어리를 전송하며 이를 이전 요청이 중지 됐을 때 서버에 저장된 부분에 추가할 것입니다.

나머지 부분(chunk) 만들기

파일 나머지 부분(chunk)은 다음과 같이 만들 수 있습니다.

var chunk = file.slice(start, length);

파일을 자르기 위해 필요한 정보는 자를 시작점입니다. 즉, 이미 업로드된 바이트 수를 알아야 합니다. 가장 쉬운 방법은 요청을 중단하기 전에 ProgressEvent의 loaded 속성의 값을 저장하는 것입니다. 하지만, 이 값은 실제 서버에서 저장된 바이트 수와 일치하지 않을 수 있습니다. 가장 신뢰있는 접근 방법은 추가적인 요청을 통해 서버에 실제 저장된 바이트 수를 받는 것입니다. 그런 후에 이 정보를 가지고 파일을 자르고 전송할 덩어리(chunk)를 만듭니다.

흐름 정리

(업로드가 이미 진행 중이라고 가정합니다)

1. 사용자가 업로드를 멈춘다
2. UI 상태는 멈춤 상태로 설정된다
3. 업로드를 중단한다
4. 서버에서 디스크에 파일 쓰는 작업이 중단된다
5. 사용자가 업로드를 재개한다
6. UI 상태는 재개로 설정된다
7. 서버로부터 이미 저장된 파일 크기를 얻는다
8. 파일의 남은 부분을 자른다(덩어리)
9. 남은 부분(chunk)을 업로드한다
10. UI 상태를 업로드 중으로 설정한다
11. 서버는 데이터를 추가로 붙인다

자바스크립트 코드

// 방금 막 이미 써진 바이트 수를 알기위해 요청했고,
// xhr.result에 서버의 응답이 xhr.result에 담겨 있다고 가정.
var start = xhr.result.numWrittenBytes;
var length = file.size - start;

var chunk = file.slice(start, length);
 
var req = new XMLHttpRequest();

req.open('post', 'fnc.php?fnc=resume', true);
 
req.setRequestHeader("Cache-Control", "no-cache");

req.setRequestHeader("X-Requested-With", "XMLHttpRequest");
req.setRequestHeader("X-File-Name", file.name);

req.setRequestHeader("X-File-Size", file.size);
 
req.send(chunk);

PHP 코드

서버에서 일반적인 업로드와 재개된 업로드를 다루는데 있어 유일하게 다른 점은, 후자의 경우 파일을 새로 생성하는 대신에 기존의 파일에 데이터를 추가한다는 것입니다.

$headers = getallheaders();
$protocol = $_SERVER[‘SERVER_PROTOCOL’];

$fnc = isset($_GET['fnc']) ? $_GET['fnc'] : null;

$file = new stdClass();
$file->name = basename($headers['X-File-Name']));

$file->size = $headers['X-File-Size']);
 
// php://input 은 php.ini 설정을 무시하기 때문에, 파일 크기를 직접 제한해야함 
$maxUpload = getBytes(ini_get('upload_max_filesize'));

$maxPost = getBytes(ini_get('post_max_size'));
$memoryLimit = getBytes(ini_get('memory_limit'));

$limit = min($maxUpload, $maxPost, $memoryLimit);
if ($headers['Content-Length'] > $limit) {

  header($protocol.' 403 Forbidden');
  exit('File size to big. Limit is '.$limit. ' bytes.');

}
 
$file->content = file_get_contents(’php://input’);
$flag = ($fnc == ‘resume’ ? FILE_APPEND : 0);

file_put_contents($file->name, $file->content, $flag);
 
function getBytes($val) {

 
$val = trim($val);
      $last = strtolower($val[strlen($val) - 1]);

      switch ($last) {
          case 'g': $val *= 1024;

 
case 'm': $val *= 1024;
 
case 'k': $val *= 1024;

      }
 
return $val;
}

Caution!

주의!

위에 있는 PHP 코드 예제는 보안 관련 부분이 전혀 업습니다. 사용자는 어떠한 유형의 파일이라도 여러분의 서버에 쓰거나, 붙여 쓰거나, 덮어 쓸 수 있습니다. 그러므로, 여러분의 웹 사이트에 업로드 기능을 사용할 때는 적절한 보안 정도를 분명히 적용해야 합니다.

오류가 발생한 후에 업로드 재개

업로드 중단 및 재개 흐름은 네트워크 오류가 발생한 후에 업로드를 계속하고자 할 때도 사용할 수 있습니다. 전체 파일을 다시 업로드 하는 대신에 서버로부터 이미 쓰여진 파일 크기를 받고 남은 크기 만큼을 덩어리로 자릅니다.

중지 했거나 전송이 끊긴 파일 업로드를 재개할 때 기억할 점

요청이 중단됐을 때 서버에서 뭘 쓰는지 안 쓰는지까지 모두 제어할 수 없기 때문에, 이미 올라간 파일에 데이터를 추가하는 작업은 파일을 깨지게 할 수 있습니다.

브라우저 충돌 후에 업로드 재개

업로드 중단 및 재개 기능을 보다 나아가서 사용할 수 도 있습니다. (적어도 이론적으로) 브라우저가 뜻하지 않게 종료되거나 충돌이 일어나 업로드가 중단된 경우에도 이를 복구하는 것이 가능합니다. 문제점은 브라우저가 닫힌 후에는 메모리로 읽어들인 파일 객체가 사라진다는 것입니다. 그러므로, 업로드 재개를 위해 파일을 자르기 전에 사용자가 먼저 파일을 다시 선택하거나 드래그 해야 합니다.

다른 방법으로, 새로운 IndexedDB API를 사용하여 업로드가 끝나기 전에 파일을 저장할 수 있습니다. 그러면, 브라우저 충돌이 일어난 후에 데이터베이스로부터 파일을 읽어와 업로드 안 된 부분을 자르고 업로드를 재개할 수 있습니다.

원저자: Paul Rouget – 원문으로 가기