불낙지버거의 블로그

Node.js 2009년 Ryan Dahl에 의해 만들어진 기술이다. C/C++과  JavaScript로 이루어져 있으며, 기본적으로 JavaScript 코드를 브라우저 밖에서 구동한다. Node.js에 대해 설명하기 이전에 왜 Ryan은 JavaScript를 사용하였는지,그리고 JavaScript가 어떻게 브라우저 밖에서 구동되는지 설명하고자 한다. 이를 이해하기 위해서는 Chrome V8, Non-Blocking I/0, Event Loop에 대해 알아야 한다. 

Chrome V8 Engine

function Point(x, y) { this.x = x; this.y = y; } var p1 = new Point(11, 22); var p2 = new Point(33, 44); // 여기에서 p1과 p2는 hidden class를 공유합니다. p2.z = 55; // 경고! p1과 p2는 이제 다른 hidden class를 갖습니다.

p1과 p2는 같은 hidden class를 가지지만, p2에 z가 추가 되면 서로 다른 hidden class를 갖기 때문에 성능에 악영향을 끼친다. 

• 모든 객체 멤버를 생성자 함수 안에서 초기화 (나중에 변화시키지 않도록 하자)
• 항상 같은 순서로 멤버를 초기화

var i = 42; // 31비트 부호있는 정수입니다. var j = 4.2; // 이 값은 double 타입의 부동 소수점 숫자 데이터입니다.

V8에서는 사용자가 사용하는 값을 통해서 Number 타입을 추론한다. 데이터 타입은 동적으로 변할 수 있기 때문에, 효율적으로 값을 나타내는 태그 사용이 필요하고, number 타입을 지속적으로 쓰는 것이 중요하다. 

• 31비트 부호있는 정수를 사용

- Normal Arrays

a = new Array(); for (var b = 0; b < 10; b++) { a[0] |= b; // 안 좋아요! } //vs. a = new Array(); a[0] = 0; for (var b = 0; b < 10; b++) { a[0] |= b; // 훨씬 좋습니다. 2배 더 빨라요. }

- Double Arrays

// 비효율적인 코드 var a = new Array(); a[0] = 77; // 할당 a[1] = 88; a[2] = 0.5; // 할당, 배열 타입 변환 (일반배열 -> double 배열) a[3] = true; // 할당, 배열 타입 변환 (double 배열 -> 일반배열) // 효율적인 코드 var a = [77, 88, 0.5, true];

Non-Blocking I/O

Event Loop

(출처: http://meetup.toast.com/posts/89)

브라우저 환경에 관한 그림이다. 비동기 호출을 위해 사용되는 'Timer'를 비롯하여 Event Loop 및 Task Queue 또한 JavaScript 엔진이 아닌 외부에 있음을 볼 수 있다. 다음은 Node.js 환경에 관한 그림이다. 

Node.js는 비동기 I/O를 지원하기 위해 LIBUV 라이브러리를 사용하며, Event Loop를 제공한다. JavaScript 엔진은 비동기 작업을 위해 Node.js API를 호출하며, 이때 넘겨진 콜백은 Event Loop를 통해 계획되고 실행된다. 

Task Queue는 콜백 함수들이 대기하는 큐(First In First Out) 형태의 배열이다. Event Loop는 호출 스택이 비워질 때 마다 Task Queue에서 콜백 함수를 꺼내와서 실행하는 역할을 해준다. 이런 식으로 Event Loop는 '현재 실행중인 태스크가 있는지'와 '태스크 큐에 태스크가 있는지'를 반복적으로 확인하는 것이다. 간단히 확인하면 다음과 같다. 

• 모든 비동기 API들은 작업이 완료되면 콜백 함수를 태스크 큐에 추가한다. 

• Event Loop는 '현재 실행중인 태스크가 없을 때' 태스크 큐의 첫 번째 태스크를 꺼내와 실행한다. 

참고

- http://khan.io/2015/02/25/the-event-loop-and-non-blocking-io-in-node-js/

- http://meetup.toast.com/posts/89

콜백 예시

- http://untitledtblog.tistory.com/98

HTML, CSS만으로도 웹페이지를 꾸밀 수 있다. 우리는 위 2가지 언어를 사용하여 도화지에 예쁜 그림을 그릴 수 있다. 하지만 가만히 움직이지 않는 그림으로는 많은 것을 표현할 수가 없다. 우리는 JavaScript등 동기방식 기술을 사용하여 정적인 그림을 움직이게 만들 수 있다. 

JavaScript

JavaScript의 이름 때문에 Java 언어와 관련 있어 보이지만, 이는 별개의 언어이다. 오히려 Java보다는 C언어의 Subset에 가깝다. 처음에는 LiveScript라고 불리었다가, 마케팅 차원에서 Java라는 단어를 이름에 썻다는 이야기가 전해져 온다. 

JavaScript는 여러분의 웹사이트에 상호작용성(ex. 게임 버튼을 눌렀을때 반응)을 더해주는 동적인 프로그래밍 언어이다. 개발자가 만든 문서에 방문자가 방문하여 어떤 동작을 취했을 때, 그 동작에 대응하여 반응이 일어날 수 있도록 해주는 언어이다. HTML과 CSS로 이루어진 문서가 정지해 있는 문서라면, JavaScript를 사용했을 때에는 방문자가 특정요소에 동작을 취했을 때 문서가 반응할 것 이다. 메뉴에 마우스를 올렸을 때에 서브 메뉴가 펼쳐지는 것 과 같다. 아래는 간단한 JavaScript예제이다.  

JQuery는 JavaScript의 생산성을 향상시켜주는 JavaScript 라이브러리이다. 존 레식에 의해, 2006년 공식적으로 소개 되었다. JQuery 가 순식간에 업계를 장악할 수 있었던 이유는 무지 쉽고 간편하기 때문이다. 장황한 설명보다는 JQuery의 장점을 코드로 쉽게 설명해주겠다. 

- JavaScript 표현식

이렇듯 JQuery는 코드를 단순하고 간결하게 유지해준다. 이를 사용하여 매우 적은 문자로도 JavaScript로 표현하고 싶은 것을 표현할 수 있다. JQuery의 철학은 매우 독특하다. 무엇이든 단순하고 재사용 가능한 것으로 유지하기 위해 디자인 되었다. 여러분이 이러한 철학을 이해하고 여기에 편안함을 느낀다면, JQuery가 여러분의 프로그래밍 방식을 충분히 향상시킬 수 있다. 

DOM parser

Document Object Model(문서 객체 모델)의 약자로 HTML과 XML문서를 위한 API로서 문서의 물리적 구조와 문서가 접근되고 다루어지는 방법을 정의한다. DOM은 XML문서를 하나의 Tree구조로 본다. 이에 Element의 위치에 따라 상/하위 개념 및 형제 개념을 가지고 있다. 

- DOM parser의 특징

1. XML문서를 메모리상에 올려놓은 다음 DATA를 찾아 들어가는 방식 사용
2. Tree구조를 다 읽기 때문에 큰 문서의 경우 시간이 길게 걸리
3. Data 저장되어 있는 순서대로 받음

1. 다양한 환경과 Application에서 사용할 수 있는 표준적인 프로그래밍 인터페이스 제공
2. HTML, XML같은 웹문서의 내용과 구조, 그리고 스타일 정보의 검색 또는 수정이 가능하도록 해주는 플랫폼

즉, 쉽게 말하자면 DOM parser를 사용하여 XML 문서에 있는 것을 객체화 시켜 JavaScript에서 사용할 수 있는 등 문서의 내용을 동적으로 조회, 갱신, 생성 및 삭제 할 수 있게 해준다. 아래는 예시이다. 

이에, 웹에 대해 본격적으로 공부를 하기에 앞서. 웹서비스에 널리 사용되는 기술들의 정의 및 용도에 대해 정리하고자한다. 단순히 코딩하는 기술 뿐 아니라 역사, 정의 등을 알 때에 활용할 수 있는 능력이 배가 될 것이라 생각한다. 

"여러 종류 칼 중 과일 깎을 때는 과도를 쓰듯, 용도에 맞는 기술을 사용하기 위해서는 배경지식이 필요하다."

1. HTML

Hyper Text Markup Language의 약자로 웹 페이지를 위한 지배적인 마크업 언어다. <> 형식의 태그로 이루어져 있다. 제목, 단락, 목록 같은 구조적인 의미를 나타내는 것 뿐 아니라 링크, 인용, 이미지 등도 나타낼 수 있다. 아래는 예시이다. 

- 5.0 웹 표준

1991년 HTML이 최초로 일반인에게 공개된 이후, W3C에서는 HTML 표준 규격을 발표해오고 있다. 1995년 HTML 2.0에 이어, 1997년에는 HTML 4.0이 발표되었다. 이후 10년이 넘는 시간이 지나 2014년 10월 HTML5 표준안이 발표되었다. 

HTML5는 이전 웹 표준들에 비해 큰 차이가 있다. 

• <div> 태그를 대신해 <header>, <article>, <footer> 등이 등장
• 플러그인 없이 멀티미디어 재생 가능 ( <audio>, <video>..)
• 문서 선언이 <!DOCTYPE html>으로 간소화 되었다. 
• 하위 호환성 : HTML5는 기존의 모든 문서 타입을 래핑한다(HTML4와 XHTML1.0 양쪽의 모든 유효한 요소들을 포함하고 있다).
• 간단한 문법 : 시멘틱 마크업을 위한 의미적 요소들이 강화되었으며, 생산성이 향상된 코딩을 지원하며, 문서의 크기가 작아졌다.
• text/html MIME 타입을 사용하면서도 SVG 및 MathML을 인라인으로 활용할 수 있는 기능을 제공한다.
• 새로운 웹 폼 속성들을 이용하여 폼 검증과 디자인이 간소화 되었다.
• 오류를 쉽게 처리할 수 있게끔 몇 가지 기본 원칙을 바탕으로 설계돼 있다.
• 플러그인 없이도 비디오와 오디오를 비롯한 미디어 재생이 가능하다.
• 플러그인이 필요없는 스크립트 API를 20여종 이상이 지원하며, 주요 API는 아래와 같다.
  • 2D 그래픽을 위한 캔버스 요소
  • 문서 편집
  • 드래그-앤-드롭
  • 지오로케이션
  • 로컬 오프라인 저장소
  • 미디어 캡쳐
  • 마이크로데이터

2. CSS

CSS는 쉽게 말해 HTML을 꾸며주는 언어다. CSS를 이용하여 HTML로 만들어진 웹페이지를 질서정연한 문서로 만들수도 있고, 복잡한 UI들의 결합체인 웹애플리케이션으로 만들수도 있다. 

CSS는 쉽고 간단하지만 갈수록 요구사항과 스펙이 복잡해지고 있고, 그에 따른 유지보수도 힘들어지고 있다. 이를 극복하기 위해 CSS 전처리기들이 등장하였는데, SCSS/SASS가 그것이다. 이들은 CSS가 가지고 있는 결함들을 보완해주기 위하여 등장하였다. 

- SASS

"사스는 기초 언어에 힘과 우아함을 더해주는 CSS의 확장이다."

SASS는 CSS를 만들어주는 언어로 Javascript처럼 특정 속성(ex. color, margin..)의 값(ex. #000, 3px...)을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수도 있고, 반복되는 코드를 한번의 선언으로 여러 곳에서 재사용할 수 있도록 도와주는 기능을 가졌다. 

SASS는 Ruby언어로 만들어졌기에, 사용하기 위해서는 Ruby가 설치되어있어야한다. 아래 SASS 예제를 보면 더 쉽게 이해가 갈 것이다. (아래는 SASS 중 하나인 SCSS예제입니다. 자세한 설명은 이어서 하겠습니다.)

SCSS	CSS
$display-default:block; $color-point:#080; .lnk{       display:$display-default;       position:absolute;       left:5px;       color:$color-point; }	.lnk {       display: block;       position: absolute;       left: 5px;       color: #080; }

위와 같이 변수명으로 값을 설정해줄 수 있다. 또한 중첩, mixin (함수) 기능 등이 있어, 반복되는 것들이 있어도 더 이상 복사&붙여넣기를 할 필요가 없다. 

참고: 널리의 블로그 (http://wit.nts-corp.com/2015/01/09/2936)

- SCSS

SASS를 유지하는 사람들은 조금더 CSS에 친숙한 처리기를 만들기 위해, Sassy CSS라는 SCSS를 내놓았씁니다. 이들은 거의 동일한 기능을 가지고 있다. SASS는 중괄호, 세미콜론 같은 기호를 없애기 위해, 들여쓰기에 의존하며 이는 간결한 문장으로 이어진다.  하지만 이는 실제 CSS 문법과는 그 차이를 두고 있다. SCSS는 주로 CSS 올려진 작은 추가사항이므로, CSS에 친숙한 사람이라면 알아보기가 더 쉽다. 

아래는 SASS와 SCSS 각각의 장점이다. 

참고: http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better

다음 시간에는 [javascript, json, jquery]에 대해 해보겠습니다.