웹의 역사
1990년 Tim Berners lee WEB을 창시(정적인 체계의 웹).
Marc Andreessen에 의해 Netspace라는 대중적 웹브라우저 등장.
Brendan Eich에 의해 JavaScript 등장(동적인 체계의 웹 탑재).
즉, 사용자와 상호작용이 가능해짐.
2004년 Gmail, GMap 등장으로 Javascript의 발전.
2008년 Google Chrome의 성능 향상을 위해 JavaScript Engine 개발(V8 오픈소스 공개와 개발자들의 관심을 이끔).
2009년 Ryan Dal JavaScript 언어로 구현된 서버 사이드 언어 Node.js 출시.
- JavaScript와 Node.js
JavaScript는 Language로서의 자바스크립트와 Run Time(환경)으로의 두가지의 의미가 있음.
JavaScript 프로그래밍 언어로 Web Browser를 제어하거나 서버를 제어할 수 있다. 둘 다 JavaScript의 문법을 기반으로 한다. 하지만 서로 간의 다른 함수를 사용한다. 대표적인 예로는 alert 함수가 있다.
그러므로 한가지만 안다고 두 가지를 모두 제어할 수 있는 것이 아니라 각각이 어떠한 기능을 가지고 있는지 알아야 제어가 가능함.
- 장점.
Chrome V8
웹 브라우저를 만드는데 기반을 제공하는 오픈 소스 자바스크립트 엔진으로 Google Chrome 브라우저와 안드로이드 브라우저에 탑재되어 있다.
ECMAScript(ECMA-262)3rd Edition 규격의 C++로 작성되었으며, 독립적으로 실행이 가능하다. 또한 C++로 작성된 응용 프로그램의 일부로 작동할 수 있다.
V8은 자바스크립트를 bytecode로 컴파일하고 실행하는 방식을 사용한다(JIT 컴파일). 추가적인 속도향상을 위해 inline caching과 같은 최적화 기법을 적용하였다.
Event - driven 방식
사용자가 이벤트를 발생시켰을 때, 입력장치로 데이터를 전송했을 경우만 작동하는 방식이다. 이는 발생한 이벤트에 대해서만 웹서버가 '연결'을 하기 때문에 자원을 최소화 할 수 있다.
non - blocking 패러다임
Blocking I/O 방식(동기식 I/O)는 Read/Write 이벤트가 발생하면 이벤트가 끝날때까지 해당 모듈을 점유하게 되며 메모리 버퍼에 데이터를 차지하게 되므로 메모리도 소비하게 된다. 즉, 다른일을 못하게 되는 것이다.
요청한 I/O가 완료될 때까지 해당 Thread를 '대기 모드'로 전환 시켰다가 완료 후 코드를 실행시킨다.
반면에, non-Blocking I/O(비동기식 I/O)의 경우 Read/Write 이벤트가 시작하자마자 모듈을 변환시켜 다른 작업을 하도록 준비상태가 된다. 이는 속도가 동기식보다 빠르고 메모리도 덜 차지하게 되는 이점이 있다.
Single Thread
적은 양의 자원으로 일을 처리하는 것이 가능하다. 하지만 특정한 한 곳에 예외상황이 발생한다면 전체에 영향을 미침.
클라이언트와 서버에서의 언어가 동일
Node.js 2장. 알아두어야 할 자바스크립트
ES2015+
ES2015(ES6) 등장으로 자바스크립트의 문법에 큰 변화가 있었으며 현재 ES2018까지 나왔으며, 문법에 대해 배울 때는 ES5의 문법을 배움.
var, const, let
var은 함수 스코프를 가지므로 if문의 '블록'과는 관계없이 접근할 수 있다.
하지만 const와 let은 블록 스코프를 가지므로 '블록 밖'에서는 변수에 접근할 수 없다. 함수 스코프 대신 블록 스코프를 사용함으로써 호스팅 같은 문제도 해결되고 코드 관리가 조금 더 수월해짐.
const와 let의 차이는 한번 대입하면 다른 값을 대입할 수 없다.
또한 초기화 시 값을 대입하지 않으면 에러가 발생.
템플릿 문자열
새로운 문자열 문법으로, "나"로 감싸는 기존 문자열과는 다르게 백틱(')으로 감싸며 특이한 점으로 ''안에 변수를 넣을 수 있다는 것.
ES5 문법 사용에서 ES6으로 넘어가면서 ${변수}형식으로 더하기 없이 문자열에 넣을 수 있다.
객체 리터럴
객체에 함수를 연결 할 때 :과 function을 붙이지 않아도 됨.
이는 ES5 문법 사용에서 ES6으로 넘어가면서 확인이 가능.
그리고 속성, 변수명이 겹치는 경우 한 번만 쓸 수 있게 되었으며, 객체의 속성명을 동적으로 생성 할 수 있다.
화살표 함수(=>)
기존의 function() {} 이외에도 추가로 화살표함수라는 새로운 함수 문법이 추가됨.
비구조화 할당
객체와 배열로부터 속성이나 요소르 쉽게 꺼낼 수 있다.
파이썬의 unpack 비슷하며 예는 교재 참고.
프로미스
주로 비동기 프로그래밍을 한다. 특히 이벤트 주도 방식 때문에 콜백 함수를 자주 사용한다. ES2015부터는 자바스크립트와 노드의 API들이 콜백대신 프로미스 기반으로 재구성됨.
new Promise로 생성할 수 있으며, 안에 resolve, reject를 매개변수로 갖는 콜백 함수를 넣어줌. 이렇게 만든 promise 변수에 then catch메서드를 붙일 수 있으며 내부에서 resolve가 호출되면 then이 실행, reject가 호출되면 catch가 실행됨.
async /await
Node.js 7.6, JavaScript 스펙은 ES2017 이용 가능.
async/await문법은 프로미스를 사용한 코드를 한 번 더 깔끔하게 줄여줌.
사용 방법은 함수 선언부를 일반 함수 대신 async function으로 교체한 후, 프로미스 앞에 await를 붙임. - 함수는 해당 프로미스가 resolve될 때까지 기다린 뒤 다음 로직으로 넘어감.
프론트엔트 자바스크립트(AJAX, FormData, encodeURLComponet, decodeURLComponent, data attribute, dataset)
AJAX(Asynchronous JavaScript And XML)
비동기적 웹 서비스를 개발하기 위한 기법으로 이름에 XML이 들어있지만 꼭 XML을 사용해야 하는 것은 아니며, 요즘 들어 JSON을 많이 사용함.
간단하게 말하자면, 페이지 이동 없이 서버에 요청을 보내고 응답을 받는 기술이다.
AJAX 요청은 보통 jQuery, axios같은 라이브러리를 이용해서 보냄.
FormData
HTML Form태그의 데이터를 동적으로 제어할 수 있는 기능이다. 주로 ajax와 함께 사용.
사용 방법은 파이썬의 딕셔너리 자료구조와 비슷하며 개체를 생성하며 키-값 형식으로 데이터를 저장할 수 있으며 여러번 사용하여 키 하나에 여러 개의 값을 추가해도 됨.
그 이하 지원해주는 기능은 교재 참조.
encodeURLComponet, decodedURLComponent
서버가 한글주소를 이해하지 못하는 경우가 있으므로, AJAX요청 시 encodeURIComponent메서를 사용.
data attribute, dataset
프론트엔드에서 AJAX로 데이터를 주고 받을때 주로 변수 혹은 FORM input value값을 가지고 통신함. 또는 jQuery의 data()메서드를 사용.
HTML 태그 속성으로 data-@로 속성과 여러 값을 지정할 수 있음.
