FrontEnd/모던 자바스크립트 deep dive

Chapter 01. 프로그래밍 Chapter 02.자바스크립트란?

계란💕 2023. 9. 28. 01:48

 

1장  프로그래밍이란?


 

  • 프로그래밍이란 0과 1 밖에 모르는 기계가 실행할 수 있도록 정확하고 상세하게 요구사항을 설명하는 작업이다. 
  • 그 작업의 결과물이 코드에 해당하다. 
  • 컴퓨터가 명령어를 수행하도록 하려면 컴퓨터가 이해할 수 있는 언어(기계어, machine code)로 컴퓨터에 명령어를 전달해야 한다. 
  • 개발자가 프로그래밍 언어를 사용해서 프로그램을 작성한 다음, 그걸 컴퓨터가 이해할 수 있는 기계어로 변환하는 번역기를 이용하는 방법이 있다. 
  • 이 번역기를 컴파일러(compiler) 또는 인터프리터(interpreter)라고 한다. 

 

 

2장 자바스크립트란?


자바스크립트의 탄생

  • 1995년 넷스케이프 커뮤니케이션즈가 웹 브라우저 시장을 90% 점유했다. 웹 브라우저에서 동작하는 경량 프로그래밍 언어 도입을 결정하다. 
  • 1996년 3월 넷스케이프 커뮤니케이션즈는 넷스케이프 내비게이터(Netscape Navigator) 2에 탑재되고 'Mocha'로 명명됐다.
    • 9월 '라이브스크립트(LiveScipt)'
    • 12월 '자바스크립트(JavaScript)'
  • 1996년 MicroSoft는 JavaScript의 파생 버전인  'JScript'를 발표해서 Internet Explorer 3.0 에 탑재 
    • 한계: 둘다 각 브라우저에서만 동작하는 기능을 경쟁적으로 도입하면서 JScript, JavaScript 둘다 표준화되지 못했다.  '크로스 브라우징 이슈'
  • 1996년 11월 넷스케이프 커뮤니케이션즈는 ECMA(컴퓨터 시스템 표준을 관리하는 비영리 표준화 기구) 인터내셔널에 자바스크립트 표준화를 요청
  • 1997년 7월 ECMA-262 라  불리는 표준화된 자바스크립트 초판(ECMAScript 1) 사양이 완성
  • 2009년  ECMAScript 5(EC5)는 HTML5와 함께 출현한 표준 사양
  • 2015년 ECMAScript 6(ECMAScript 2015, ES6)
    • let, const  키워드 도입 / 화살표 함수 / 클래스 / 모듈  등 도입

 

 


자바스크립트 성장의 역사

 

렌더링(rendering)

  • HTML, CSS, JavaScript 로 작성된 문서를 해석해서 브라우저에 시각적으로 출력하는 것을 말한다. 
    • 때로는 서버에서 데이터를 HTML로 변환해서 브라우저로 전달하는 과정(SSR, Servere Side Rendering)을 가리키기도 한다. 

 

 

Ajax(Asynchronous JavaScript and XML)

  • 자바스크립트를 이용해서 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능인 Ajax가 'XMLHttpRequest' 라는 이름으로 등장했다. 
  • Ajax가 등장 전에는 서버로부터 HTML 코드를 서버로부터 전송받아서  웹 페이지 전체를 렌더링하는 방식으로 동작했다. 
    • 즉, 화면이 전환되면 서버로부터 새로운 HTML을 전송 받아서 웹 페이지 전체를 처음부터 렌더링하기 때문에 비효율적이었다. 
    • 화면 전환되면서 순간  깜박이는 현상이 발생했다. (웹 페이지의 한계로 여겨짐)
  • Ajax가 등장하면서 웹 페이지에서 변경할 필요가 없느 부분다시 렌더링하지 않고 서버로부터 필요한 데이터만 받아서 변경해야하는 부분만 한정적으로 렌더링하는 방식이 가능해졌다. 
  • 웹 브라우저에서 빠른 성능과 부드러운 화면 전환이 가능해졌다.

 

 

 

jQuery

  • 2006년 jQeury의 등장으로 번거로운 점이 있던 DOM(Document Object Model)를 쉽게 제어할 수 있게 됐다. 
  • JavaScript 를 단순화해서 쉽게 사용할 수 있도록 도와주는 도구이다. 

 

 

Node.js

  • 2009  라이언 달이 발표한 Node.js는 구글 V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경이다. 
  •  Node.js는 브라우저의 자바스크립트 엔진에서만 동작하던 자바스크립트를 브라우저 이외의 환경에서도 동작하도록 자바스크립트 엔진을 브라우저에서 독립시킨 자바스크립트 실행 환경이다. 
  • 서버 사이드 애플리케이션 개발에 주로 사용된다.
  • 모듈, 파일 시스템, HTTP 등 내장 API를 제공한다. 
  • 프론트엔드와 백엔드 영역에서 자바스크립트 하나만 사용해도 된다는 장점이 있다. 
  • 비동기 I/O를 지원하고 단일 스레드 이벤트 기반으로 동작해서 요청 처리 성능이 좋다. 
  • 데이터를 실시간으로 처리하기 위해 I/O가 빈번한 SPA(Single Page Application)에 적합하다. 

 

 

인터프리터 언어(Interpreter Language) vs 컴파일 언어(Complie language)

컴파일러 언어 인터프리터 언어
컴파일 타임에 코드 전체를 머신 코드로 변환 후 실행 런타임에 한 줄씩 바이트 코드로 변환된 후 실행된다. 
실행 파일을 생성 실행 파일을 생성하지 않는다. 
컴파일 단계, 실행 단계가 분리 => 속도 빠름 컴파일 단계, 실행 단계가 분리되지 않다. 인터프리터는 한 줄씩 바이트 코드로 변환하고 즉시 실행된다. => 속도 느림
컴파일은 한 번 수행 코드가 실행될 때마다 인터프리트 과정이 반복된다. 

 

 

자바스크립트의 특징

  • 웹 브라우저에서 동작하는 유일한 프로그래밍 언어이다. 
  • 자바스크립트는 인터프리터 언어이다. 
    • 인터프리터 언어는 개발자가 별도의 컴파일 작업을 수행하지 않는다. 
  • 인터넷 익스플로러를 제외한 모던 브라우저의 ES6 지원 비율은 96-99%이지만 인터넷 익스플로러나 구형 브라우저는 ES6 를 대부분 지원하지 않는다. 
    • 인터넷 익스플로러나 구형 브라우저를 사용해야하는 경우라면 Babel(바벨)과 같은 트랜스파일러 사용해서 ES6 이상의 사양으로 구현한 코드르 ES5 이하로 다운드레이드해야한다. 

 

 

title

  • con
  • con

 


title

  • con
  • con

 


title

  • con
  • con

 

출처 - 「모던 자바스크립트 deep dive」 -이웅모