W3C 스펙은 어떻게 읽어야 하는가?

How to read W3C specs from ourmaninjapan Front-End 개발자라면 누구나 한번쯤 W3C의 스펙을 접해봤으리라 생각합니다. W3C 스펙을 읽어야할 필요성은 어떤 개발자나 가지고 있지만, 영어에 대한 막역한 두려움과 W3C 문서들이 가지고 있는 법칙들을 이해하지 못해 읽는데 어려움을 겪었으리라 생각합니다. 그런 점에서 지난 주 금요일에 진행된 TTWF 행사의 발표 내용 중, “W3C의 더보기…

[영상] Webkit Overview

Intro Rendering Engine 중 하나인 Webkit Rendering Engine에 대해 간단히 발표해보았습니다. 부가 초반에 Web Browser 부분에서 설명이 없었는데, 현재 Webkit엔진은 Safari 브라우저에서 사용하고 있습니다. Chrome도 27버전까지는 Webkit을 사용했고, 그 이후부터 Webkit을 개량한 Blink 엔진을 사용하고 있습니다. References Rendering in Webkit Webkit Layout Slide Webkit overview from Eun Cho

git의 요술 책갈피, Stash 기능 소개

git에는 기본적인 커밋 & 푸시 등의 기능 외에도 수많은 기능들이 있습니다. 그중 매우 유용한 요술 책갈피인 Stash에 대한 소개입니다. 사전적 의미 Stash [stӕʃ] 1. (안전한 곳에) 넣어 두다 2. 챙겨 둔 양   Situations 현업에서 코드를 열심히 개발하다 보면 이런 상황이 왕왕 발생합니다. 상황 1. 신규 프로젝트인 “LetItGo” 프로젝트가 시작됐습니다. 더보기…

브라우저는 어떻게 동작하는가? [1/3]

NHN 개발자 블로그인 Hello World에 투고되어있는 “브라우저는 어떻게 동작하는가?“의 정리본입니다. 너무 어려워서 다시 정리합니다. Web Browser 가장 많이 사용되는 프로그램이고 우리가 웹을 탐색할 때 사용하는 프로그램입니다. 최근에는 “인터넷 익스플로러(MS)”, “파이어폭스(Mozilla)”, “크롬(Google)”, “사파리(Apple)”, “오페라(Opera)”가 주력 브라우저로 활약을 하고 있습니다. 브라우저의 주요 기능은 “사용자가 요청한 데이터를 서버에 요청한 뒤 그 데이터를 받아서 더보기…

자바스크립트 객체 생성

Class를 기반으로 상속을 구현하는 다른 언어와 달리 JavaScript는 Prototype을 기반으로 상속을 구현합니다. 즉, Class를 생성해서 상속받는 것은 원론적으로 불가능합니다. 자바 언어에서 클래스를 생성하는 예제를 보겠습니다. // Java // User Class를 생성합니다. public class User { private String name; private int age; public String getName() { return name; } public void 더보기…

Ambient Light Events

인간의 눈은 주변 빛의 양에 따라 한번에 들어올 수 있는 빛의 양을 조절합니다. 어두운 곳에 있으면 동공은 축소되고 그만큼 한번에 받아들이는 빛의 양이 많아집니다. 그런 경우 휴대폰의 밝기가 최대로 되어있으면 한꺼번에 많은 빛을 받아들이게 되어 눈이 아파집니다. 반대로 밝은 곳에 있으면 동공은 확대되고 그만큼 한번에 받아들이는 빛의 양은 적어집니다. 하지만 더보기…

[Review] Light Table

소개 Light Table은 Node-Webkit 기반의 IDE 이며 최근 0.6.0 버젼 부터 Open Source가 되어 Github에서 직접 볼 수 있습니다. 작성한 코드에 대해 실시간으로 피드백을 주어 프로그램이 실제로 어떻게 작동하는지 이해할 수 있게 해주는 점을 장점으로 들고 있습니다. http://www.lighttable.com  https://github.com/LightTable   Node-Webkit? Node-Webkit은 Chromium 브라우저에 Node.js기반으로 실행되는 어플리케이션입니다. Node-Webkit을 통해 네이티브 어플리케이션을만들 더보기…

Vibration API

소개 진동은 사용자가 특정한 상황을 접했을 때, 사용자에게 알림을 주기 위해 사용됩니다. I-OS나 안드로이드, 바다 OS 등 여러 Mobile OS에서 진동을 사용하기 위한 API를 제공하고 있습니다. 그럼 Web OS에서는 그 상황이 어떨까요? W3C에서는 2009년 Device APIs Working Group을 결성하여 Web Device API 문서를 발행하고 완성시킨 뒤 사용을 권고하고 있습니다. 오늘은 더보기…

viewport

소개 스마트 기기에서 여러 단말기의 해상도에 대응하기 위해 사용하는 viewport에 대해 알아보고자 합니다. viewport는 스마트기기 상에서, 최초에 페이지를 로딩할 때 확대정도, 최대 확대비율, 최소 확대비율등을 다루는 meta data에 속하는 속성입니다. viewport를 사용함으로서 무선을 위한 디자인을 무선에서 최적화 되게 보여줄 수 있습니다. 사용법 사용법은 의외로 간단합니다. <meta name=’viewport” content=””/>를 head사이에 추가해 더보기…

speech Input

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