Kendrick's Blog

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

DOM문서 객체 모델은 HTML, XML문서에 대한 API입니다. 문서의 노드를 계층 구조 트리로 표현하고 있습니다. 개발자는 이를 추가, 제거, 수정 할 수 있습니다.노드의 계층 구조아래 HTML을 봅시다. Sample Page Hello World! 위 HTML을 계층 구조로 보면 아래와 같습니다문서 노드의 자식은 html 하나 뿐인데 이를 문서 요소라고 합니다. 문서 하나에 문서 요소하나만 있을 수 있습니다. XML은 미리 지정된 문서 요소가 없으며 어떤 요소든 문서 요소가 될 수 있습니다.각 마크업은 트리에서 노드로 표현되며 HTML 요소들은 요소 노드로, 속성은 속성 노드로, 문서 타입은 문서 타입 노드로, 주석은 주석 노드로 표현됩니다. 이렇게 총 12가지 노드 타입이 있으며 이에 대해서 알아..

클라이언트 탐지모든 브라우저가 공통 기능을 지원하지 않습니다. 브라우저 사이의 차이로 인해 발생되는 혼란스러운 점이 너무 많아서 개발 전략에 빼놓을 수 없는 중요 파트입니다.클라이언트 탐지보다는 일반적인 솔루션이 있다면 그걸 사용해야 하며, 지원되지 않는 부분을 메꾸기 위한 용도로 사용하시기 바랍니다.기능 탐지클라이언트 탐지중 가장 널리 쓰이는 방법입니다. 브라우저 자체에 대한 지식은 불 필요하며, 기능의 존재 여부에 따라 해결책을 찾을 수 있습니다.function getElement(id){ if(document.getElementById){ return document.getElementById(id); }else if (document.all){ return document.all[id]; }els..

브라우저 객체모델 브라우저 객체 모델(BOM)은 웹에서 사용하는 자바스크립트의 핵심입니다. 웹 페이지 콘텐츠와 무관하게 브라우저 기능을 노출하는 객체입니다. 제대로 된 명세가 없는 기간이 너무나 길어서 제조사별로 BOM이 확장되서 좋은 점도 있지만 문제도 많았습니다. 그런 이유로 현재도 표준화를 하고 있으며 이제 HTML5명세에서 BOM의 주요 부분을 다루고 있습니다. window 객체 브라우저 인스턴스입니다. 브라우저 창의 자바스크립트 인터페이스 구실을 하며, ECMAScript Global 객체로 기능하기도 합니다. 즉 웹페이지에서 정의하는 모든 객체, 변수, 함수에서는 window가 Global객체 구실을 하며, window에 정의된 parseInt()등의 메서드를 이용합니다. 전역 스코프 Glob..

highlight.js? 자바스크립트로 만들어진 코드 구문 강조 라이브러리 입니다. 거의 모든 마크업에서 작동하고 자동 언어 감지 기능을 가지고 있습니다. 공식사이트 꾸준히 업데이트가 이루어 지고 있습니다. (Language, Style 등) 라이브러리이기 때문에 어디든 추가 하여 사용 가능합니다. 하지만 이 포스트는 설치가 아닌 하루패드와 Markdown-Here에 대해서 다루고 있으므로 설치 관련해서는 아래 블로그를 참조 부탁드리겠습니다. WEBDRI - highlight.js 하루패드, Markdown-Here에서의 Highlight.js 하루패드와 Markdown-Here는 모두 코드 구문강조를 지원하며, 둘 다 Highlight.js 라이브러리를 사용하고 있습니다. 하루패드 코드 구문 강조 문서..

GNIN이 사이트는 간단한 포스트를 올리는 사이트입니다.개인적으로 아는 Noname이라는 작가분의 닉네임을 기려서 Guest Name Is Noname의 앞글자를 따서 지었습니다.그래서 제목만 보면 마치 비회원도 포스팅할 수 있는 사이트 같지만, 사실 회원제라는게 함정입니다. 😃 React를 사용하다보니 단순 웹페이지라기 보다는 웹어플리케이션이라는 느낌으로 만들었습니다. 사이트 주소GNIN - gnin.herokuapp.com개발환경Server : Node.JS 서버 환경은 Node.JS(Express.js)입니다. 빌더는 Webpack을 사용하였습니다. FrontEnd : React + Redux (로그인, 프로필 페이지 제외) 로그인, 프로필 수정 페이지는 간단한 html페이지지만 메인기능은 포스트페..

함수 표현식5장에서 설명한 것과 같이 함수를 정의하는 방법은 함수 선언과 함수 표현식이 있습니다. 함수 선언식에 대해서 간단하게 알아본 후에 함수 표현식에 대해서 알아보겠습니다.함수 선언식functionName(); function functionName(arg0, arg1, arg2){ alert("hi"); } 함수 선언에서 뚜렷한 특징은 함수 선언 끌어올림 입니다. 함수 선언부를 다른 코드보다 먼저 읽고 실행한다는 뜻 입니다. 그렇기 때문에 위에 예제에서 함수 선언 전에 functionName()을 호출해도 정상적으로 동작하게 됩니다.함수 표현식일반적인 변수 할당과 비슷합니다.functionName(); //오류 발생 - 함수가 존재하지 않습니다. var functionName = function(..

객체 지향 프로그래밍ECMAScript는 클래스라는 개념이 없습니다. 따라서 ECMAScript의 객체는 다른 클래스 기반 언어와 다릅니다.이번 포스트에서는 자바 스크립트에서 어떻게 객체 지향 프로그래밍을 구현하는지 배워봅시다.객체에 대한 이해객체에 대해 설명을 시작하기 전에 객체를 만드는 방법 부터 한번 보고 갑시다.var person = new Object(); person.name = "Nicholas"; person.age = 29; person.job = "Software Engineer"; person.sayName = function(){ alert(this.name); } 위와같이 객체를 생성 후 프로퍼티와 함수를 추가해 주었습니다. 이 예제는 객체 리터럴 표기법을 이용하여 아래와 같이 수..

불편함으로 다가온 에버노트의 변경점한달전 에버노트가 크게 변경될 것이라는 예고와 함께 메일이 왔었습니다.그 후 한달동안 신경 안쓰고 있었는데.. 포스트 작성을 위해서 접속을 해보니 웬걸 미묘한 변화가 느껴집니다.에버노트가 기기 제한 2개가 생기고 기존에 베타로 제공하던 기능이 기본적으로 작동하게 패치가 되었습니다.기기 제한은 회사 컴퓨터 집 노트북만 쓰면되지 사실 그렇게 큰 문제는 아니였습니다.문제가 된건 새로운 기능이었습니다.마크다운 문법에 따라 자동치환 해주는 기능인데 에버노트에서 Markdown-Here(크롬플러그인)을 연동해서 쓰는 저에게는 엄청 큰 불편함이 느껴지더군요.그런 이유로 미련을 버리고 새로운 마크다운 에디터를 찾아 떠나게 되었습니다.하루패드한국인 개발자가 개발한 마크다운을 제공하는 텍..

Canvas란간단하게 설명하자면 HTML5의 canvas는 그래픽들을 위한 컨테이너 입니다. 선, 사각형, 원, 문자, 이미지 등을 추가하는 메서드를 지원하며, canvas엘리먼트를 정의 후 자바스크립트를 이용하여 그림을 그려줍니다. html에 다음과 같이 정의 합니다. 도형 등은 자바스크립트를 이용하여 그려 줄 수 있습니다. w3s html5_canvas 하지만 급하게 canvas를 사용하고 싶거나 애니메이션을 적용하고 싶을 경우 처음부터 공부해야 하는 어려움이 있습니다. 그럴 때 아래에서 소개할 오픈소스 라이브러리를 사용하여 빠르게 내 사이트에 적용 시킬 수 있습니다. Brush.jsBrush.JS 소개 Brush.js는 canvas 사용을 도와주는 라이브러리 입니다. 간단한 그리기를 비롯해 애니메이..

이번 포스트에서 알아볼 참조타입들원시타입이 아닌 참조 타입은 여러 종류가 있습니다. 이번 포스트는 각종 참조 타입의 설명과 참조 타입별로 지원하는 메서드를 정리해놓은 포스트입니다. 포스트를 시작하겠습니다.참조 값(객체)이란특정 ‘참조 타입’의 인스턴스 입니다. 참조 타입을 ‘클래스’라 부르는데 이는 잘못된 표현입니다. 비슷하긴 하지만 다른 개념이며, 참조 타입은 객체가 가져야 할 프로퍼티와 메서드를 정의한다는 점 때문에 객체 정의 라고 불리기도 합니다. 객체를 생성할 떄는 new 연산자를 사용합니다.var person = new Object(); 이 코드는 Object에 기본 프로퍼티와 메서드만 가진 단순한 객체를 생성합니다.Object 타입Object는 많은 기능이 들어있지 않지만 데이터 저장및 전송에..

가비지 콜렉션자바스크립트도 자바와 마찬가지로 코드 실행 중 메모리를 관리합니다. C나 C++같은 언어는 프로그래머가 직접 메모리를 관리해 줘야 하며, 이는 매우 골치아픈 작업입니다. 자바스크립트 같은 가비지콜렉션을 지원하는 언어는 필요한 메모리를 자동 할당하고, 더 이상 사용하지 않는 메모리를 자동으로 회수합니다.원리간단합니다. 더 이상 사용하지 않을 변수를 찾아내서 해당 변수가 차지하는 메모리를 회수합니다. 이 프로세스는 주기적으로 실행되며, 특정 시점에서 메모리를 회수하게 할 수도 있습니다.사용여부 판단은?그렇다면 어떻게 사용여부를 판단할 수 있는 걸까요? 사용여부 판단을 위해서 표시하기 지우기, 참조 카운팅 두 가지 중 하나의 방식을 사용합니다. 참조 카운팅은 순환참조 등에 문제가 있기때문에 일반적..