최신 문서

  • 프로그레시브 웹 게임

    최근에 출시한 MDN의 프로그레시브 웹 앱 핵심 가이드를 통해 모바일 기기에서의 웹 페이지를 네이티브처럼 반응하도록 보여지고 느껴지도록 만드는것이 어느때보다 쉬워졌습니다. 하지만 게임은 어떤가요? 이 문서에서는 웹 API에 내장된 PWA 기능들을 사용하여 최신 웹 개발 환경에서 프로그레시브 웹 게임의 개념이 실용적이고 실현가능한지 확인해 볼 것입니다. Enclave Phaser 템플릿(EPT)를 살펴봅시다. Phaser 게임 엔진을 사용해 제가 만든 HTML5 […]

  • MDN 웹 문서의 프로그레시브 웹 앱 핵심 가이드

    프로그레시브 웹 앱(PWA)은 웹 사이트를 구축하는 새로운 방법입니다만, 완전히 새로운 방법일까요? PWA의 기본 원칙은 점진적인 향상, 반응형 디자인, 모바일 우선 등과 같은 앱 디자인을 위한 과거의 전략으로부터 비롯되었습니다. 프로그레시브 웹 앱은 새로운 API 세트와 여러 기능들과 같은 입증된 기술들을 하나의 용어로 통합하여 지칭하는 것입니다. 2018년은 PWA의 해가 될 것입니다. MDN 웹 문서에는 PWA에 관심있는 모든 […]

  • 박수 인식 Web Thing 만들기

    Things Gateway 프로젝트는 표준화된 HTTP 기반 API를 사용하여 여러분의 모든 IoT 기기를 하나로 통합하여 제공할 수 있는 플랫폼입니다. 우리는 최근에 Things Gateway를 발표했으며 Gateway를 구축하고 Web of Things를 가지고 놀 수 있는 실습 프로젝트 시리즈를 게시하기 시작했습니다. 2월 초에 Gateway 부가 기능을 만드는 방법에 대한 고급 레벨 개요를 게시했습니다. 이 글에서는 우리가 지금까지 배웠던 것으로 […]

  • Emscripten으로 WebAssembly와 JavaScript 코드 크기 줄이기

    Emscripten은 asm.js 및 WebAssembly를 위한 컴파일러 툴체인으로 웹에서 C/C++를 네이티브에 가까운 속도로 실행할 수 있게 해줍니다. Emscripten 출력물의 크기는 최근에 굉장히 작아졌습니다(특히 작은 프로그램에서 더). 다음은 예제 C 코드입니다: #include <emscripten.h> EMSCRIPTEN_KEEPALIVE int add(int x, int y) { return x + y; } 이 코드는 두 수의 합을 내보내는 순수 연산의 “hello world” 입니다. -Os […]

  • UI 레이아웃을 위한 CSS 그리드

    CSS 그리드는 긴 텍스트 구절을 포함하는 컨텐츠 기반 웹사이트를 위한 훌륭한 레이아웃 도구이며, 다양한 전통적인 UI 레이아웃에도 굉장한 가치가 있습니다. CSS 그리드를 사용해 사용자 인터렉션이나 변경되는 조건에 반응하고 적응하며, 스크롤이 항상 제대로 동작하도록 어플리케이션의 레이아웃을 향상시키는 방법을 보여드리겠습니다. CSS 그리드는 웹사이트 레이아웃을 구축합니다. CSS 그리드는 웹디자이너가 수년동안 사용해왔던 끝없는 float 꼼수 대신 작은 비트의 지원 […]

  • 2018년 Rust가 향하는 곳은? 커뮤니티에 묻다.

    2017년은 Rust 시스템 프로그래밍 언어에게 중요한 해였습니다. 이제, 오픈 소스 프로젝트의 멤버들은 Rust를 더 배우기 쉽게 만들었던 지난해의 진전을 2015년 안정적인 Rust 릴리즈와 통합해 첫 번째 주요 업데이트를 게시하려고 합니다. Rust의 코어 팀 멤버이자 Mozilla의 엔지니어링 매니저인 Aaron Turon은 “우리는 Rust를 훨씬 멋진 곳으로 만들고 있다”라고 했습니다. “우리는 프로그래머, 특히 언어에 익숙하지 않은 개발자를 위한 […]

  • Flash 이후의 삶: 열린 웹을 위한 멀티미디어

    Flash는 10년이 넘는 시간동안 수십억 사용자들에게 비디오, 애니메이션, 인터렉티브한 사이트 그리고 광고를 제공했지만, 이제는 사라질 것입니다. Adobe는 2020년까지 Flash의 지원을 서서히 중단하기로 하였습니다. Firefox는 더 이상 Flash를 지원하지 않으며, Chrome에서도 지원하지 않습니다. 그럼 무엇을 쓸 수 있을까요? Flash에서 제공했던 것들이 가능한 수 많은 공개 표준이 있습니다. 진짜 열린 멀티미디어 Flash는 인터렉티브한 멀티미디어 웹사이트를 구축 및 […]

  • 동적 테마 생성을 위한 규칙 기반 프레임워크

    12월에 저는 Firefox의 테마 API에 대한 소개를 했습니다. 이는 animated themes, macOS-style overscroll 또는 interactive theme editors와 같은 많은 것들을 할 수 있게 해주지만 몇 가지 한계가 있습니다. 전통적인 CSS와 비교해서 동적 테마 API의 한 가지 문제는 기본 동적 테마를 만들기 위해선 JavaScript와 WebExtension API를 알아야 한다는 점입니다. 이 문제를 해결하기 위해 간단한 테마 “규칙”을 […]

  • Firefox Debugger로 console.log를 뛰어 넘기

    console.log 는 디버거는 아닙니다. JavaScript 앱이 무엇을 하고 있는지 표시하는 훌륭한 방법이지만 너무 적은 정보만 표시하는 한계가 있습니다. 코드가 복잡하면, 적합한 디버거가 필요하게 됩니다. 그것이 Firefox 개발자도구 놀이터(playground)(디버깅에 대한 모든 것)에 새로운 세션을 포함한 이유입니다. 간단한 JavaScript 할일 앱을 검사하고 고치기 위해 Firefox 디버거를 사용하는 4개의 강의를 마련했습니다. 디버거 놀이터 강의들은 완전히 무료이고 할일앱 코드는 […]

  • Atomics 를 이용해서 SharedArrayBuffer 레이스 컨디션 피하기

    이 글은 3부작 시리즈의 세번째 글입니다. 메모리 특강 만화로 소개하는 ArrayBuffer 와 SharedArrayBuffer Atomics 를 이용해서 SharedArrayBuffer 레이스 컨디션 피하기 지난 글에서, 저는 SharedArrayBuffer 를 사용할 때 레이스 컨디션이 발생할 수 있다고 이야기했습니다. 레이스 컨디션 때문에 SharedArrayBuffer 는 다루기 어렵습니다. 그래서 우리는 어플리케이션 개발자가 SharedArrayBuffer 를 직접 사용하리라고 생각하지 않습니다. 하지만 다른 랭귀지를 사용해서 멀티스레드 […]

모든 문서 보기 →