Kendrick's Blog

ES6을 쉽게 익혀보자 - tower of babel 일본 Node.js 유저 그룹 대표인 후루카와 요스케(Yosuke Furukawa)님이 만든 ES6 학습 도구입니다. Babel Setup부터 시작해서 ES6의 핵심기능들을 배우고 연습할 수 있습니다.바로 가기 - tower-of-babelReadMe 문서를 보시면 아시겠지만 아래와같이 설치 및 실행할 수 있습니다.$ npm install tower-of-babel -g$ tower-of-babel위 명령어를 실행하면 위 스크린샷과 같은 화면이 보이며, 처음에는 영어로 보이니 필요에 따라 언어 설정을 바꿔주시면 됩니다.사용법은 직접 설치해보면 매우 이해하기 쉽기 때문에 이 이상 자세한 설명은 생략하도록 하겠습니다. 바로 시작하세요! 최근 import에..

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

함수 바인딩 함수 바인딩이란 특정한 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의 이벤트 흐름은 이벤트 버블링이라 부릅니다. 이벤트가 발생하면 트리위치강 가장 깊은곳부터 거슬러 올라가게 되고 이모습이 마치 거품이 올라가는것 같아서 이벤트 버블링..

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 이벤트는 다..

※ 이 포스트는 이전 10. DOM - Document Object Model - API 포스트와 이어집니다. DOM 확장 브라우저 별로 DOM확장을 지원했습니다. 이후 W3C에서 사실상 표준이 된 각종 전용 확장을 명세로 표준화 하기 시작했습니다. 이번 포스트에서는 확장된 DOM 및 각 브라우저 별 전용 확장에 대해 알아봅시다. 선택자 API jquery는 getElementsById()같은 메서드를 쓰지 않습니다. 완전히 CSS선택자에 기초하여 DOM문서를 쿼리합니다. 하지만 기존에 DOM메서드를 이용해 문서 노드를 이동하며 노드를 골라냈기에 개발자들이 노력을 해도 자바스크립트 코드의 한계를 넘지 못했습니다. 하지만 자바스크립트는 위와같은 동작을 네이티브 API로 구현하여 비약적인 성능향상을 하였습니..