[SK고용디딤돌] 자바스크립트 (1/7) - 1주차

** CLIENT **

 

<시장의 변화>

2005 : Web 2.0시대

- 집단지성, 자발적 참여 → Wikipedia

- AJAX(Asynchronous JavaScript And XML)가 등장

* HTTP

- HTTP 요청을 보낸뒤 다시 요청을 보내면 아까 그 요청인지 알 수 없음

- Status Less Protocol → 상태 유지를 못함

- 요청과 응답이 동기화(Synchronous) 되지 못한 프로토콜

- Real Time Web Service 를 만들기에는 좋지 못함

 

* Web Browser의 3가지 컴포넌트

1) Network Engine (요청/응답처리, 입/출력 담당)

→ HTML 문서를 얻음 → HTML Parser를 이용하여 얻음 → DOM 객체트리를 만듬 → Rendering(=그리기) 함

※ Rendering : 디지털 정보 처리, 어떤 정보를 하는지가 중요

 

2005년 이전에는 데이터 갱신을 위해 페이지 전체를 바꿧다.

그러나 AJAX가 나온 이후 XHR을 이용하여 DOM의 일부를 바꾼다.

Rendering이 그부분만 이루어짐. 부분적 Rendering이 가능해 짐 실시간성을 제공

 

AJAX는 Semi Realtime web Service 이다. (준 실시간성, 완벽한 실시간은 아니다)

 

2) JavaScript Engine

 

3) Web Layout Engine

 

+알파 XHR

 

2009 : 스마트폰 등장 → Mobile Web(HTML5)

- 모바일 브라우저에 들어가는 것은 WebKit Engine이라고 한다.

- WebKit은 HTML5로 되어 있음.

 

2012/2013 : 웹 표준 HTML5의 등장

- 기존 HTML은 태그만 제공.

- HTML5

1) Semantic

2) Communication → 실시간성 제공 : WebSocket, SSE, WebRTC(Web Real Time communication) [표준기술 3가지, 용도는 다름]

※ Socket : 전이중방식 Full Duplex (송/수신을 분리, 채널이 2개있어야 함, 양쪽 동시에)

 

[2013-12] 모바일이 PC의 트래픽을 능가, Mobile First 개발  → PC Web 1) Responsible Web 2) Adoptive Web

 

3) drawing → Canvas 등 (Flash → Canvas API로 대체 되었다.)

 

반응형 웹의 핵심기술 HTML5에 들어가있는 CSS3이다.

HTML5 = HTML5 + CSS3 + JavaScript

 

2015 : SPA(Single Page Application)

* SPA의 시장, Web 기술

1) AngularJS : Google이 개발 (국내 95%↑) "HOT"

2) ReAct : Facebook이 개발 (국내 5%↓)

 

수요는 많지만 공급이 적다(제대로 쓸줄 아는 사람이 적다)

AngularJS와 같은 Client Side 기술을 배울 수 있으면 배워보자.

 

 

** SERVER **

 

Java시장이 서버를 장악했다! (현재,과거,미래 모두)

Java를 기반으로 사용했던 Spring Framework (=like 항공모함).

 

모바일과 비교했을 때 Java와 Spring은 더뎠다. 대안으로 등장한게 Node.js

동일한 서비스를 Java와 비교했을때 resource 점유율이 40% 밖에 안됨.

 

Node.js는 JavaScript 기반. JS를 단순하게 생각하면 안된다.

객체지향언어 수준으로 functional 언어 수준으로 사용해야 한다.

 

JavaScript는 ECMA라는 표준이 있다. 우리는 ECMA Script5/6 을 사용할 예정.

객체지향 + 함수형 프로그래밍 언어이다.

 

결론, 모바일 시장에서 Node.js는 합격적이다!

 

** JavaScript 기본 **

- 개발도구 : JetBrains IDE에서 제공하고 있는 WebStrom을 사용할 예정(학교 메일을 이용하여 무료 다운 가능)

* JavaScript 개발자라면 알아야 하는 것

1) Prototype Chain

2) Scope Chain

3) Closure

* JavaScript의 특징

1) 값을 할당 했을때 타입이 결정되는 것. → dynamic language (동적 언어)

2) 값 / 매개변수 / 실행코드 반환값 으로 함수를 전달할 수 있다. → functional program language (함수형 언어)

                      

* 빅데이터

1) Hadoop (Map Reducr + HDFS(Hadoop File System) + YARN)

- 데이터 분석에 포커스, 실시간 분석은 아니다

- 하둡의 개발 언어는 Java

- HDFS 데이터를 올려두는 시스템

2) Spark

- 스팍을 개발하는 언어는 Scalar

- 배치분석과 실시간 분석

※ Gartner에서는 빅데이터를 1TB 라고 하였다.

 

- D드라이브 할당단위크기의 의미 → Block의 크기를 결정하는 것

- File System에서 파일 구성의 최소 단위를 Block이라고 한다.

- memory를 올렸다 내렸다 하는것을 Swap이라고 한다. 이 과정에서 Disk I/0가 발생 함.

- 보통 Server들은 블럭을 크게 잡는다. Default로 64KB이다.

 

- 128KB 파일을 저장하기 위해 4KB는 I/O 32번, 64KB는 I/O2번 64KB가 더 빠르다.

- Hadoop은 기본 HDFS은 기본 64MB이다.

- 파일 시스템이 네트워크로 구성 되어있는 것 분산 네트워크.

 

- code가 data를 사용할 수 있도록 하자. 그게 바로 함수형 언어이다. return으로 를 전달할 수 있다.

 

※ Polyglotter : 프로그램 언어를 최소 3개 이상 마스터한 개발자.

※ Polyglot programming : 다른 프로그램 언어를 조합하여 사용하는 프로그래밍.

 

* 소비자 중심의 개발을 해야 한다.

SOA(Service Oriented Architecture) → WOA(Web Oriented Architecture)

 

* Cost의 크기

- 메모리 < 디스크 < 네트워크

 

* OS 4대 기능

1) Process Management

2) Memory Management

3) Disk Management

4) File System Manage [없는 OS도 있음 → OS 3대 기능]