불낙지버거의 블로그

Active X (액티브 X)

2017년 대선을 앞두고 유력 후보들이 ActiveX 폐지를 주장하고 있다. ActiveX가 무엇인지 간단히 알아보자. 

1. 도입

ActiveX는 취약한 웹 보안을 보완하기 위해 MS가 내놓은 플러그인이다. 사용자가 직접 인터넷에서 플러그인을 다운 받아야 한다. 이래서 대한민국 국민들은 인터넷으로 은행업무, 공공업무를 보기위해서는 많게는 5~6개의 플러그인을 다운 받아야 한다. 

99년 정부에서 ActiveX 도입을 결정할 때, 한국리눅스협의회에서는 ActiveX 허용시 보안 생태계가 극도로 나빠질 수 있다고 조언하였지만 정부는 듣지 않았다. 이에 대한민국은 최악의 ActiveX 생태계로 들어가게 된다. 

Internet Explore 11 버전에서 MS는 ActiveX의 취약성을 발견하고 이 기능을 제외 시켰다. 이와 동시에 대한민국 인터넷으로는 은행 업무를 볼 수 없는 초유의 사태가 일어난다. 이에 MS는 이례적으로 한국 Explore 11에만 ActiveX를 허용한다. 

박근혜 정부에서 '천송이 코트' 사건으로 해외에서 ActiveX때문에 한국 제품을 사지 못하자, ActiveX폐지를 지시한다. 이에 '공인인증서제도 폐지'(공인인증서 폐지 와는 다름)는 성공했지만. ActiveX폐지와 함께 .exe파일로 돌아서게 된다. 

2. ActiveX 단점

3. 해결책

http://www.pitchone.co.kr/8131

오늘은 웹 기술 중 '데이터'를 위한 기술에 대해 알아보겠다. 

XML (eXtensible Markup Language)

• 단순성: XML은 다른 코드셋이 아닌 일반 텍스트로 되어 있어 판독이 가능하며, HW/SW에 의존하지 않으므로 단순해질수 있는 특징이 있다.
• 표준성: W3C가 주도하므로 스펙의 표준화를 이룰 수 있다. 
• 구조성: Data에 구조를 부여한다. XML은 data를 설명하는 의미가 담긴 태그를 제공할 뿐 아니라 특정 구조를 저장한다. 
• 확장성: 사용자 임의로 무한한 태그 확장을 할 수 있으며, 상황에 따라 적절한 태그의 부여가 가능하다. 
• Character Set: 모든 XML프로세서는 16bit Unicode를 지원하므로 한글과 같은 2byte 문자권의 데이터도 처리 가능하다. 

참고

http://blog.daum.net/_blog/BlogTypeView.do?blogid=0FDfM&articleno=11281814

http://marcof.tistory.com/45

JSON (JavaScript Object Notation)

1. Ajax로 서버와 통신하며 손쉽게 데이터를 주고 받을 수 있다.  
2. Name, Value 형태의 쌍으로 구성된다.
{ name: 'John'}
값들의 순서화된 리스트로 나타난다.
var employees = [ {"firstName": "John", "lastName":"Doe"}, {"firstName": "Anna", "lastName":"Smith"} ];

Ajax (Asynchronous JavaScript and XML)

참고

생활코딩 (https://opentutorials.org/course/1375/6843)

오늘은 웹키워드 중 네트워크와 관련된 부분에 대해 설명하겠다. 

URI (Uniform Resource Identifier)

URI는 인터넷에 있는 자원을 나타내는 유일한 주소이다. URI의 존재는 인터넷에 요구되는 기본조건으로서 인터넷 프로토콜에 항상 붙어다닌다. URI는 인터넷 상에 존재하는 html, gif, jpeg 등의 파일을 찾고 가져오는 일과 관련되어있다. 

URI는 선호도에 따라 URL(Uniform Resource Locator) 또는 URN(Universal Resource Name)의 둘 중 하나의 형태로 쓸 수 있다. 쉽게 설명하면 아래 그림과 같다. 

URL (Uniform Resource Locator)

URL은 제일 앞에 자원에 접근할 수 있는 http, telnet, ftp와 같은 프로토콜 이름을 적는다. 그 이후에는 구분자(:) 및 이외의 정보들을 적는데, 여러분이 흔히 아는 인터넨 주소를 떠올리면 된다. (ex. http://52.84.38.323)

참고

http://imovator.tistory.com/entry/%ED%8E%8C-URI-URL%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90

HTTP (HyperText Transfer Protocol)

HTTP는 Server/Client 모델이다. 클라이언트는 서버에 URI를 사용하여 요청(Request)하고, 서버는 그 요청에 대해 반응(Response)한다. 즉, HTTP프로토콜을 사용하여 URI에 속한 URL 주소로 서버에 요청하면, 해당 서버에서는 요청에 응답하여 웹페이지를 띄워준다. 

HTTP는 Connectionless 한 프로토콜이기에, 요청/반응 이후에 접속을 끝는다. 이에, 서버와 계속해서 통신이 필요한 경우에는 Ajax와 같은 특수한 방법을 사용한다. 마찬가지로 Stateless 한 프로토콜이기에 상태 저장이 필요하면 쿠키나 세션 방식을 사용한다. 

다음은 HTTP에서 사용하는 Request Method들이다. 

HEAD, GET, POST, PUT, DELETE, TRACE, OPTIONS. CONNECT

참고

http://dalkomit.com/134

SSL (Secure Socket Layer)

참고

https://wiki.kldp.org/HOWTO/html/SSL-Certificates-HOWTO/x70.html

잡스에 의해 아이폰이 세상에 공개된 이후, 스마트폰은 전세계로 퍼져나갔다. IT 생태계도 기존 PC에서 모바일로 급격히 이동되었다. 이에, 모바일 애플리케이션에 대한 사람들의 요구가 증가하였다. 

현재 모바일 시장은 Android와 iOS가 양분하고 있다. 하지만 대기업 혹은 대형 포털회사를 제외한 곳에서 2개의 언어로 애플리케이션을 개발하기란 쉽지 않다. 이를 보완하고자 등장한 것이 하이브리드 앱이다. 

하이브리드앱이란? 

- 하이브리드앱의 장점

• 네이티브API와 브라우저 API를 이용한 다양한 개발이 가능
• 웹 기술을 사용해 앱을 개발 가능 (UI를 통합하여 단일 코드로 개발 가능)
• 한번의 개발로 다수의 플랫폼에 대응 가능 

• 네이티브 기능에 접근하기 위해 결국 네이티브 지식이 필요
• 웹뷰에서 앱을 실행하는 경우이기에 앱의 성능이 곧 브라우저의 성능
• UI프레임워크 도구를 사용하지 않는다면 개발자가 UI를 제작해야 함

Ionic (아이오닉)

• Cordova(Phonegap) 환겨을 제공한다. 
• Cordova(Phonegap) 플러그인을 사용할 수 있다. 
• AngularJS 기반으로 SPA(Single Page Application)를 MVC나 MVVM 패턴으로 개발할 수 있다. 
• 네이티브에 가까운 UI 컴포넌트들을 제공한다. 
• HTML5 애플리케이션을 빠른 시간 안에 개발할 수 있다. 

Ionic 공식 블로그에서는 다음과 같이 소개하고 있다. Where does the Ionic framework fit in Ionic"의 궁극적인 목표는 HTML5를 이용해 네이티브 앱을 더 쉽게 개발하기 위한 것이라고 소개하고 있다. 

Ionic은 nodeJS를 사용하여 자체적인 command를 가지고 있다. AngularJS를 사용하여 UI 또한 구성할 수 있다. 앱스토어 및 플레이스토어에 쉽게 등록할 수 있도록 설정을 할 수 있다. 마지막으로 위에 장점에도 설명하였듯이 자체적인 UI 컴포넌트를 가지고 있어 쉽게 애플리케이션을 구성할 수 있다. 아래 사진은 Ionic 자체 컴퍼넌트를 사용한 예제이다. 

(출처: http://blog.saltfactory.net/ionic/create-hybrid-app-using-ionic.html)

최근 Ionic 팀에서는 Ionic2를 배포하엿다. (Ionic팀의 Ionic2 소개) 기존 Ionic에서는 AngularJS를 사용하였지만 Ionic2에서는 시대의 흐름에 맞추어 AngularJS2를 사용하였다. 그러면서 자연스럽게 AngularJS 버전이 바뀌면 JavaScript에서 TypeScript로 옮겨간 것 처럼, Ionic또한 TypeSript를 사용하고 있다. 

Ionic에 대한 자세한 정보를 알아보기 위해서는 'Ionic 공식 홈페이지' 및 'Ionic 포럼'을 확인해보면 좋다. 현재 Ionic에 대한 정보는 Stackoverflow보다 Ionic 포럼을 활용해야만 더 자세히 알 수 있을 것이다. 

참고

http://blog.saltfactory.net/ionic/create-hybrid-app-using-ionic.html

http://mobicon.tistory.com/488

MEAN Stack 이란? 

MongoDB

Express

• 웹 서버로의 요청
• 요청에 대한 웹 서버의 응답
• 웹 애플리케이션 구성하기 위한 체계화된 디렉토리 구조

AngularJS

AngularJS는 HTML과 HTML에 삽입되어 나타나는 데이터를 함께 묶어서 표현해 주기 위해 사용된다. 웹페이지의 데이터 값에 변화가 생길 때, AngularJS는 변화를 곧바로 적용하여 업데이트를 가능하게 해준다. 이러한 방식을 Two-way Binding이라 부른다. (새로고침을 하지 않아도 웹창이 업데이트 되는 것)\

최근에는 Google Angular 팀에서 AngularJS 2를 내놓았다. 이는 AngularJS 1을 migration하지 않는 완전 새로운 프레임 워크를 내놓았기에 개발자들 사이에서 많은 의견이 오고갔다. 가장 큰 특징은 기존에 있던 Controller 기능은 사라지고, 웹을 Component화 시켰다. 기능을 모두 Component화 시켜 레고블록과 같이 조립시키기 위한 것이다. 

이를 위해 AngularJS1의 주요 기능인 Contorller, $cope, modeule, jqlite같은 요소들이 삭제되고, AtScript가 추가되었다. 

NodeJS

NodeJS는 서버를 구축하기 위해 사용되는 프레임워크이다. 웹 서버와 웹 서버에서 구동되는 애플리케이션 구축을 도와준다. NodeJs는 HTTP 서버 라이브러리를 포함하고 있는데, 이는 웹 서버를 실행시키기 위한 Apache 같은 서버 프로그램이 필요하지 않다는 것이다. 이에 Apache와 같은 서버 운용정책에 종속 적이지 않고, 다양하게 개발하는 것이 가능하다. 정책이 없는 만큼 복잡하기에 위에 적은 Express가 존재한다. 

NodeJS의 특징 중의 하나는 단일 쓰레드 환경을 도입한 것이다. 이에 동시접속자가 많아도 느려지지 않게 서비스를 구성할 수 있다. 이를 위한 것은 앞선 키워드 중 'Non-blocking I/O'와 'Event Loop'를 참고 바란다. 

참고

http://dog-paw.tistory.com/entry/MEAN-%EC%8A%A4%ED%83%9D-%EA%B5%AC%EC%84%B1-%EC%9A%94%EC%86%8C-MongoDB-Express-AngularJS-Nodejs

지난 포스팅에서 MVC를 비롯한 여러 디자인 패턴에 대해 알아보는 시간을 가졌다. 디자인 패턴을 비롯하여 웹서비스를 구현하기 위해서는 많은 여러가지 기술들이 접목되어야한다. 이러한 기술들을 無에서부터 쌓아나가기에는 시간과 돈이 많이 들 것이다. 이를 보완하여 無가 아닌 有에서 시작하기 위해 도와주는 것이 Framework이다. 

Framework

라이브러리 '자주 쓰일 만한 기능들을 모아 놓은 클래스들의 모음집'로 정의할 수 있다. 하지만  Framework는 라이브러리에 기능은 물론, '자주 쓰일 만한 기능들을 모아 놓고, 개발자가 나름대로 기능을 확장, 설계 변형 하면서 사용해나갈 수 있는 모음집'으로 정의할 수 있겠다. 

즉, 쉽게 말하여 라이브러리지만 개발자가 주어진대로 사용하는 것이 아니라 입맛에 맞춰 확장, 설계, 변형 할 수 있는 집합체를 말할 수 있다. 그래서 Framework는 코딩을 하는데 있어 뼈대 및 골조라고 할 수 있다. 

- Framework의 장점

• 동일한 결과를 얻기 위한 코딩 속도 보다 빠르고 간편하게 작성 가능
  
• 개발자의 수준을 평준화 시키게 된다. (= 일정 수준의 성능이 나온다.)
• 다른 사람이 작성한 코드라도 쉽게 패턴을 익히고 유지 보수에 편리하다. 

참고

http://blog.naver.com/PostView.nhn?blogId=superb_lr&logNo=220560754376&categoryNo=70&parentCategoryNo=-1&viewDate=¤tPage=&postListTopCurrentPage=&isAfterWrite=true

- Framework7

Framework7은 무료 오픈 소스이며 HTML로 iOS 및 Android 하이브리드앱을 만드는 Framework이다. 

- Spring Framework

웹 서비스의 규모가 점점 커지며 엔터프라이즈급 개발을 해야할 일이 많이 생겼다. 이를 해결하기 위해 등장한 Spring Framework는 자바 애플리케이션 개발을 위한 포괄적인 기능을 제공하는 자바 플랫폼이다. Spring은 당신이 애플리케이션에 집중할 수 있도록 포괄적인 infrastructure를 둔다. MVC 모델을 기본적으로 제공한다. 

중, 고등학교 미술 시간 그림을 그릴 때 우리는 '구도'에 대해 배웠고, 이를 활용하여 그림을 그렸던 기억이있다. 컴퓨터 프로그램을 만들 때도 '구도', 전문용어로 '디자인 패턴'이 중요하다. 디자인 패턴은 건축으로 치면 공법에 해당하는 것으로 소프트웨어의 개발 방법을 공식화 한 것이다. 소수의 뛰어난 엔지니어가 해결한 문제를 다수의 엔지니어들이 처리할 수 있도록 한 규칙이면서, 구현자들 간의 커뮤니케이션의 효율성을 높이는 기법이다.  (위키피디아 참고)

웹 서비스를 디자인하는데 자주 사용되는 여러 디자인 패턴들이 있다. 자주 사용되는 만큼 검증된 내용들이고, 웹 서비스를 효율적으로 운영하는 것을 도와준다. 오늘은 그 디자인 패턴들에 대해 알아보고자 한다. (Model과 View를 어떻게 연결 지으냐에 따라 각 패턴이 나뉘게 된다.)

MVC (Model View Controller)

View는 웹 서비스 사용자들에게 직접적으로 보여지는 부분을 다루는 요소이다. 클라이언트가 브라우저 상에서 볼 수 있는 부분들, 즉 외관을 구성하는 요소들을 아우른다. 키워드 첫 부분에 설명한 웹 페이지 표현 요소들인 HTML, CSS, JavaScript 등의 파일들이 이에 속한다. 

- Controller (컨트롤러)

Controller는 Model과 View 중간에서 둘 간의 상호작용을 중재하는 요소이다. 쉽게 말하면 Model이 관리하는 DB에 저장된 데이터들을, 웹 브라우저 즉, View 창에 띄워주는 역할을 한다. 

즉, Controller는 클라이언트의 URL 요청을 받아(입력을 담당한다) 웹페에지를 보여주고자 하는데, 그 과정에서 필요한 데이터를 얻기 위해 Model에게 데이터를 요청하고, Model이 DBMS를 조작하여 해당 데이터를 찾아와 Controller로 전달해주면, Controller는 이 데이터를 해당 웹페이지의 View에 반영한 뒤 클라이언트 측으로 제공하는 것이다. 

(출처: http://coding-dragon.tistory.com/4)

위 그림과 같이 모든 입력은 Controller가 받아서 처리한다. 입력이 들어오면 Controller는 입력에 해당하는 Model을 업데이트하고, Model을 표현해 줄 View를 선택한다. 하나의 Controller는 여러개의 View를 가질 수 있으며, Controller는 여러개의 View를 선택하여 Model을 표형할 수 있다. 반대로 View는 Controller에서 어떤 동작이 일어나는지 알수 없다. 

이때 Controller는 View를 선택할 뿐 직접 업데이트 하지 않기 떄문에, 주로 다음과 같은 방법을 통해 View를 업데이트 한다. 

• View가 Model을 직접 사용하여 업데이트

• Model에서 View에게 Notify해 주는 방법

• View에서 Polling하여 Model의 변화를 받아오는 방법

참고

- 코드라이언 (http://www.codelion.net)

- http://coding-dragon.tistory.com/4

- http://blog.javarouka.me/2013/06/understanding-mvc-mvp-and-mvvm.html

MVP (Model View Presenter)

참고 및 인용

http://coding-dragon.tistory.com/4

MVVM (Model View ViewModel)

MVP에서 Presenter와 View가 의존 관계에 있었다면, MVVM에서 View와 ViewModel은 독립적인 관계를 형성한다. MVP와 마찬가지고 View는 Client로부터 입력을 받고, ViewModel은 Presentation logic을 처리하여 View에 데이터를 전달하는 역할을 한다. 

각각의 View는 자신이 사용할 ViewModel을 선택하며, ViewModel은 Model을 베이스로 Presentation Logic에 따라 서로 다르게 구현된다. 따라서 View에 어떤 ViewModel을 연결하느냐에 따라 로직 처리가 달라지고, 각 로직 처링 따라 Model이 변경되면 해당하는 ViewModel을 사용하는 View가 자동으로 업데이트된다. 

결론

• 재사용 및 유지/보수에 용이하다. 
• HTML을 직접 다룰 수 있어 반응형 웹과 모바일 디바이스 지원 측면에서 좋은 전략을 세울 수 있다. 
• 분업에 용이하다. 
• URL 라우팅이 유용하고, 어떻게 구성하고 해석할지 쉽게 정할 수 있다. 
• 시스템에 다른 부분을 변경하지 않으면서 UI를 쉽게 변경할 수 있다. 
• 현재 사용하는 DB를 다른 환경으로 옮길지라도 룰에는 영향이 없다. 
• 각 요소가 서로 독립적이다. 

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]에 대해 해보겠습니다.