[Packt] JS

JS는 ECMAScript(ES) 사양을 따름. 현재는 ES9 버전 https://www.ecma-international.org/publications/standards/Ecma-262.htm

Standard ECMA-262

 

웹브라우저 개발자 도구의 콘솔을 이용하여 JS를 사용할 수 있다.

 

서버측에서 데이터를 로드할 때느 XML HTTP를 요청한다.

 

JS 초창기의 주요 기능은 Client측의 유효성을 검사하는 일이다.

 

JS는 OOP(객체지향언어)

 

콘솔에 출력할 때

console.log("string");

 

웹 브라우저 별 JS 엔진이 다르다.

• Chrome : V8 엔진
• Firefox : SpiderMonkey

V8 엔진은 인터프리터

JavaScript 엔진은 JIT Compile 유형의 인터프리터이다.

JIT Compile은 실제 실행하는 시점에 기계어로 번역하는 컴파일 기법이다. 

 

• V8엔진은 C++로 작성됐고 Chrome과 Nodejs에서 사용됩니다.
• V8엔진은 ECMA-262에 기재된 ECMAScript를 구현했습니다.
• V8엔진은 standalone으로 동작할 수 있어서 우리는 자바스크립트 엔진을 C++ 프로그램에 내장시킬 수 있습니다.
• V8 엔진은 또한 내부적으로 여러 개의 쓰레드를 사용합니다

V8 엔진 소스코드 보기 :  v8/samples/shell.cc 

v8/v8

• Engine: JavaScript로 작성된 스크립트를 기계 실행 가능하게 변경. 구문 분석 및 JIT 컴파일
• Runtime : 실행 중 프로그램에서 사용할 수 있는 기본 라이브러리를 제공 // Chrome의 alert 가 window lib 내에 있음

[ECMAScript6 / ES6] 아름다운 JavaScript를 위한 ES6

V8에서 실행중인 프로세스의 메모리 구조 == Resident Set

https://ui.toast.com/weekly-pick/ko_20200228/

V8 엔진(자바스크립트, NodeJS, Deno, WebAssembly) 내부의 메모리 관리 시각화하기

https://speakerdeck.com/deepu105/v8-memory-usage-stack-and-heap

V8 Memory usage(Stack & Heap)

 

 

JS는 Client based/ Server based/ Desktop based / Mobile based 로 나눌 수 있다.

• 우리가 아는 JS : Client
• Node.js : Server based JS
• Electron : Descktop Based JS
• Agular, React, Vue : Mobile Based JS

 

DOM 에서 Element에 Access

모델(model) 은 자바스크립트가 오브젝트로서의 웹사이트 document의 컨텐트와 엘리먼트에 접근할 수 있도록 해줍니다.

DOM은 자바스크립트 클라이언트 사이드에 의해 수정된다.

document.getElementById('ID of HTML tag'); // return element
document.getElementByTagname(element-name); // e.g. "div"
document.getElementsByClassName(css-class-anme);
document.querySelector(selectors); // css-selector
document.querySelectorAll(selectors) ;
document.createElement(tag name); // HTML element 생성
document.createTextNode(data); // html element 내부의 h1 같은 요소

document 객체는 우리가 웹사이트에 접근하고 수정할 수 있는 많은 프로퍼티(properties) 와 메소드(methods) 를 가진 빌트인 오브젝트입니다.

 

document는 오브젝트입니다. 

body는 '.'으로 접근할 수 있는 document의 프로퍼티입니다

 

 

JS는 위에서 아래로 실행된다 (C style)

Container.appendChild(newitem);

 

JS에는 미리 만들어진 Obj가 있다.

• window
• console 
• document : about HTML element, styles
• location : about URL
• math
• date

Array Obj도 있다.

 

Predefine function들 ..

 

---

JS를 추상화 시켜서 Framework , Libraries 로 사용.

둘의 차이를 다룬다.

• Library : 주어진 작업을 수행하는 기능의 외부 컬렉션, 기능은 API를 통한다.
  - e.g. : lodash.uniq()
• Frameworks : Library의 특정한 형태. 재사용 가능한 프레임으로 예를 들어 Vue.js가 프레임워크가 된다.
  
  

jQuery는 Library. 질의가 매우 간단해 진다.
$.functionName

또한 jQuery는 애니메이션 기능을 제공한다 (UI)

- HTML/DOM 조작
- CSS 스타일
- HTML 이벤트 핸들링
- AJAX 서비스 호출

 

Backbone.js is a library with RESTful JSON interface.

The Ember.js JavaScript framework uses the Model and View pattern.

React.js : Facebook이 개발

Angular was developed by Google.

---

전역변수 :  지역변수에 해당하는 키워드를 사용하지 않음

지역변수 : var, let, const를 사용

 

• var : 함수 범위에서 생존 (default value : undefined)
• let : 블록범위(if,for) 에서 생존 (default value : undefined)
• const : 상수

NULL 은 Obj 타입이다. (NULL = no value)

NaN = Not a Number

 

---

JS 의 모든 숫자는 64bit Floating-point 값이다.

다른언어와 다르게 부동소수점과 정수 사이의 분화가 없다.

 

Number function이 있다.

e.g. Number.isNan(<value>)

e.g. toExponential()

---

String에 대해서 method 오버로딩으로 + 연산이 가능.

` (back quote)를 쓴 string은 $ 표시로 연산이 가능하다.

String method(function)도 존재한다.

---

Arrow Function

var myFun = (param) => param + 1; // return 없이 반환을 해준다

---

JS 는 싱글-스레드 플랫폼.

JS는 VM으로 알려진 엔진에서 실행

 

TIME과 관련된 이벤트 함수가 존재

이벤트 모르겠어 너무 어려워 ㅠㅠ

이벤트 버블링과 캡쳐링

document.body.addEventListener("click", clickHandler);

이벤트는 굉장히 다양히 있다.

• Network
• Element focus
• Web sockets
• CSS animations and transitions
• Forms
• Printing
• Keyboard interactivity
• Element drag and drop
• Window and document events

---

<HTTP>

HTTP : HTML와 같은 Markup Language를 전송하기 위해 설계됨.

HTTP 통신 방식 :  : 서버에서 PHP/JSP 등을 실행 해야 HTML이 생성된다.

 

 

GET : URL에 내용이 포함 되어있음. URL은 최대 255자 까지 공급됨.

POST : 255자의 한계를 극복하고자 사용된 방법.

이러한 HTTP 프로토콜은 RFC 규격을 따른다. 

URL 얘기가 반복되는데, HTTP는 URL을 요청 할 떄만 서버에서 페이지를 꺼내서 보여준다.

 

HTTP 패킷 헤더

• Method : GET , POST
• Status Code : 응답 상태 (200번대 OK, 400번대 Client Err , 500번대 Server Err)
• content-type : file format & Encoding type
• Remot Addr : 요청을 처리한 IP & Port

 

위 HTTP Packet의 Body 에는 JSON, JPEG 등의 포맷이 본문(Body)에 포함 될 수 있다.

 

웹 브라우저의 개발자모드를 사용해서 netwrok tap에서 HTTP를 캡쳐할 수 있다.

 

 

참조 : https://medium.com/@chullino/http%EC%97%90%EC%84%9C%EB%B6%80%ED%84%B0-websocket%EA%B9%8C%EC%A7%80-94df91988788

HTTP에서부터 WEBSOCKET까지

위와 같은 HTTP 통신에서 진보한 방식이 AJAX 방식이다.

AJAX = JS + XML 인 비동기 방식.

이 JS 에는 XML Http Request (XHR) 이라는 API가 있었다.
그래서 이러한 비동기방식을 XHR 통신이라고도 한다.

AJAX를 사용하면, 서버로부터 새로운 HTML을 받는 것이 아니다.

클라이언트가 동일한 웹페이지 내에서 DOM을 변경하는 것이다.

 

그럼에도 AJAX의 한계는 존재한다.

AJAX 또한 HTTP 기반이기 때문에, 클라이언트의 요청이 있어야 서버로 부터 응답을 받는다. (이를 Polling 방식 이라 한다)

따라서 AJAX는 클라이언트의 요청 없이 서버로 부터 응답을 받는 경우를 해결할 수 없다. ( 이를 Push 방식 이라 한다.)

 

참고 : HTML5 이해 하기 : https://www.slideshare.net/hiscale/111015-html5-1

[111015/아꿈사] HTML5를 여행하는 비(非) 웹 개발자를 위한 안내서 - 1부 웹소켓.

 

따라서 이러한 Push 방식을 해결하고자, 양방향 통신이 등장하였고 이것이 「웹소켓」 이다

2014년, HTML5가 등장하며 웹소켓도 함께 등장하였다.

 

---

Form Tag는 JS Engine과 별도로 존재하지만 JS와 상호작용 한다.

Form은 HTTP 에서 전송된다.

<form method="POST" action="/data/form-handler.php" enctype="text/plain">
   ...
</form>

<Form Tag 의 속성>

Attribute	Value
method	GET, POST, PUT .... etc
action	URL string
enctype	MIME string  e.g. application/x-www-form-urlencoded e.g. text/pain e.g. multipart/form-data
target	parameter를 보여줌

Form tag는 JS를 통해 동적으로 제출되어 발생할 수 있다.

<form method="POST" action="/data/form-handler.php" enctype="text/plain">
   ...
   <input type="submit" value="submit" />
</form>

JS는 getElementByTagName("form") 을 가져 온뒤 , form.submit() 을 통해 실행 될 수 있다.

 

<Form Control>

- Input Control

<input type="submit" value="submit" />

- Button Control

<button onclick="buttonHandler();">Clickable Button</button>

- CheckBox Control

<input type="checkbox" checked />

등등등 ... 라디오 컨트롤, 패스워드 컨트롤, 이메일 ,tel, url, 숫자, 이미지, 파일 , 셀렉트, 텍스트 에어리어 등등..

히든 컨트롤은 눈에 보이지 않는다.

<input type="number" min="0" max="100" />

---

<JS RunTime 환경>

런타임 환경은 SW를 시스템에서 실행 할 수 있도록 하는 App 이다.

JS의 경우 대부분 런타임 환경은 Browser인 경우가 많지만 항상 그런 것은 아니다.

런타임 환경은 아래와 같이 4가지 요소로 크게 구성된다.

• JS 엔진
• API
• 메시지큐/콜백큐
• 이벤트 루프

1. JS 엔진

JS 엔진의 역할 : Runtime 時 JS 소스코드 -> 컴파일 -> 기계코드

JS 엔진의 구성 : 메모리 힙 / 콜 스택

- 메모리 힙 : 런타임에 사용되므로, 동적으로 Read/Write 위함. 정렬되지 않은 메모리 영역

- Call stack : 스택 프레임을 사용.

Stack이 LIFO 구조인 이유
1. Return 주소 때문에
2. Arg 때문에
3. 함수 내 지역변수 영역 할당

메모리 관리
- JS 엔진은 메모리를 Heap을 사용
- 런타임 시 메모리가 할당 되기 때문에 회수 하는 것 또한 중요하다.

가비지 컬렉터
- Mark-and-sweep 이라는 프로세스를 사용해서 가비지를 컬렉트 한다.
- root Obj 에서 기작하여 개체를 가로지르는 방식으로 작업을 수행한다.

메모리 누수
- 메모리 회수가 100% 보장 되는 것은 아니므로 보강할 수 있는 방법이 필요하다.
- 가장 일반적인 방법으로 Event Listener를 사용한다

그 외 등등 메모리 관리법은 너무 어려워서 스킵한다...... 읽어도 내가 이해도 안되고 설명도 안된다.

 

2. API

Browser APIs 라고도 불리는 이것은 JS에 의해 제공된다.

예를들어, DOM, setTimeout() 과 같은 Method에 대한 Access를 제공한다.

Node.js는 서버측 Runtime 환경이며 서버측에서는 DOM이 타당하지 않기 때문에 CRUD(create, read, update, delete) Filesystem 관련 API 같은 것들을 제공한다.

API는 비동기식 운영의 중요 요소이다.

 

BOM 은 브라우저에서 JS를 사용할 수 있도록 한 Method의 집합이다

(e.g. setTimeout() , addEventListener())

 

Web Storage API

- 브라우저에 데이터를 저장하는 것은 대기시간을 절약할 수 있다.

- 쿠키와 비슷한 느낌이다 (정확히는 다르다)

- 쿠키는 클라이언트 -> 서버 로 데이터 전송이다. 쿠키는 일반적으로 4KB를 저장한다.

- 웹 스토리지 :  클라이언트 쪽에만 저장이 된다. 쿠키보다 많은 양을 저장하며 일반적으로 10MB를 저장한다.

- 웹스토리지는  브라우저 캐시를 제거할 때 제거된다.

 

웹스토리지의 2가지

- 세션 스토리지 : 브라우저 창이 닫힐 때 까지 유지 (브라우저 창 유지 == 세션 유지)

- 로컬 스토리지 : JS를 통해 캐시를 지울 때까지 클라이언트의 컴퓨터에 저장.

 

DB스토리지

- 키와 값으로 구성 됨. Obj 스토리지 형태.

- DB 스토리지는 CRUD에 사용

 

3. 메시지 큐

콜백 큐 는 Task 대기열이라고도 불리며, 적절한 시간에 이벤트를 발생시킨다.

 

4. 이벤트 루프

이벤트 루프를 통해 메시지큐 --> 콜스택으로 메시지가 이동한다.

 

---

Node.js. NPM

- 이벤트 기반 아키텍쳐

- Node.js 는 단일-스레드 아키텍쳐

- 어떻게 수많은 요청을 처리? -> 정답은 이벤트 루프 !

 

- Node.js는 llibuv 라는 lib를 사용. OS 커널의 도움을 받아 스레드를 효율적으로 사용

- Node.js는 VM Shell을 제공

- node는 쉽게 관리할 수 있도록 npm 이라는 패키지를 제공하고, 이를 관리하기 위한 메타데이터로 json파일이 있다.

동기식 프로세싱 vs 비동기식 프로세싱

동기식 : 프로그램 실행이 선형적인 경우
비동기식은 반대겟쥬?

콜백이 비동기 방식에 사용됩니다.

- node 에서 Import 문법 : "require('path')"

- require() Module로 URL도 호출할 수 있는데, URL의 구조는 아래와 같다.

- require('fs') 를 하면 파일 시스템을 호출 할 수 있다. fs module

- require('os')를 하면 OS를 호출할 수 있다.  os module

 

- require('express') express Framework를 사용하여 라우팅, bodyparser 를 사용할 수 있다.

- require('morgan') 모건 로거를 사용하면 서버의 상태를 표시 할 수 있다.

---

RESTfult API with JSON

- 서로 다른 언어의 서비스가 의사소통 하기 위한 요청과 대응의 공통 규칙

- {} Key - value

 

SOAP

- XML 형식(markup)

 

JSON

- {} 로 Key-Value

- []로 list

 

---

Regex

• ^ : Begin Anchor
• [] : Range
• \d : Charactor
• {} : repeat
• $ : End Anchor