Boot to Gecko 프로젝트

프로젝트가 어떻게 구성돼 있는지 살펴보는 것으로 시작하겠습니다.

목표

Boot to Gecko는 모바일 기기를 위한 모질라의 오픈 소스 웹 기반 운영 체제입니다. B2G는 2012년 2월 MWC(Mobie World Congress)에서 소개된 오픈 웹 디바이스 플랫폼을 위한 프레임워크입니다.

기술

Boot to Gecko 아키텍처는 앱을 개발할 때 특정 플랫폼에 종속된 API의 필요성을 제거합니다. HTML5를 사용하여 개발자들은 모든 곳에서 직접 웹을 대상으로 개발합니다. 개발자들은 특정 플랫폼에 종속된 제약이나 규칙에 구애받지 않고 놀라운 사용자 경험과 앱을 만들 수 있습니다.

접근 가능한 개방된 표준들

모든 모질라의 프로젝트들 처럼, 소스 코드는 오픈 소스이며, 프로젝트는 전적으로 개방된 표준을 기반합니다. 개방된 표준이 놓치고 있는 분야(전화, SMS, 카메라, 블루투스, USB, NFC 포함)에서 모질라는 이들에 대한 표준 제정을 위해 표준 기구나 여타 다른 업체들과 협업하고 있습니다. 더 많은 정보를 위해 모질라와 모바일 웹 API의 발전을 읽어 보시기 바랍니다.

다음은 B2G 프로젝트 개발자들의 (여러 언어들이 섞인) 수 많은 인터뷰입니다.

HTML5로 동영상을 보기위해서는 유투브의 동영상 플레이어를 설치하세요.

오늘 MWC(Mobile World Congress)에서 발표된 것처럼, 오픈 웹 디바이스에 대해서 매우 놀라운 소식이 있습니다. 우리는 통신업체인 텔레포니카(Telefónica)와 협업을 하게 될 것입니다. 자세한 내용은 언론에 보도된 내용에 상세히 나오는 것처럼 협업의 목적은 다음과 같습니다.

• 피처폰 가격으로 스마트 폰 기능을 제공하는 오픈 웹 기반의 HTML5 기기
• W3C에 표준으로 제출되도록 하고, 기술을 개방하는 것
• 애플리케이션 개발자들에게 새로운 기회를 열어주고, HTML5를 교차 플랫폼을 표준으로 만들어 가는 것

퀄컴 칩셋에 기반하여, 모질라, 텔레포니카, 퀄컴은 기능이 풍부한 프로토타입 플랫폼을 제공하기 위해 공동 작업할 것입니다. 이미 웹 브라우저는 HTML5 테스트에서 317점을 얻었습니다. 그리고, 이 플랫폼이 쓸만해졌을 때, (텔레포니카의 카를로스 도밍고에 의하면) Boot to Gecko 폰은 아이폰보다 열배 저렴할 것입니다.

도이치텔레콤(Deutsche Telekom)과의 협업

우리는 또한 도이치텔레콤의 혁신 연구소가 Boot to Gecko를 개발하는 데 모질라와 함께 하게 됐다는 것을 알리게 되어 기쁩니다.

Boot to Gecko 데모

여기에서 동작하는! 부트 투 겍코 데모를 볼 수 있습니다. 이 데모는 전화온 내역을 연락처에 저장하는 것과, 웹 서핑 그리고, (Firefox 모바일이 모든 모바일 브라우저 중에서 가장 높은 점수를 얻는) HTML5 테스트를 실행하는 것을 보여줍니다. 그런 후에, 트위터 클라이언트와 게임하는 모습, 구글 지도를 사용하고, 유투브에서 동영상을 보고 책을 읽은 후에 기기에 저장돼 있는 동영상을 보는 것으로 끝맺습니다.

웹은 플랫폼입니다

모질라가 항상 믿는 것처럼 웹은 플랫폼입니다. 그리고, 열린 기술이야말로 이를 만들 수 있는 길입니다.

웹과 미래를 위해 개발합시다.

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

Firefox 2011 기술 개발

작년에 수행했던 중요한 기술 변화는 다음과 같습니다.

빠른 제품 출시 주기

우리는 매 6주간 Firefox의 새로운 버전을 출시하기 시작했고, 따라서 일 년을 기다리는 대신 좀 더 빠르게 일반 사용자에게 새로운 기능을 제공할 수 있게 되었습니다. 요즘같이 웹 기술이 빠르게 변화하는 시기엔느 사용자와 개발자 모두에게 이익이 되는 일입니다. 기업과 같이 빠른 출시 주기가 문제가 되는 사용자를 위해서는 연간 1회 출시하는 기업형 제품도 함께 제공합니다. 부가 기능 호환성 문제도 계속 개선해서 2012년에는 완전히 극볻할 것입니다.

성능 향상 작업

2011년 한 해 동안 작업한 결과 Firefox 3.6보다 7배 이상 속도 증가가 있었습니다.

메모리 사용량

많은 개선 작업을 이루어 기존의 50%이하로 메모리 사용량이 감소하였습니다..

Firefox 제품 출시 채널

웹 개발자가 새로운 기능을 더 빠르게 테스트하기 위해 Firefox Aurora 채널을 제공하고, 이와 함께 일반 사용자가 더 빠르게 안정된 환경에서 테스트할 수 있는 Firefox Beta 채널을 개설했습니다. 매일 Firefox의 가장 빠른 기능을 맛보시려면 고급 사용자를 위한 Firefox Nightly 채널을 이용하실 수도 있지요.

안드로이드용 Firefox

모바일의 중요성을 인식하고 이미 Firefox 안드로이드 버전을 개발했고 이를 좀 더 빠르게 구동하기 위해 네이티브 버전도 준비중입니다. Firefox Aurora 모바일 및 Firefox Nightly 모바일 채널을 확인하세요.

개인 정보 보호

Firefox는 산업체에서 사용자가 자신의 개인 정보가 수집되는 것을 원하지 않을 때 의사를 표시하는 Do Not Track 이용을 장려하고 처음 탑재하는 웹 브라우저가 되었습니다. (PC 6%, 모바일 17.6%)

기타 성능 개선

작년 한해 동안 10,881개의 성능 개선 및 변경이 있었고 83개의 새 기능 및 135개의 API를 새로 만들었습니다.

부가 기능

지금까지 4억 8천만회의 부가 기능이 설치되었습니다!

Firefox와 버전 번호

빠른 제품 출시 주기와 새로운 버전 번호가 계속 많은 혼란을 주고 있습니다. 일반 사용자 입장에서는 이제 버전 번호는 그리 중요한 것이 아닙니다. 물론 웹 개발자나 IT 관리자 등은 여전히 신경써야 하지만요. 여전히 버전 번호를 계속 올리는 것은 새로운 버전이 비 하위 호환성 API를 가지고 있고 버전을 올림으로서 유지 보수에 대한 신호를 주게 됩니다. 브랜드 측면에서는 Firefox가 되는 것이고 버전 번호가 더 상관 없이 될 것입니다.

Firefox 2012년 계획

2011년에 해왔던 일을 원동력으로 다음 단계의 기술 개발을 나아가기 위해 몇 가지 주요 항목을 정했고, 그 중 일부는 이미 구현을 시작하고 있습니다.

부가 기능 호환성

Firefox 버전 업그레이드 시 부가 기능 호환성이 안 맞는 문제로 어려움을 겪는 사용자를 위해 Firefox 10 부터는 부가 기능 호환성 강제 적용을 기본 설정으로 제공합니다. 이는 모든 부가 기능이 기본적으로 호환 가능하도록 하는 것으로 1년간의 조사 및 적용 테스트 결과 대부분의 부가 기능이 신규 버전에서도 이상 없을 가능성이 높아짐에 따라 제공하기 시작하였습니다.

부가 기능 동기화

Firefox Sync는 2천 5백만명의 사용자들이 이 250억건의 항목을 동기화하여 사용중입니다. Firefox 11에서 부터는 부가 기능 역시 동기화 제공할 예정입니다.

자동 업데이트

매번 업데이트를 확인하고 다운로드하는 불편함을 줄이기 위해 앞으로는 사용자가 모르는 사이 다운로드 되고 업데이트 됩니다. 이는 Firefox 시작 및 종료 시점에 새로운 버전이 자동으로 설치되는 모습을 보지 않아도 된다는 것을 의미합니다. 대신 업데이트가 완료되면 “새로운 기능” 페이지를 띄워서 설치 후에 어떤 기능이 추가 되었는지 확인할 수 있도록 할 예정입니다. 자동 업데이트는 Firefox 13에서 부터 사용 가능합니다.

웹 개발 도구

웹 개발자를 위한 맞춤형 개발 도구를 계속해서 기능 제공을 하고 있고 이는 개발 도구 로드맵을 참고하시기 바랍니다. .

모든 계획들은 Firefox roadmap에 자세히 포함되어이 ㅆ습니다.

웹 플랫폼 업데이트

웹 플랫폼 시대가 성큼 다가온 만큼 매우 놀랄만한 새로운 기능들을 준비하고 있습니다.

WebRTC

서버 없이 두 웹 브라우저가 직접 실시간 오디오, 비디오 및 데이터 커뮤니케이션 할 수 있는 기술입니다. 이를 통해 게임이나 p2p 기반 애플리케이션 등 놀랄만한 혁신이 일어날 것으로 생각합니다.

WebSocket 완벽히 제공

W3C 표준안에 부합한 Web Sockets 구현을 완료하고 TCP 기반의 양방향 통신 프로토콜 솔루션으로서 웹 서버와 웹 브라우저 사이의 완벽한 통신 수단이 될 것입니다.

SPDY

다중 연결 및 공유가 가능한 새로운 종류의 프로토콜로서 SPDY를 Firefox 11에 탑재하는 중입니다. 이는 SSL만을 지원하면서도 SPDY 기능 웹 서버를 이용하면 더 빠르게 통신을 할 수 있습니다. 이는 일반 사용자들이 보다 빠르게 웹 페이지를 보는 경험을 증대시켜주고 게임 및 미디어에서 고성능 서비스를 제공하기 위함입니다.

HTTP 파이핑

효율적인 대기 연결 기능을 통해 중요한 성능 향상을 가져오고 기존 인프라에서 SPDY를 채용하지 못하는 경우를 대응해서 개발 중입니다.

HTTP 선 연결(Pre-connections)

페이지 연결 전에 이미 HTTP 연결을 맺어 성능 향상 효과를 얻는 것으로 사용자는 같은 사이트로 “뒤로가기”를 하거나 하는 경우를 대응합니다. 이 세 가지가 합쳐지면 매우 웹 페이지 체감 속도가 매우 빨라질 것입니다.

DASH WebM

Matroska/WebM MPEG DASH를 이용하여 WebM 동영상의 스트리밍 기법을 제공해서 다양한 콘텐츠를 끊김없이 제공하고 Firefox가 네트웍 조건에 따라 해상도를 조정하거나 하는 기능이 가능해집니다.

웹앱 성능 향상

엄청난 투자와 함께 Web Apps을 Firefox 내부에 포함 시키는 작업을 하고 있으며 Mozilla Marketplace와 함께 유연하게 연결이 됩니다. 오픈 웹앱 기능에 대해서는 Apps in Firefox를 참고하세요.

로컬 미디어 스토리지 접근 및 업로드

File API를 이용하여 로컬 디렉토리에 접근하거나 이를 업로드하거나 관련 정보를 얻어낼 때 사용하는 것으로 디바이스 내부의 미디어 콘텐츠를 자유롭게 볼 수 있는 기능을 제공합니다.

CSS Flexbox 및 CSS Grid

CSS Flexbox 및 CSS Grid를 새롭게 구현하고 있으며 웹에서 레이아웃을 향상 시키는 멋진 아이디어 입니다.

전체 화면 모드 및Mouse Lock API

웹 브라우저에서 전체 화면 지원 다음에는 사용자 키 입력을 받아서 전체 화면 모드의 스크린을 제어하는 것으로 이를 위해 포인터 대신 마우스를 제어기로 사용할 수 있도록 해야 할 것같다.

더 자세한 것은 Web Platform roadmap을 참고하세요.

앞으로 나가자!

우리가 보았듯이 웹 플랫폼의 성장은 사용자에게 가장 최고의 경험과 대안을 제공하게 됩니다.

원문: Firefox in 2011 – Firefox plans for 2012 by Robert Nyman

배터리 객체 얻기

먼저 배터리 객체를 얻는 것이 중요합니다.

var battery = navigator.mozBattery;

배터리 객체 속성

기기에 있는 배터리의 충전 정도를 알수 있는 다음과 같은 몇 개의 속성이 있습니다.

level

배터리의 현재 충전 정도를 확인. 0에서 1사이의 값을 반환.

charging

진리값. 기기나 컴퓨터가 현재 충전 중인지를 반환.

chargingTime

완전히 충전될 때까지 남은 시간(초). 충전 중일 때 사용 가능.

dischargingTime

방전될 때까지 남은 시간(초). 충전하지 않고 있을 때 사용 가능.

// 배터리 충전 정도를 백분율로 얻기
var batteryLevel = battery.level * 100 + "%";

// 기기가 방전될 때 까지의 시간
var batteryDischarged = battery.dischargingTime;


이벤트

배터리의 상태 변경 감지를 위한 4개의 이벤트가 있습니다.

levelchange

배터리의 충전 정도가 변하는 경우

chargingchange

기기가 충전중이다가 충전이 끊기거나 그 반대인 경우를 감지

chargingtimechange

(충전을 위해 연결시) 기기의 충전 시간이 변경됐을 때

dischargingtimechange

(충전이 끊겼을 때) 기기의 방전 시간이 변경됐을 때

battery.addEventLister("levelchange", function () {
    // 기기의 배터리 충전 정도 변경
}, false);

battery.addEventListener("chargingchange", function () {
    // 기기가 전원에 연결됐거나 아니면 연결이 끊겼을 때
}, false);

battery.addEventListener("chargingtimechange", function () {
    // 기기의 충전 시간이 변경됨
}, false);

battery.addEventListener("dischargingtimechange", function () {
    // 기기의 방전 시간이 변경됨
}, false);

기기 지원

배터리 API는 다음의 환경하에 Firefox 베타에서 지원됩니다.

• 안드로이드 (현재는 Firefox Aurora 만 지원)
• 윈도우즈
• 리눅스 (UPower가 설치된 경우. 대부분의 최근 배포판에는 포함돼 있음)

현재는 Mac OS X를 위해 작업하고 있는 사람이 없습니다. 그러므로, 만약에 능력이 있는 분이 있다면, 이 부분에 기여를 위해 한 번 뵙고 싶습니다!

데모와 코드

기본적인 배터리 API 데모를 마련해 두었습니다. 코드는 또한 GitHub의 배터리 API 저장소에서 내려 받을 수도 있습니다.

여러분이 가진 기기에서 배터리 API가 기대한 대로 동작하지 않는 경우, 버그로 등록 해 주시기 바랍니다. 그러면, 저희가 살펴볼 수 있을 것입니다. 이 API는 현재 실험적인 상태입니다. 그러므로, 아직 실 사용에는 문제가 있을 수 있습니다.

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

진동 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 – 원문으로 가기