Kendrick's Blog

Ruby On Rails - 개발자를 위한 풀스택 오픈소스 프레임워크 BaseCamp - 프로젝트 관리 툴 BackPack - 개인용 태스크 관리 어플 Highrise - 정보관리도구 위 같은 전세계 수백만명이 사용하는 제품을 개발한 37Signals의 Jason Fried와 David Heinemeier Hansson이 지은 책입니다.원제는 REWORK이며 번역판 제목에서는 현재 회사들에 대한 일침을 가하고 있습니다.말만 앞선 뻔한내용? No! 실제로 적용하고 성공한 하나의 가이드이런게 말로만 가능하지 실제로 업무시 적용이 돼나?라는 의문을 잠시 가질 수 있겠으나, 실제 37Signals이 소신을 지켜서 성공한 사례를 보여주고 있기 때문에 끝까지 수긍하고 보게 됩니다.각 챕터는 많아야 2페이지입니다. ..

관리하기 쉬운코드 작성하기 최근의 웹앱은 수천 줄의 자바스크립트로 이루어져 있습니다. 다른사람의 코드를 관리하는데도 많은 시간을 보내므로 관리하기 쉬운 코드를 만들어야 합니다. 이번포스트에서는 그런 주제를 다룹니다. 관리하기 쉬운 코드란? 이해하기 쉬움 직관적임 적용하기 쉬움 확장하기 쉬움 디버그하기 쉬움 코드 표기법 코드 표기법을 정하는 것입니다. 자바스크립트는 특히 느슨한 데이터타입을 채택했기 때문에 다른 언어보다 이런점이 중요하게 작용합니다. 일반적인 코드 표기법에서 지켜야 할 것을 알아 보겠습니다. 가독성 관리하기 쉬운코드는 가독성이 좋아야 합니다. 그렇기 때문에 들여쓰기와 주석은 많은 부분을 차지 합니다. 함수와 메서드 : 각 함수나 메서드에는 그 목적을 반드시 주석으로 남겨야 합니다. 메서드에..

함수 바인딩 함수 바인딩이란 특정한 this값과 특정한 매개변수를 넘기면서 다른 함수를 호출하는 함수입니다. 많은 자바스크립트 라이브러리들은 함수를 특정한 컨텍스트에 묶는 함수를 만들었습니다. 일반적으로 이런 함수를 bind()라고 부릅니다. 기본 구조는 아래와 같습니다. function bind(fn, context){ return function(){ return fn.apply(context, arguments); } } ECMAScript5에서 bind()메서드가 도입되었으며 아래와 같이 사용하면 됩니다. var handler = { message : "Event handled", handleClick: function(event){ alert(this.message + ":" + event.ty..

JSON 간단하게 JSON이 무엇인지와 JSON파싱, 직렬화에 대해서 알아보겠습니다. JSON 문법 http basic카테고리에서 설명한 JSON 포스트링크를 참조 부탁드리겠습니다. JSON이란? 바로가기 JSON은 세가지 타입을 사용합니다. 단순한 값 객체 : 키-값 쌍으로 표현 배열 : 값, 객체, 다른 배열등을 담는 배열 JSON은 프로그래밍 언어가 아니고 데이터 형식입니다!! 다른 언어에서도 JSON의 파싱등을 지원하며 저희는 주제에 맞게 자바스크립트에서의 파싱, 직렬화에 대해 알아보겠습니다. JSON 객체 JSON처리 관련한 객체입니다. stringify() parse() 메서드를 지원하며 이에 대해서 알아보겠습니다. stringify(), 직렬화 var book = { title: "bookn..

에러처리와 디버깅 에러처리 try-catch, finally문 자바의 try-catch와 비슷합니다. try{ //에러 발생예상 코드 }catch(error){ //에러 시 코드 } finally { //에러 발생, 미발생과 상관없이 위에서 실행 후 마지막으로 실행되는 코드 } finally문은 아예 생략해도 상관없습니다. catch문의 error에는 에러 타입에 따른 처리를 할 수 있습니다. 에러타입 Error : 다른 에러가 상속하는 타입 EvalError : eval() 함수 사용시 에러 RangeError : 숫자가 범위를 벗어날 때 ReferenceError : 객체를 예상한 컨텍스트에 이외의 것이 들어갔을때 발생 SyntaxError : 문법에러 TypeError : 예기치 못한 타입의 변수 ..

HTML5 스크립트 문서간 메시징 서로 다른 소스의 페이지 사이에서 정보를 교환하는 것입니다. XDM이라고 부르기도 합니다(Xcross Document Messaging) www.wrox.com페이지에 아이프레임으로 p2p.wrox.com페이지를 열어서 통신하기에는 보안을 유지하기가 어려운 일이었으나 이제는 보안은 그대로 유지하면서 사용하기 쉽게 XDM으로 표준화 했습니다. postMessage() 메서드를 통해서 사용합니다. 전달 var iframeWindow = document.getElementById("myframe").contentWindow; iframeWindow.postMessage("A secret", "http://www.wrox.com"); 수신 window.addEventListen..

canvas HTML5에 추가된 요소입니다. 이 요소는 페이지 일부를 그래픽 생성 가능한 영역으로 지정하고 자바스크립트로 즉석에서 그림을 그립니다. 현재는 기본적인 그림 기능이 있는 2D 컨텍스트가 있고 WebGL이라는 3D 컨텍스트가 제안된 상태입니다. WebGL의 경우는 자체가 실험적이기도 하며 윈도 xp같은 오래된 운영체제에는 WebGL 구현에 필요한 그래픽 드라이버가 없는 문제도 존재합니다. 기본사용법 요소는 width와 height 속성을 통해 생성할 그림의 크기를 설정합니다. drawing of something drawing of something 텍스트는 canvas요소가 지원되지 않을때 표시되는 텍스트입니다. 캔버스에 그림을 그리려면 먼저 컨텍스트를 가져와야 합니다. 컨텍스트에 대한 참조..

폼 스크립트 자바스크립트로 폼관련 필드의 유효성 검사 및 표준 폼 컨트롤러의 기본 동작을 확장하기 시작했습니다. 폼 기본 요소는 아래와 같은 기본 프로퍼티와 메서드를 가집니다. acceptCharset : 서버가 처리할 수 있는 문자셋, HTML의 accept-charset속성과 같다. action : 요청을 보낼 URL elements : 폼에 있는 컨트롤 전체의 HTML Collection enctype : 요청의 인코딩 타입. length : 폼에 컨트롤 개수 method : HTTP 요청 타입 name : 폼의 이름. HTML의 name속성 rest() : 폼 필드를 모두 기본값으로 리셋 submit() : 폼을 전송 target : 요청을 보내고 응답을 받을 창 이름. 접근은 일반적으로 id를 ..

event 객체DOM과 관련된 이벤트가 발생하면 관련 정보는 모두 event객체에 저장됩니다. 이벤트 발생 요소, 이벤트 타입, 이벤트 관련 데이터도 저장됩니다.ex) 마우스 이벤트 -> 마우스의 위치정보 포함 등 키보드 이벤트 -> 누른 키의 키코드 등모든 브라우저가 event 객체를 지원하지만, 세부 사항까지 같지는 않으니 주의하시기 바랍니다.DOM event객체event객체 예제를 봅시다.var btn = document.getElementById("myBtn"); btn.onclick = function(event){ console.log(event.type); //click }; btn.addEventListener("click", function(event){ console.log(event...

이벤트이벤트 시스템은 상당히 복잡합니다.BOM도 이벤트를 지원하지만 정의할 문서가 없었기 때문에 혼란스럽습니다.이벤트는 상황에따라서 단순할 수도, 매우 복잡할 수도 있습니다.우선 핵심 개념부터 알아봅시다.이벤트 흐름이벤트 흐름이란 페이지에 이벤트가 전달되는 순서를 설명합니다.생각해보십시오.화면의 버튼을 클릭하면 버튼도 클릭하고 버튼의 컨테이너도 클릭하는 것이고 페이지 전체도 클릭하는 것입니다.이와같은 문제로 인해 개발자들은 이벤트 흐름을 생각하게 됐는데 IE는 이벤트 버블링을 지원했고 넷스케이프는 이벤트 캡쳐링을 지원했습니다.이벤트 버블링IE의 이벤트 흐름은 이벤트 버블링이라 부릅니다. 이벤트가 발생하면 트리위치강 가장 깊은곳부터 거슬러 올라가게 되고 이모습이 마치 거품이 올라가는것 같아서 이벤트 버블링..

회사 동료가 추천해준 책입니다. 이 책의 저자는 손호성이라는 분입니다. 매직아이 개발, 스도쿠 관련 서적 70개 출판, 강사, 프로그램 개발 등 다양한 경험을 하였고 그런 경험을 바탕으로 3년간 트위터와 페이스북에 짧은 글들을 남겼습니다. 그곳에 올린 약 4000개 정도의 글에서 가장 많은 공감을 얻은 내용을 수록해서 만든 책이 바로 지금 소개할 ‘악당의 명언’입니다 독특한 책디자인 마치 만화책을 보는 듯한 디자인.(질감도 만화책과 같은 까끌까끌한 종이입니다) 내용 중간중간에는 대부분 알만한 유명한 악당들의 그림이 있고 글들은 마치 만화책 처럼 말풍선 속에 있거나 지면 전체를 차지하고 있습니다. 알수없는 흡입력 잠깐 폈다가 그날 바로 끝까지 읽어 내려갔습니다. 망치로 한대 맞은듯한 느낌을 주는 내용, 뻔..

DOM 레벨2, DOM 레벨3 DOM레벨1은 HTML, XML문서 구조를 정의하는데 초점이 맞춰져있습니다. 레벨2와 레벨3은 위 구조에 따른 상호작용 기능 추가 및 고급 XML기능을 지원합니다. 서로 관련있는 아래와 같은 모듈로 구성되어있습니다. DOM 코어 : 레벨 1 코어를 바탕으로 노드에 메서드와 프로퍼티를 추가. DOM 뷰 : 스타일 정보를 바탕으로 여러가지 문서 뷰 정의 DOM 이벤트 : 이벤트에 기반한 DOM 문서 상호작용 방법 정의 DOM 스타일 : CSS스타일 정보에 접근하고 변경하는 방법 정의 DOM 이동과 범위 : DOM문서를 이동하고 특정 범위를 선택하는 새 인터페이스 정의 DOM HTML : 레벨1 HTML에 기반하여 새 인터페이스와 프로퍼티, 메서드를 추가 이중 DOM 이벤트는 다..