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

March 18th, 2014 by choeun

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

유지보수와 확장성을 고려한 HTML/CSS 구조 전략

March 10th, 2014 by 진우

전부터 생각해 오던것이 있었다.

왜 웹개발자들은 java나 javascript는 어떻게든 잘 써보려고 노력하면서 html/css는 이토록 무관심한가. 왜 html/css 작업을 하는 사람들조차 좀 더 머리가 굵어지면 javascript, java 테크를 타려고만 하고 html/css를 버리는가.
그냥 내 눈에 띄지 않는것 뿐일까. 그럼 눈에 안띄는 이유는 무엇일까.

이 글은 웹접근성에 대한 이야기가 아니다.
기술적인 관점에서…

Create Object

March 5th, 2014 by choeun

Class를 기반으로 상속을 구현하는 다른 언어와 달리 JavaScript는 Prototype을 기반으로 상속을 구현합니다. 즉, Class를 생성해서 상속받는 것은 원론적으로 불가능합니다. 자바 언어에서 클래스를 생성하는 예제를 보겠습니다. [crayon-534f3949ead34648619060/] Java는 클래스를 기반으로 상속을 받기 때문에 위와 같이 클래스를 만들고, 그 인스턴스를 만들어냅니다. User 클래스의 인스턴스들은 모두 이름(name), 나이(age)라는 private 필드와 함께, getName(), setName()…

Create Function Object

March 4th, 2014 by choeun

모든 언어에서 동일하지만, 자바스크립트에서 함수를 호출하여 사용하기 위해서는 먼저 함수를 선언해야합니다. 함수의 선언 방식에는 크게 세가지가 있습니다. Function Declaration (함수 선언) 문법 [crayon-534f3949eb4b1691416168/] Work 위의 코드를 작성함으로써 자바스크립트의 해석엔진은 다음 작업을 수행합니다. 함수 선언문의 동작 방식 [함수객체생성] 부분에서 정의된 바와 같이 새로운 함수 객체를 만들고 돌려줍니다. 파라미터는 형식있는 파라미터 목록에서…

inherit

February 28th, 2014 by choeun

상속은 대부분의 프로그래밍 언어에서 중요한 주제입니다. 자바같은 클래스기반 언어에서 상속은 두가지 유용한 점을 제공합니다. 첫째로, 상속은 코드 재사용 형태 중 하나입니다. 만약 새로 만들 클래스가 기존에 있던 클래스와 매우 유사하다면, 기존의 클래스를 상속받은 뒤 다른 점만 구현하면 됩니다. 둘째로, 상속에 데이터타입 체계 명세가 포함된다는 것입니다. 이런 장점은 프로그래머들의 캐스팅 작업을…

나쁘지만 사용해야 하는 것들

February 26th, 2014 by choeun

자바스크립트는 세상에서 오해를 많이 받는 언어 중 하나입니다. Java 언어와 공통점은 적으나 마케팅 측면으로 JavaScript라 이름을 바꾸면서 혼란의 근원이 되어버렸고, 언어의 정제과정을 거치지 못한채 넷스케이프에 탑재되어 세상에 공개됩니다. 자바스크립트에는 좋은 점도 많지만 나쁜 점도 많습니다. 우리는 지금까지 자바스크립트의 좋은 점만 공부했지만, 나쁜 점도 인지하여 적절히 다룰 수 있어야 합니다. 자바스크립트의…

Function

February 24th, 2014 by choeun

Function Declaration vs Function Expression 자바스크립트에서 함수를 정의할 때, 함수 선언(function declaration)과 함수 표현(function expression)을 사용할 수 있습니다. [crayon-534de80a72fbc682907240/] 함수 선언문은 function 키워드를 사용하여 함수의 몸체를 바로 정의합니다. 함수 표현식은 함수 리터럴 표현식을 사용하여 익명 함수를 만들어 foo라는 변수에 저장합니다. 이 두 표현방법은 함수를 정의하는 부분에서는 일치하지만, 많은 부분이 다릅니다.…

Ambient Light Events

February 24th, 2014 by choeun

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

Object

February 24th, 2014 by choeun

일급 객체 (First-class Object, First-class Citizen) 자바스크립트의 객체는 일급객체로 다음과 같은 특성을 가집니다. 변수나 데이터 구조 안에 담을 수 있다. 인자(Parameter)로 전달할 수 있다. 반환값(Return Value)으로 사용할 수 있다. 즉, 자바스크립트 코드의 대부분에서 객체를 자유롭고 유연하게 사용할 수 있습니다. 자바스크립트에서는 배열, 함수, 정규표현식 등이 모두 객체이기 때문에 동일한 내용이 배열,…

[js/jQuery] Draggable object

January 13th, 2014 by rootbox

오브젝트를 드래그&드랍할 수 있도록 하는 javascript(jQuery) 코드입니다.
여기에 쿠키나 로컬 스토리지등을 활용해서 widget 형태로 꾸밀 수 있을 것 같습니다.
우선은 간단하게 구현했습니다.
javascript (needs jQuery)$.fn.draggable = function() {
return $.each(this, function() {
var $el = $(this);
var move = function(e) {
if(!$el.data(“_isMove”)) return;

var pos = $el.data(“pos”),
pos = {…